前端：
适配客户端部分特性
This commit is contained in:
parent
123fa6a7aa
commit
333391d16f
9
frontend/pc/IM/.editorconfig
Normal file
9
frontend/pc/IM/.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
4
frontend/pc/IM/.env
Normal file
4
frontend/pc/IM/.env
Normal file
@ -0,0 +1,4 @@
|
||||
VITE_API_BASE_URL = http://localhost:5202/api
|
||||
VITE_SIGNALR_BASE_URL = http://localhost:5202/chat/
|
||||
#VITE_API_BASE_URL = https://im.test.nxsir.cn/api
|
||||
#VITE_SIGNALR_BASE_URL = https://im.test.nxsir.cn/chat/
|
||||
6
frontend/pc/IM/.gitignore
vendored
Normal file
6
frontend/pc/IM/.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
dist
|
||||
out
|
||||
.DS_Store
|
||||
.eslintcache
|
||||
*.log*
|
||||
6
frontend/pc/IM/.prettierignore
Normal file
6
frontend/pc/IM/.prettierignore
Normal file
@ -0,0 +1,6 @@
|
||||
out
|
||||
dist
|
||||
pnpm-lock.yaml
|
||||
LICENSE.md
|
||||
tsconfig.json
|
||||
tsconfig.*.json
|
||||
4
frontend/pc/IM/.prettierrc.yaml
Normal file
4
frontend/pc/IM/.prettierrc.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
singleQuote: true
|
||||
semi: false
|
||||
printWidth: 100
|
||||
trailingComma: none
|
||||
3
frontend/pc/IM/.vscode/extensions.json
vendored
Normal file
3
frontend/pc/IM/.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["dbaeumer.vscode-eslint"]
|
||||
}
|
||||
39
frontend/pc/IM/.vscode/launch.json
vendored
Normal file
39
frontend/pc/IM/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Main Process",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceRoot}",
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
|
||||
"windows": {
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
|
||||
},
|
||||
"runtimeArgs": ["--sourcemap"],
|
||||
"env": {
|
||||
"REMOTE_DEBUGGING_PORT": "9222"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Debug Renderer Process",
|
||||
"port": 9222,
|
||||
"request": "attach",
|
||||
"type": "chrome",
|
||||
"webRoot": "${workspaceFolder}/src/renderer",
|
||||
"timeout": 60000,
|
||||
"presentation": {
|
||||
"hidden": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"compounds": [
|
||||
{
|
||||
"name": "Debug All",
|
||||
"configurations": ["Debug Main Process", "Debug Renderer Process"],
|
||||
"presentation": {
|
||||
"order": 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
11
frontend/pc/IM/.vscode/settings.json
vendored
Normal file
11
frontend/pc/IM/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
}
|
||||
34
frontend/pc/IM/README.md
Normal file
34
frontend/pc/IM/README.md
Normal file
@ -0,0 +1,34 @@
|
||||
# my-electron-app
|
||||
|
||||
An Electron application with Vue
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
||||
|
||||
## Project Setup
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
```bash
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```bash
|
||||
# For windows
|
||||
$ npm run build:win
|
||||
|
||||
# For macOS
|
||||
$ npm run build:mac
|
||||
|
||||
# For Linux
|
||||
$ npm run build:linux
|
||||
```
|
||||
12
frontend/pc/IM/build/entitlements.mac.plist
Normal file
12
frontend/pc/IM/build/entitlements.mac.plist
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.cs.allow-jit</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-dyld-environment-variables</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
BIN
frontend/pc/IM/build/icon.icns
Normal file
BIN
frontend/pc/IM/build/icon.icns
Normal file
Binary file not shown.
BIN
frontend/pc/IM/build/icon.ico
Normal file
BIN
frontend/pc/IM/build/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
frontend/pc/IM/build/icon.png
Normal file
BIN
frontend/pc/IM/build/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
3
frontend/pc/IM/dev-app-update.yml
Normal file
3
frontend/pc/IM/dev-app-update.yml
Normal file
@ -0,0 +1,3 @@
|
||||
provider: generic
|
||||
url: https://example.com/auto-updates
|
||||
updaterCacheDirName: my-electron-app-updater
|
||||
42
frontend/pc/IM/electron-builder.yml
Normal file
42
frontend/pc/IM/electron-builder.yml
Normal file
@ -0,0 +1,42 @@
|
||||
appId: com.electron.app
|
||||
productName: my-electron-app
|
||||
directories:
|
||||
buildResources: build
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
- '!electron.vite.config.{js,ts,mjs,cjs}'
|
||||
- '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
|
||||
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
|
||||
asarUnpack:
|
||||
- resources/**
|
||||
win:
|
||||
executableName: my-electron-app
|
||||
nsis:
|
||||
artifactName: ${name}-${version}-setup.${ext}
|
||||
shortcutName: ${productName}
|
||||
uninstallDisplayName: ${productName}
|
||||
createDesktopShortcut: always
|
||||
mac:
|
||||
entitlementsInherit: build/entitlements.mac.plist
|
||||
extendInfo:
|
||||
- NSCameraUsageDescription: Application requests access to the device's camera.
|
||||
- NSMicrophoneUsageDescription: Application requests access to the device's microphone.
|
||||
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
|
||||
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
|
||||
notarize: false
|
||||
dmg:
|
||||
artifactName: ${name}-${version}.${ext}
|
||||
linux:
|
||||
target:
|
||||
- AppImage
|
||||
- snap
|
||||
- deb
|
||||
maintainer: electronjs.org
|
||||
category: Utility
|
||||
appImage:
|
||||
artifactName: ${name}-${version}.${ext}
|
||||
npmRebuild: false
|
||||
publish:
|
||||
provider: generic
|
||||
url: https://example.com/auto-updates
|
||||
16
frontend/pc/IM/electron.vite.config.mjs
Normal file
16
frontend/pc/IM/electron.vite.config.mjs
Normal file
@ -0,0 +1,16 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'electron-vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
main: {},
|
||||
preload: {},
|
||||
renderer: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src/renderer/src')
|
||||
}
|
||||
},
|
||||
plugins: [vue()]
|
||||
}
|
||||
})
|
||||
30
frontend/pc/IM/eslint.config.mjs
Normal file
30
frontend/pc/IM/eslint.config.mjs
Normal file
@ -0,0 +1,30 @@
|
||||
import eslintConfig from '@electron-toolkit/eslint-config'
|
||||
import eslintConfigPrettier from '@electron-toolkit/eslint-config-prettier'
|
||||
import eslintPluginVue from 'eslint-plugin-vue'
|
||||
import vueParser from 'vue-eslint-parser'
|
||||
|
||||
export default [
|
||||
{ ignores: ['**/node_modules', '**/dist', '**/out'] },
|
||||
eslintConfig,
|
||||
...eslintPluginVue.configs['flat/recommended'],
|
||||
{
|
||||
files: ['**/*.vue'],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
},
|
||||
extraFileExtensions: ['.vue']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.{js,jsx,vue}'],
|
||||
rules: {
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
},
|
||||
eslintConfigPrettier
|
||||
]
|
||||
8888
frontend/pc/IM/package-lock.json
generated
Normal file
8888
frontend/pc/IM/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
53
frontend/pc/IM/package.json
Normal file
53
frontend/pc/IM/package.json
Normal file
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "my-electron-app",
|
||||
"version": "1.0.0",
|
||||
"description": "An Electron application with Vue",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "example.com",
|
||||
"homepage": "https://electron-vite.org",
|
||||
"scripts": {
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint --cache .",
|
||||
"start": "electron-vite preview",
|
||||
"dev": "electron-vite dev",
|
||||
"build": "electron-vite build",
|
||||
"postinstall": "electron-builder install-app-deps",
|
||||
"build:unpack": "npm run build && electron-builder --dir",
|
||||
"build:win": "npm run build && electron-builder --win",
|
||||
"build:mac": "npm run build && electron-builder --mac",
|
||||
"build:linux": "npm run build && electron-builder --linux"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cloudgeek/vue3-video-player": "^0.3.10",
|
||||
"@electron-toolkit/preload": "^3.0.2",
|
||||
"@electron-toolkit/utils": "^4.0.0",
|
||||
"@microsoft/signalr": "^10.0.0",
|
||||
"@vuelidate/core": "^2.0.3",
|
||||
"@vuelidate/validators": "^2.0.4",
|
||||
"axios": "^1.13.2",
|
||||
"electron-updater": "^6.3.9",
|
||||
"feather-icons": "^4.29.2",
|
||||
"hevue-img-preview": "^7.1.3",
|
||||
"idb": "^8.0.3",
|
||||
"pinia": "^3.0.3",
|
||||
"spark-md5": "^3.0.2",
|
||||
"vee-validate": "^4.15.1",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.5.1",
|
||||
"yup": "^1.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron-toolkit/eslint-config": "^2.1.0",
|
||||
"@electron-toolkit/eslint-config-prettier": "^3.0.0",
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"electron": "^39.2.6",
|
||||
"electron-builder": "^26.0.12",
|
||||
"electron-vite": "^5.0.0",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-vue": "^10.6.2",
|
||||
"prettier": "^3.7.4",
|
||||
"vite": "^7.2.6",
|
||||
"vue": "^3.5.25",
|
||||
"vue-eslint-parser": "^10.2.0"
|
||||
}
|
||||
}
|
||||
BIN
frontend/pc/IM/resources/icon-back.png
Normal file
BIN
frontend/pc/IM/resources/icon-back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
frontend/pc/IM/resources/icon.png
Normal file
BIN
frontend/pc/IM/resources/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 523 KiB |
BIN
frontend/pc/IM/resources/icon1.png
Normal file
BIN
frontend/pc/IM/resources/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
83
frontend/pc/IM/src/main/index.js
Normal file
83
frontend/pc/IM/src/main/index.js
Normal file
@ -0,0 +1,83 @@
|
||||
import { app, shell, BrowserWindow, ipcMain } from 'electron'
|
||||
import { join } from 'path'
|
||||
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
|
||||
import icon from '../../resources/icon.png?asset'
|
||||
import { registerWindowHandler } from './ipcHandlers/window'
|
||||
import { createTry } from './trayHandler'
|
||||
|
||||
function createWindow() {
|
||||
// Create the browser window.
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 900,
|
||||
height: 670,
|
||||
show: false,
|
||||
autoHideMenuBar: true,
|
||||
frame:false,
|
||||
...(process.platform === 'linux' ? { icon } : {}), // Linux 必须在这里设
|
||||
icon: join(__dirname, '../../resources/icon.png'), // Windows 开发环境预览
|
||||
webPreferences: {
|
||||
preload: join(__dirname, '../preload/index.js'),
|
||||
sandbox: false
|
||||
}
|
||||
})
|
||||
|
||||
createTry(mainWindow);
|
||||
|
||||
mainWindow.on('ready-to-show', () => {
|
||||
mainWindow.show()
|
||||
})
|
||||
|
||||
mainWindow.webContents.setWindowOpenHandler((details) => {
|
||||
shell.openExternal(details.url)
|
||||
return { action: 'deny' }
|
||||
})
|
||||
|
||||
// HMR for renderer base on electron-vite cli.
|
||||
// Load the remote URL for development or the local html file for production.
|
||||
if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
|
||||
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
|
||||
} else {
|
||||
mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
|
||||
}
|
||||
}
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.whenReady().then(() => {
|
||||
// Set app user model id for windows
|
||||
electronApp.setAppUserModelId('com.electron')
|
||||
|
||||
// Default open or close DevTools by F12 in development
|
||||
// and ignore CommandOrControl + R in production.
|
||||
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
|
||||
app.on('browser-window-created', (_, window) => {
|
||||
optimizer.watchWindowShortcuts(window)
|
||||
})
|
||||
|
||||
// IPC test
|
||||
ipcMain.on('ping', () => console.log('pong'))
|
||||
|
||||
registerWindowHandler()
|
||||
|
||||
createWindow()
|
||||
|
||||
|
||||
app.on('activate', function () {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
})
|
||||
|
||||
// Quit when all windows are closed, except on macOS. There, it's common
|
||||
// for applications and their menu bar to stay active until the user quits
|
||||
// explicitly with Cmd + Q.
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
15
frontend/pc/IM/src/main/ipcHandlers/window.js
Normal file
15
frontend/pc/IM/src/main/ipcHandlers/window.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { ipcMain, BrowserWindow } from "electron";
|
||||
|
||||
export function registerWindowHandler(){
|
||||
ipcMain.on('window-action', (event, action) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
if (!win) return;
|
||||
const actions = {
|
||||
minimize: () => win.minimize(),
|
||||
maximize: () => (win.isMaximized() ? win.unmaximize() : win.maximize()),
|
||||
close: () => win.hide(),
|
||||
isMaximized: () => win.isMaximized()
|
||||
};
|
||||
actions[action]?.();
|
||||
})
|
||||
}
|
||||
24
frontend/pc/IM/src/main/trayHandler.js
Normal file
24
frontend/pc/IM/src/main/trayHandler.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { app, Tray, Menu, nativeImage } from 'electron'
|
||||
import path from 'path'
|
||||
|
||||
let tray = null;
|
||||
|
||||
export function createTry(mainWindow){
|
||||
const iconPath = path.join(__dirname, '../../resources/icon.png')
|
||||
const icon = nativeImage.createFromPath(iconPath)
|
||||
|
||||
// 2. 创建托盘实例
|
||||
tray = new Tray(icon)
|
||||
|
||||
const menu = Menu.buildFromTemplate([
|
||||
{label: '退出', click: () => app.quit()},
|
||||
{label: '设置', click: () => alert('还没写')}
|
||||
]);
|
||||
tray.setToolTip('IM');
|
||||
tray.setContextMenu(menu);
|
||||
|
||||
// 5. 点击托盘图标显示窗口 (可选)
|
||||
tray.on('click', () => {
|
||||
mainWindow.isVisible() ? mainWindow.focus() : mainWindow.show()
|
||||
})
|
||||
}
|
||||
27
frontend/pc/IM/src/preload/index.js
Normal file
27
frontend/pc/IM/src/preload/index.js
Normal file
@ -0,0 +1,27 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
import { electronAPI } from '@electron-toolkit/preload'
|
||||
|
||||
// Custom APIs for renderer
|
||||
const api = {
|
||||
window: {
|
||||
minimize: () => ipcRenderer.send('window-action', 'minimize'),
|
||||
maximize: () => ipcRenderer.send('window-action', 'maximize'),
|
||||
close: () => ipcRenderer.send('window-action', 'close'),
|
||||
isMaximized: () => ipcRenderer.send('window-action', 'isMaximized')
|
||||
}
|
||||
}
|
||||
|
||||
// Use `contextBridge` APIs to expose Electron APIs to
|
||||
// renderer only if context isolation is enabled, otherwise
|
||||
// just add to the DOM global.
|
||||
if (process.contextIsolated) {
|
||||
try {
|
||||
contextBridge.exposeInMainWorld('electron', electronAPI)
|
||||
contextBridge.exposeInMainWorld('api', api)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
} else {
|
||||
window.electron = electronAPI
|
||||
window.api = api
|
||||
}
|
||||
20
frontend/pc/IM/src/renderer/index.html
Normal file
20
frontend/pc/IM/src/renderer/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Electron</title>
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self';
|
||||
script-src 'self' 'unsafe-inline';
|
||||
style-src 'self' 'unsafe-inline';
|
||||
connect-src 'self' http://localhost:5202 ws://localhost:5202;
|
||||
img-src 'self' data: blob: https: http:;
|
||||
font-src 'self' data:;">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
50
frontend/pc/IM/src/renderer/src/App.vue
Normal file
50
frontend/pc/IM/src/renderer/src/App.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<RouterView></RouterView>
|
||||
<Alert></Alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Alert from '@/components/messages/Alert.vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { useAuthStore } from './stores/auth';
|
||||
//import { useSignalRStore } from './stores/signalr';
|
||||
|
||||
onMounted(async () => {
|
||||
const { useSignalRStore } = await import('./stores/signalr');
|
||||
const authStore = useAuthStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
if(authStore.token){
|
||||
signalRStore.initSignalR();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.addMenu {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.search-box {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.search-section {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
#ContactContainer {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5; /* 与聊天列表右侧背景保持一致 */
|
||||
}
|
||||
</style>
|
||||
11
frontend/pc/IM/src/renderer/src/__tests__/App.spec.js
Normal file
11
frontend/pc/IM/src/renderer/src/__tests__/App.spec.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
import { mount } from '@vue/test-utils'
|
||||
import App from '../App.vue'
|
||||
|
||||
describe('App', () => {
|
||||
it('mounts renders properly', () => {
|
||||
const wrapper = mount(App)
|
||||
expect(wrapper.text()).toContain('You did it!')
|
||||
})
|
||||
})
|
||||
BIN
frontend/pc/IM/src/renderer/src/assets/default_avatar.png
Normal file
BIN
frontend/pc/IM/src/renderer/src/assets/default_avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 KiB |
98
frontend/pc/IM/src/renderer/src/components/ContextMenu.vue
Normal file
98
frontend/pc/IM/src/renderer/src/components/ContextMenu.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="context-menu"
|
||||
:style="{ top: style.top, left: style.left }"
|
||||
@click="hide"
|
||||
>
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.label"
|
||||
class="menu-item"
|
||||
:class="{ danger: item.type === 'danger' }"
|
||||
@click="item.action"
|
||||
>
|
||||
<span class="icon">{{ item.icon }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
const visible = ref(false);
|
||||
const menuItems = ref([]);
|
||||
const style = reactive({
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
});
|
||||
|
||||
// 打开菜单：传入原生事件 e 和菜单配置
|
||||
const show = (e, items) => {
|
||||
e.preventDefault(); // 再次确保拦截
|
||||
menuItems.value = items;
|
||||
|
||||
// 核心：使用 client 坐标定位
|
||||
style.top = `${e.clientY}px`;
|
||||
style.left = `${e.clientX}px`;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const hide = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 点击外部自动关闭
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', hide);
|
||||
window.addEventListener('contextmenu', hide); // 再次右键也关闭旧的
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', hide);
|
||||
window.removeEventListener('contextmenu', hide);
|
||||
});
|
||||
|
||||
defineExpose({ show, hide });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
min-width: 140px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #eee;
|
||||
padding: 5px 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.menu-item.danger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.menu-item .icon {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
165
frontend/pc/IM/src/renderer/src/components/IconInput.vue
Normal file
165
frontend/pc/IM/src/renderer/src/components/IconInput.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div id="InputGroup" class="input-group">
|
||||
<label> {{ props.lab }} </label>
|
||||
<div class="field-wrap">
|
||||
<i class="icon" :data-feather="props.iconName" ref="iconElement"></i>
|
||||
|
||||
<input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" v-bind="attrs"
|
||||
@input="inputHandler"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 使用 Options API 块设置配置选项
|
||||
export default {
|
||||
// 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted, watch, computed, useAttrs } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
|
||||
const props = defineProps({
|
||||
'modelValue': {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
'lab': {
|
||||
type: String,
|
||||
default: '输入框'
|
||||
},
|
||||
'placeholder': {
|
||||
type: String
|
||||
},
|
||||
'type': {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
'iconName': {
|
||||
type: String,
|
||||
required:true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const attrs = useAttrs()
|
||||
const inputValue = computed({
|
||||
get(){
|
||||
return props.modelValue;
|
||||
},
|
||||
set(newVal){
|
||||
emit('update:modelValue',newVal)
|
||||
}
|
||||
})
|
||||
|
||||
// ref 用于获取模板中的 DOM 元素
|
||||
const iconElement = ref(null);
|
||||
|
||||
// 定义渲染图标的函数
|
||||
const renderFeatherIcon = () => {
|
||||
// 确保在替换前先清空内容，防止重复渲染
|
||||
if (iconElement.value) {
|
||||
iconElement.value.innerHTML = '';
|
||||
}
|
||||
|
||||
// 仅替换当前元素
|
||||
// 确保只替换当前 <i class="icon"> 元素的内容，而不是整个 document
|
||||
// 通过 feather.icons[props.iconName].toSvg({...}) 来生成 SVG 并手动插入，可以实现更精确的控制。
|
||||
if (props.iconName && iconElement.value) {
|
||||
const svgString = feather.icons[props.iconName].toSvg({
|
||||
width: 18,
|
||||
height: 18,
|
||||
'stroke-width': 2,
|
||||
class: 'feather-icon' // 添加一个类名方便继承样式
|
||||
});
|
||||
iconElement.value.innerHTML = svgString;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 1. 组件挂载后渲染图标
|
||||
onMounted(() => {
|
||||
renderFeatherIcon();
|
||||
});
|
||||
|
||||
// 2. 侦听 iconName 和 inputValue 变化，如果变化则重新渲染
|
||||
watch(() => props.iconName, () => {
|
||||
renderFeatherIcon();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 完整的 CSS 样式 */
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
/* 之前被省略的 .forgot-link 样式，如果不需要可以删除 */
|
||||
.forgot-link {
|
||||
font-size: 12px;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 输入框样式：现代线框风格 */
|
||||
.field-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field-wrap .icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #94a3b8;
|
||||
transition: color 0.2s;
|
||||
pointer-events: none; /* Icon shouldn't block input click */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.field-wrap .icon > svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: currentColor;
|
||||
transition: stroke 0.2s;
|
||||
}
|
||||
|
||||
.field-wrap input {
|
||||
padding: 12px 12px 12px 40px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 聚焦交互 */
|
||||
.field-wrap input:focus {
|
||||
border-color: #6366f1; /* 品牌色 */
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); /* 柔和光晕 */
|
||||
}
|
||||
|
||||
/* 错误状态 (Optional, if you pass a prop later) */
|
||||
.field-wrap input.error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
/* 🚨 关键：聚焦时图标颜色变化的选择器 */
|
||||
.field-wrap input:focus ~ .icon {
|
||||
color: #6366f1; /* 聚焦时的颜色 */
|
||||
}
|
||||
</style>
|
||||
187
frontend/pc/IM/src/renderer/src/components/MyButton.vue
Normal file
187
frontend/pc/IM/src/renderer/src/components/MyButton.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div id="btn">
|
||||
<button
|
||||
class="submit-btn"
|
||||
:data-variant="props.variant"
|
||||
:disabled="props.disabled || props.loading"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<!-- Loading Spinner -->
|
||||
<span v-if="props.loading" class="spinner-icon"></span>
|
||||
|
||||
<!-- Button Content -->
|
||||
<span class="btn-text" :class="{ 'is-hidden': props.loading }">
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
||||
<!-- Icon Slot -->
|
||||
<div class="iconBox" v-if="$slots.icon && !props.loading">
|
||||
<slot name="icon"></slot>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 使用 Options API 块设置配置选项
|
||||
export default {
|
||||
// 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, useAttrs, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
// 按钮样式变体：primary, secondary, danger, text
|
||||
'variant': {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
|
||||
validator: (value) => ['primary', 'secondary', 'danger', 'text', 'pill', 'pill-green'].includes(value)
|
||||
},
|
||||
// 明确接收 disabled 属性，以便在脚本中控制和类型检查
|
||||
'disabled': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载状态 (可以与 disabled 结合使用)
|
||||
'loading': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取所有未被 props 声明接收的属性 (透传属性)
|
||||
const attrs = useAttrs()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ======================================= */
|
||||
/* Base Button Styling */
|
||||
/* ======================================= */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 8px; /* Default */
|
||||
color: white;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.submit-btn:disabled,
|
||||
.submit-btn.is-loading {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* Style Variants */
|
||||
/* ======================================= */
|
||||
|
||||
/* 1. Primary (Modern Blue) */
|
||||
.submit-btn[data-variant="primary"] {
|
||||
background: #3b82f6;
|
||||
}
|
||||
.submit-btn[data-variant="primary"]:hover {
|
||||
background: #2563eb;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* 2. Pill (Used for Login - Wider and Rounded) */
|
||||
.submit-btn[data-variant="pill"] {
|
||||
background: #3b82f6 !important;
|
||||
border-radius: 999px !important;
|
||||
min-width: 340px !important;
|
||||
height: 52px !important; /* Slightly taller for more impact */
|
||||
font-size: 16px !important;
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
.submit-btn[data-variant="pill"]:hover {
|
||||
background: #2563eb !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* 2.5 Pill-Green (Used for Register) */
|
||||
.submit-btn[data-variant="pill-green"] {
|
||||
background: #10b981 !important;
|
||||
border-radius: 999px !important;
|
||||
min-width: 340px !important;
|
||||
height: 52px !important;
|
||||
font-size: 16px !important;
|
||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2) !important;
|
||||
}
|
||||
.submit-btn[data-variant="pill-green"]:hover {
|
||||
background: #059669 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
/* 3. Secondary */
|
||||
.submit-btn[data-variant="secondary"] {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
.submit-btn[data-variant="secondary"]:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
/* 4. Danger */
|
||||
.submit-btn[data-variant="danger"] {
|
||||
background: #ef4444;
|
||||
}
|
||||
.submit-btn[data-variant="danger"]:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
/* 5. Text */
|
||||
.submit-btn[data-variant="text"] {
|
||||
background: transparent;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.submit-btn[data-variant="text"]:hover {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* Internal Elements */
|
||||
/* ======================================= */
|
||||
.spinner-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
163
frontend/pc/IM/src/renderer/src/components/Window.vue
Normal file
163
frontend/pc/IM/src/renderer/src/components/Window.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="desktop-container">
|
||||
<div class="app-window" :class="{ 'is-maximized': isMaximized }">
|
||||
|
||||
<header class="window-header" @dblclick="toggleMaximize">
|
||||
<div class="header-first"></div>
|
||||
<div class="header-second"></div>
|
||||
<div class="header-last">
|
||||
<div class="window-controls">
|
||||
<button class="control-btn minimize" @click="minimize" title="最小化">
|
||||
<svg width="10" height="10" viewBox="0 0 10 1">
|
||||
<rect width="10" height="1" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn maximize" @click="toggleMaximize" title="最大化/还原">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="1.5" y="1.5" width="7" height="7" v-if="!isMaximized"/>
|
||||
<path d="M3 1h6v6H3z M1 3h6v6H1z" v-else fill="currentColor" fill-opacity="0.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn close" @click="close" title="关闭">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
|
||||
<path d="M1 1L9 9M9 1L1 9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main class="window-body">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isMaximized = ref(false)
|
||||
|
||||
function minimize() {
|
||||
console.log('Window: Minimize')
|
||||
}
|
||||
function toggleMaximize() {
|
||||
isMaximized.value = !isMaximized.value
|
||||
console.log('Window: Maximize/Restore')
|
||||
}
|
||||
function close() {
|
||||
console.log('Window: Close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 模拟桌面背景 */
|
||||
.desktop-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
/* 一个高级的模糊背景，衬托窗口 */
|
||||
background: radial-gradient(circle at 50% 30%, #eef2ff, #e2e8f0);
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* 窗口主体 */
|
||||
.app-window {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px; /* 现代圆角 */
|
||||
/* 精致的窗口阴影：一层边框 + 两层阴影模拟浮起 */
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.06),
|
||||
0 8px 20px rgba(0, 0, 0, 0.08),
|
||||
0 20px 50px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
transition: width 0.3s, height 0.3s, border-radius 0.3s;
|
||||
}
|
||||
|
||||
/* 最大化状态 */
|
||||
.app-window.is-maximized {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 头部 Header */
|
||||
.window-header {
|
||||
height: 38px; /* 经典桌面应用高度 */
|
||||
background: #f8fafc; /* 极浅的灰，区分内容区 */
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
-webkit-app-region: drag; /* Electron/Tauri 拖拽支持 */
|
||||
}
|
||||
|
||||
.header-first {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.header-second {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
}
|
||||
|
||||
.header-last {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 窗口控制按钮 */
|
||||
.window-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.control-btn {
|
||||
width: 46px; /* 较宽的点击区域，类似 Win10/11 */
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #1e293b;
|
||||
}
|
||||
.control-btn.close:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 内容区 */
|
||||
.window-body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden; /* 确保内容不溢出圆角 */
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="window-controls" v-if="isElectron()">
|
||||
<button class="control-btn minimize" @click="minimize" title="最小化">
|
||||
<svg width="10" height="10" viewBox="0 0 10 1">
|
||||
<rect width="10" height="1" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn maximize" @click="toggleMaximize" title="最大化/还原">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="1.5" y="1.5" width="7" height="7" v-if="!isMaximized" />
|
||||
<path d="M3 1h6v6H3z M1 3h6v6H1z" v-else fill="currentColor" fill-opacity="0.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn close" @click="close" title="关闭">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2"
|
||||
stroke-linecap="round">
|
||||
<path d="M1 1L9 9M9 1L1 9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { isElectron } from '../utils/electronHelper'
|
||||
|
||||
const isMaximized = ref(false)
|
||||
|
||||
function minimize() {
|
||||
window.api.window.minimize();
|
||||
}
|
||||
function toggleMaximize() {
|
||||
isMaximized.value = !isMaximized.value;
|
||||
window.api.window.maximize();
|
||||
}
|
||||
function close() {
|
||||
window.api.window.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 窗口控制按钮 */
|
||||
.window-controls {
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: drag;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.control-btn {
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: no-drag;
|
||||
width: 46px; /* 较宽的点击区域，类似 Win10/11 */
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #1e293b;
|
||||
}
|
||||
.control-btn.close:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
180
frontend/pc/IM/src/renderer/src/components/addMenu.vue
Normal file
180
frontend/pc/IM/src/renderer/src/components/addMenu.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="add-menu-container" v-click-outside="closeMenu">
|
||||
<button class="add-btn" :class="{ active: isShow }" @click="toggleMenu">
|
||||
<span class="plus-icon">+</span>
|
||||
</button>
|
||||
|
||||
<Transition name="pop">
|
||||
<div v-if="isShow" class="menu-card">
|
||||
<div class="arrow"></div>
|
||||
|
||||
<div class="menu-list">
|
||||
<div class="menu-item" v-for="(item, index) in props.menuList" :key="index" @click="handleAction(item.action)">
|
||||
<i class="icon" v-html="item.icon"></i>
|
||||
<span>{{item.text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
menuList: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['actionActive'])
|
||||
|
||||
const isShow = ref(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
isShow.value = !isShow.value;
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
const handleAction = (type) => {
|
||||
emit('actionActive', type);
|
||||
isShow.value = false; // 点击后关闭
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义指令：点击外部区域关闭菜单
|
||||
* 也可以使用第三方库如 @vueuse/core 的 onClickOutside
|
||||
*/
|
||||
const vClickOutside = {
|
||||
mounted(el, binding) {
|
||||
el.clickOutsideEvent = (event) => {
|
||||
if (!(el === event.target || el.contains(event.target))) {
|
||||
binding.value();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', el.clickOutsideEvent);
|
||||
},
|
||||
unmounted(el) {
|
||||
document.removeEventListener('click', el.clickOutsideEvent);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* --- 以下是保持不动的原样部分 --- */
|
||||
.add-menu-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #dbdbdb;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background: #cccbcb;
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.pop-enter-active, .pop-leave-active {
|
||||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.pop-enter-from, .pop-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-10px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 12px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid white;
|
||||
}
|
||||
|
||||
/* --- 重点优化：仅限菜单列表部分 --- */
|
||||
|
||||
.menu-card {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 0;
|
||||
width: 120px; /* 稍微加宽，避免局促 */
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
/* 优化：使用更柔和的复合阴影，提升高级感 */
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
transform-origin: top right;
|
||||
padding: 4px; /* 增加内边距，让列表项不贴边 */
|
||||
border: 1px solid rgba(0, 0, 0, 0.05); /* 增加极细边框，防止白底背景重叠 */
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 0; /* 清除默认，改由父级 padding 控制 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px; /* 增加项与项之间的微小缝隙 */
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px; /* 增加点击区域和呼吸感 */
|
||||
cursor: pointer;
|
||||
border-radius: 6px; /* 每一行也给圆角，悬浮时更好看 */
|
||||
transition: all 0.2s;
|
||||
color: #4a4a4a;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #c6c6c6; /* 换成淡淡的品牌色背景 */
|
||||
}
|
||||
|
||||
/* 移除旧的、生硬的边角覆盖逻辑，改用上面统一的 border-radius */
|
||||
.menu-item:first-child:hover,
|
||||
.menu-item:last-child:hover {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 8px; /* 增加图标与文字的距离 */
|
||||
font-size: 14px; /* 稍微调大一点点 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
font-size: 13px; /* 稍微增大字号，更容易阅读 */
|
||||
font-weight: 500; /* 增加字重，更有质感 */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div v-for="c in props.contacts"
|
||||
:key="c.id"
|
||||
class="list-item"
|
||||
:class="{active: activeContactId === c.id}"
|
||||
@click="routeUserInfo(c.id)">
|
||||
<img :src="c.userInfo.avatar" class="avatar-std" />
|
||||
<div class="info">
|
||||
<div class="name">{{ c.remarkName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const activeContactId = ref(null)
|
||||
|
||||
const props = defineProps({
|
||||
contacts: {
|
||||
type:String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const routeUserInfo = (id) => {
|
||||
router.push(`/contacts/info/${id}`);
|
||||
activeContactId.value = id;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
text-decoration: none; /* 去除下划线 */
|
||||
color: inherit; /* 继承父元素的文本颜色 */
|
||||
outline: none; /* 去除点击时的蓝框 */
|
||||
-webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
|
||||
}
|
||||
|
||||
/* 去除 hover、active 等状态的效果 */
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: inherit; /* 保持颜色不变 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item:hover { background: #e2e2e2; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
|
||||
.avatar-std {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.icon-box.orange { background: #faad14; }
|
||||
.icon-box.green { background: #52c41a; }
|
||||
.icon-box.blue { background: #1890ff; }
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useContactStore } from '@/stores/contact';
|
||||
import { groupService } from '@/services/group';
|
||||
import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
|
||||
import { useMessage } from '../messages/useAlert';
|
||||
|
||||
const contactStore = useContactStore();
|
||||
const message = useMessage();
|
||||
|
||||
const props = defineProps({ modelValue: Boolean });
|
||||
|
||||
const friends = ref([])
|
||||
|
||||
const groupName = ref('');
|
||||
const selected = ref(new Set()); // 使用 Set 处理选中逻辑更简洁
|
||||
|
||||
const toggle = (id) => {
|
||||
selected.value.has(id) ? selected.value.delete(id) : selected.value.add(id);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
const res = await groupService.createGroup({
|
||||
name: groupName.value,
|
||||
avatar: "https://baidu.com",
|
||||
userIDs: [...selected.value]
|
||||
});
|
||||
|
||||
if(res.code == SYSTEM_BASE_STATUS.SUCCESS){
|
||||
message.show('群聊创建成功。');
|
||||
}else{
|
||||
message.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () =>{
|
||||
friends.value = contactStore.contacts;
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="modelValue" class="overlay" @click.self="$emit('update:modelValue', false)">
|
||||
<div class="mini-modal">
|
||||
<header>
|
||||
<span>发起群聊</span>
|
||||
<button @click="$emit('update:modelValue', false)">✕</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<input v-model="groupName" placeholder="群组名称..." class="mini-input" />
|
||||
|
||||
<div class="list">
|
||||
<div v-for="f in friends" :key="f.friendId" @click="toggle(f.friendId)" class="item">
|
||||
<img :src="f.userInfo.avatar" class="avatar" />
|
||||
<span class="name">{{ f.remarkName }}</span>
|
||||
<input type="checkbox" :checked="selected.has(f.friendId)" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<button @click="submit" :disabled="!groupName || !selected.size" class="btn">
|
||||
创建 ({{ selected.size }})
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
|
||||
display: flex; align-items: center; justify-content: center; z-index: 999;
|
||||
}
|
||||
|
||||
.mini-modal {
|
||||
background: white; width: 300px; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 12px 16px; display: flex; justify-content: space-between;
|
||||
background: #f9f9f9; font-weight: bold; font-size: 14px;
|
||||
}
|
||||
|
||||
header button { background: none; border: none; cursor: pointer; color: #999; }
|
||||
|
||||
main { padding: 12px; }
|
||||
|
||||
.mini-input {
|
||||
width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #eee;
|
||||
border-radius: 4px; box-sizing: border-box; outline: none;
|
||||
}
|
||||
|
||||
.list { max-height: 200px; overflow-y: auto; }
|
||||
|
||||
.item {
|
||||
display: flex; align-items: center; padding: 8px; cursor: pointer; border-radius: 6px;
|
||||
}
|
||||
.item:hover { background: #f5f5f5; }
|
||||
|
||||
.avatar { width: 32px; height: 32px; border-radius: 4px; margin-right: 10px; }
|
||||
.name { flex: 1; font-size: 14px; }
|
||||
|
||||
footer { padding: 12px; }
|
||||
.btn {
|
||||
width: 100%; padding: 10px; background: #07c160; color: white;
|
||||
border: none; border-radius: 6px; font-weight: bold; cursor: pointer;
|
||||
}
|
||||
.btn:disabled { background: #e1e1e1; color: #999; cursor: not-allowed; }
|
||||
</style>
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="modal-overlay" @click.self="$emit('close')">
|
||||
<div class="chat-modal">
|
||||
<div class="modal-header">
|
||||
<div class="header-top">
|
||||
<h3>群聊</h3>
|
||||
<button class="close-btn" @click="$emit('close')">×</button>
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜索群组..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-list">
|
||||
<TransitionGroup name="list">
|
||||
<div
|
||||
v-for="group in filteredGroups"
|
||||
:key="group.id"
|
||||
class="chat-item"
|
||||
@click="handleSelect(group)"
|
||||
>
|
||||
<div
|
||||
class="avatar"
|
||||
:style="{ background: group.avatar ? `url(${group.avatar}) center/cover` : group.color }"
|
||||
>
|
||||
{{ group.avatar ? '' : group.name.charAt(0) }}
|
||||
</div>
|
||||
|
||||
<div class="chat-info">
|
||||
<div class="chat-name">{{ group.name }}</div>
|
||||
<!--<div class="chat-preview">{{ group.lastMsg }}</div>-->
|
||||
</div>
|
||||
<!--
|
||||
<div class="chat-meta">
|
||||
<span class="time">{{ group.time }}</span>
|
||||
<span v-if="group.unread" class="unread">{{ group.unread }}</span>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
</TransitionGroup>
|
||||
|
||||
<div v-if="filteredGroups.length === 0" class="empty-state">
|
||||
未找到相关群聊
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, defineProps } from 'vue';
|
||||
|
||||
// 检查你的代码，确保 default 是一个返回数组的函数，且逗号、括号一一对应
|
||||
const props = defineProps({
|
||||
initialGroups: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ id: 1, name: '产品设计交流群', lastMsg: '张三: 确认一下原型图', time: '14:30', unread: 3, color: 'linear-gradient(45deg, #007AFF, #5AC8FA)' },
|
||||
{ id: 2, name: '技术研发部', lastMsg: '王五: Bug已修复并上线', time: '12:05', unread: 0, color: 'linear-gradient(45deg, #4CD964, #5AC8FA)' },
|
||||
{ id: 3, name: '周末户外徒步', lastMsg: '李四: 记得带雨伞', time: '昨天', unread: 12, color: 'linear-gradient(45deg, #FF9500, #FFCC00)' },
|
||||
{ id: 4, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }, // 确保这里没有多余或缺失的逗号
|
||||
{ id: 5, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
|
||||
{ id: 6, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
|
||||
{ id: 7, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
|
||||
{ id: 8, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
|
||||
{ id: 9, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }
|
||||
]
|
||||
}
|
||||
}); // 检查这里是否漏掉了右括号 )
|
||||
|
||||
|
||||
const emit = defineEmits(['close', 'select']);
|
||||
const searchQuery = ref('');
|
||||
|
||||
// 搜索过滤逻辑
|
||||
const filteredGroups = computed(() => {
|
||||
return props.initialGroups.filter(g =>
|
||||
g.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const handleSelect = (group) => {
|
||||
emit('select', group);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 遮罩层 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 弹出层主容器 */
|
||||
.chat-modal {
|
||||
width: 360px;
|
||||
max-height: 80vh;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.modal-header {
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-top h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #1d1d1f;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: #eee;
|
||||
border: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 列表滚动区 */
|
||||
.chat-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 18px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background: rgba(0, 122, 255, 0.08);
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 15px;
|
||||
margin-right: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #1d1d1f;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-preview {
|
||||
font-size: 13px;
|
||||
color: #86868b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chat-meta {
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #86868b;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.unread {
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 列表过渡动画 */
|
||||
.list-enter-active, .list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.list-enter-from, .list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #86868b;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="pure-group-list">
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
:class="{ active: activeId === group.id }"
|
||||
@click="activeId = group.id; $emit('select', group)"
|
||||
>
|
||||
<img :src="group.avatar" class="group-avatar" />
|
||||
|
||||
<span class="group-name">{{ group.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
groups: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
// 数据结构仅需: { id, name, avatar }
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
const activeId = ref(null);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pure-group-list {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
/* 移除内边距，完全由外部容器控制 */
|
||||
}
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
/* 避免文字选中 */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 悬停反馈：轻微变暗 */
|
||||
.group-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 选中态：建议使用稍微明显的底色 */
|
||||
.group-item.active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 32px; /* 进一步缩小，保持精致感 */
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
/* 防止名称过长换行 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { useMessage } from './useAlert';
|
||||
|
||||
// 获取全局状态和移除方法
|
||||
const { messages, remove } = useMessage();
|
||||
|
||||
// 图标配置
|
||||
const icons = {
|
||||
success: `<svg class="w-5 h-5" fill="none" stroke="#10B981" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
error: `<svg class="w-5 h-5" fill="none" stroke="#EF4444" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
warning: `<svg class="w-5 h-5" fill="none" stroke="#F59E0B" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`,
|
||||
info: `<svg class="w-5 h-5" fill="none" stroke="#3B82F6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="msg-container">
|
||||
<TransitionGroup name="msg-fade">
|
||||
<div
|
||||
v-for="item in messages"
|
||||
:key="item.id"
|
||||
class="msg-card"
|
||||
@click="remove(item.id)"
|
||||
>
|
||||
<div class="msg-icon" v-html="icons[item.type]"></div>
|
||||
<span class="msg-text">{{ item.content }}</span>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.msg-container {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: none; /* 重要：让鼠标能点击背后的页面 */
|
||||
}
|
||||
|
||||
.msg-card {
|
||||
pointer-events: auto; /* 恢复卡片可点击 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(0,0,0,0.02);
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 深度选择器控制 SVG 大小 */
|
||||
.msg-icon :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 动画部分 */
|
||||
.msg-fade-enter-active,
|
||||
.msg-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更有弹性的贝塞尔曲线 */
|
||||
}
|
||||
|
||||
.msg-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.9);
|
||||
}
|
||||
|
||||
.msg-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="history-loading-container">
|
||||
<div v-if="loading" class="state-wrapper loading">
|
||||
<svg class="spinner" viewBox="0 0 50 50">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
|
||||
</svg>
|
||||
<span>正在获取历史消息...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="state-wrapper error" @click="$emit('retry')">
|
||||
<span>加载失败，点击重试</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="finished" class="state-wrapper finished">
|
||||
<span>— 已显示全部消息 —</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
finished: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
error: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(['retry']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.history-loading-container {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.state-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff4d4f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.finished {
|
||||
color: #ccc;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 简单的 CSS 旋转动画 */
|
||||
.spinner {
|
||||
animation: rotate 2s linear infinite;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.spinner .path {
|
||||
stroke: #409eff;
|
||||
stroke-linecap: round;
|
||||
animation: dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
|
||||
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
|
||||
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<transition name="slide">
|
||||
<aside class="group-info-sidebar">
|
||||
<div class="sidebar-scroll-content">
|
||||
<section v-if="chatType == MESSAGE_TYPE.GROUP" class="info-card header-section">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="groupData.targetAvatar" class="group-main-avatar" />
|
||||
<div class="edit-badge" v-if="isAdmin" v-html="feather.icons['camera'].toSvg({width:15, height: 15})">
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="group-name">{{ groupData.targetName }}</h2>
|
||||
<p class="group-id">群ID: {{ groupData.id }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="chatType == MESSAGE_TYPE.GROUP" class="info-card">
|
||||
<div class="section-header">
|
||||
<h3 class="section-label">群公告</h3>
|
||||
<button v-if="isAdmin" class="text-link">编辑</button>
|
||||
</div>
|
||||
<div class="announcement-box">
|
||||
{{ groupData.announcement || '暂无群公告，点击编辑添加。' }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="chatType == MESSAGE_TYPE.GROUP" class="info-card">
|
||||
<div class="section-header">
|
||||
<h3 class="section-label">群成员 <span class="count-tag">{{ groupData.members?.length || 0 }}</span></h3>
|
||||
<button class="text-link" @click="$emit('viewAll')">查看全部</button>
|
||||
</div>
|
||||
|
||||
<div class="member-grid">
|
||||
<div class="member-item add-btn">
|
||||
<div class="member-avatar-box dashed">
|
||||
<span>+</span>
|
||||
</div>
|
||||
<span class="member-nick">邀请</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="member in groupData.members?.slice(0, 11)"
|
||||
:key="member.id"
|
||||
class="member-item"
|
||||
>
|
||||
<div class="member-avatar-box">
|
||||
<img :src="member.avatar" class="member-img" />
|
||||
<span v-if="member.role === 'admin'" class="role-badge"></span>
|
||||
</div>
|
||||
<span class="member-nick">{{ member.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="info-card settings-list">
|
||||
<div class="setting-item">
|
||||
<span>置顶聊天</span>
|
||||
<input type="checkbox" class="ios-switch" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>消息免打扰</span>
|
||||
<input type="checkbox" class="ios-switch" />
|
||||
</div>
|
||||
<div class="setting-item arrow">
|
||||
<span>查找聊天记录</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="danger-zone">
|
||||
<button class="danger-btn">删除并退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { MESSAGE_TYPE } from '../../constants/MessageType';
|
||||
import feather from 'feather-icons';
|
||||
|
||||
const props = defineProps({
|
||||
chatType: {
|
||||
type: String,
|
||||
default: MESSAGE_TYPE.GROUP
|
||||
},
|
||||
groupData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
id: '8888',
|
||||
name: '极客前端技术栈',
|
||||
avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=geek',
|
||||
announcement: '本群旨在交流 Vue3、Vite 和现代 CSS 技术，请保持礼貌，严禁广告。',
|
||||
members: Array.from({ length: 25 }, (_, i) => ({
|
||||
id: i,
|
||||
nickname: `成员 ${i + 1}`,
|
||||
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
|
||||
role: i === 0 ? 'admin' : 'member'
|
||||
}))
|
||||
})
|
||||
},
|
||||
currentUserId: [String, Number]
|
||||
});
|
||||
|
||||
defineEmits(['close', 'viewAll']);
|
||||
|
||||
// 判断当前用户是否为管理员
|
||||
const isAdmin = computed(() => {
|
||||
// 逻辑：在 members 数组中找到当前用户并检查 role
|
||||
return true; // 演示用，默认 true
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 容器定位：绝对定位在父组件最右侧，高度占满 */
|
||||
.group-info-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 320px;
|
||||
background-color: #f5f5f5; /* 背景色改为浅灰，突出白色卡片 */
|
||||
z-index: 1000;
|
||||
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ebedf0;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.sidebar-nav {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
color: #646566;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.icon-btn:hover { background: #f2f3f5; }
|
||||
|
||||
/* 内容区域 */
|
||||
.sidebar-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 通用卡片样式 */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 1. 头部特化样式 */
|
||||
.header-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.group-main-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.edit-badge {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
background: #c8c8c8;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.group-id {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
/* 2. 标题和公告 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
font-weight: normal;
|
||||
color: #969799;
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: #1d1010;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.announcement-box {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #646566;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 3. 成员网格 */
|
||||
.member-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px 8px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.member-avatar-box {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.member-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
border: 1.5px dashed #dcdee0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ff9f00;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.member-nick {
|
||||
font-size: 11px;
|
||||
color: #646566;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 4. 设置列表 */
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.setting-item:not(:last-child) {
|
||||
border-bottom: 0.5px solid #f2f3f5;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
content: '>';
|
||||
color: #ccc;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* 危险操作 */
|
||||
.danger-zone {
|
||||
padding: 20px 16px 40px;
|
||||
}
|
||||
|
||||
.danger-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
color: #ee0a24;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.danger-btn:hover { background: #fff1f0; }
|
||||
|
||||
/* 开关样式 (简易版本) */
|
||||
.ios-switch {
|
||||
appearance: none;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
background: #e5e5e5;
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.ios-switch:checked { background: #4cd964; }
|
||||
|
||||
.ios-switch::before {
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.ios-switch:checked::before { transform: translateX(18px); }
|
||||
|
||||
/* 动画 */
|
||||
.slide-enter-active, .slide-leave-active { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.slide-enter-from, .slide-leave-to { transform: translateX(100%); opacity: 0.5; }
|
||||
</style>
|
||||
124
frontend/pc/IM/src/renderer/src/components/messages/VideoMsg.vue
Normal file
124
frontend/pc/IM/src/renderer/src/components/messages/VideoMsg.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="video-msg-container" @click="handlePlay">
|
||||
<img :src="thumbnailUrl" class="video-poster" :style="containerStyle" />
|
||||
|
||||
<div class="play-icon-overlay">
|
||||
<div class="play-button"></div>
|
||||
</div>
|
||||
|
||||
<span v-if="duration" class="duration-label">
|
||||
{{ formatDuration(duration) }}
|
||||
</span>
|
||||
|
||||
<div v-if="uploading" class="upload-mask">
|
||||
<div class="progress">{{ progress }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
// 缩略图地址（可以是 URL 或 Blob 生成的 ObjectURL）
|
||||
thumbnailUrl: String,
|
||||
// 视频时长（秒）
|
||||
duration: Number,
|
||||
// 视频原始宽高（用于计算比例）
|
||||
w: Number,
|
||||
h: Number,
|
||||
uploading: Boolean,
|
||||
progress: Number
|
||||
});
|
||||
|
||||
const emit = defineEmits(['play']);
|
||||
|
||||
// 格式化时长：如 75 -> "01:15"
|
||||
const formatDuration = (seconds) => {
|
||||
if (!seconds) return '00:00';
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// 计算容器尺寸，防止长视频或宽视频撑破布局
|
||||
const containerStyle = computed(() => {
|
||||
const maxSide = 200; // 最大显示尺寸
|
||||
if (props.w > props.h) {
|
||||
return { width: maxSide + 'px', height: 'auto', aspectRatio: `${props.w}/${props.h}` };
|
||||
} else {
|
||||
return { height: maxSide + 'px', width: 'auto', aspectRatio: `${props.w}/${props.h}` };
|
||||
}
|
||||
});
|
||||
|
||||
const handlePlay = () => {
|
||||
emit('play');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-msg-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-poster {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.play-icon-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 10px;
|
||||
border-style: solid;
|
||||
border-width: 10px 0 10px 15px;
|
||||
border-color: transparent transparent transparent #333;
|
||||
}
|
||||
|
||||
.duration-label {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.upload-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
|
||||
<div id="Video"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import Player from 'xgplayer/dist/simple_player';
|
||||
import volume from 'xgplayer/dist/controls/volume';
|
||||
import playbackRate from 'xgplayer/dist/controls/playbackRate';
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
m: {
|
||||
type: Object,
|
||||
required:true
|
||||
}
|
||||
});
|
||||
|
||||
let player = new Player({
|
||||
id: 'Video',
|
||||
url: props.m.content.url,
|
||||
controlPlugins: [
|
||||
volume,
|
||||
playbackRate
|
||||
],
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
|
||||
});
|
||||
|
||||
</script>
|
||||
163
frontend/pc/IM/src/renderer/src/components/messages/VoiceMsg.vue
Normal file
163
frontend/pc/IM/src/renderer/src/components/messages/VoiceMsg.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div
|
||||
class="voice-card"
|
||||
:class="{ 'playing': isPlaying, 'voice-card-self': isSelf }"
|
||||
:style="{ width: bubbleWidth + 'px' }"
|
||||
@click="togglePlay"
|
||||
>
|
||||
<div class="play-icon-wrap">
|
||||
<svg v-if="!isPlaying" viewBox="0 0 24 24" class="svg-obj">
|
||||
<path fill="currentColor" d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" class="svg-obj">
|
||||
<path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="wave-track">
|
||||
<div v-for="n in 40" :key="n" class="wave-item"></div>
|
||||
</div>
|
||||
|
||||
<span class="time-label">{{ Math.floor(duration) }}''</span>
|
||||
|
||||
<div v-if="!isRead" class="unread-dot"></div>
|
||||
|
||||
<audio ref="audioRef" :src="url" @ended="stopPlay" @error="stopPlay"></audio>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
url: { type: String, required: true },
|
||||
duration: { type: Number, default: 0 },
|
||||
isRead: { type: Boolean, default: true },
|
||||
isSelf: { type: Boolean, default: true }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['played']);
|
||||
const audioRef = ref(null);
|
||||
const isPlaying = ref(false);
|
||||
|
||||
const bubbleWidth = computed(() => Math.min(110 + props.duration * 4, 260));
|
||||
|
||||
const togglePlay = (e) => {
|
||||
e.stopPropagation();
|
||||
if (isPlaying.value) {
|
||||
audioRef.value.pause();
|
||||
stopPlay();
|
||||
} else {
|
||||
audioRef.value.play();
|
||||
isPlaying.value = true;
|
||||
if (!props.isRead) emit('played');
|
||||
}
|
||||
};
|
||||
|
||||
const stopPlay = () => {
|
||||
isPlaying.value = false;
|
||||
if (audioRef.value) audioRef.value.currentTime = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 核心改动：纯白背景 + 物理阴影 + 明确边框 */
|
||||
.voice-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
background: #ffffff; /* 强迫其在灰白背景上显现 */
|
||||
border: 1.5px solid #e8eaed; /* 更有质感的深色边框 */
|
||||
border-radius: 5px; /* 全圆角更现代 */
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
color: #202124;
|
||||
/* 增加微妙的投影，产生高度感 */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.voice-card-self {
|
||||
background-color: #95ec69;
|
||||
}
|
||||
|
||||
.voice-card:hover {
|
||||
border-color: #007aff;
|
||||
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.12);
|
||||
}
|
||||
|
||||
.voice-card:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* 播放图标：使用品牌蓝 */
|
||||
.play-icon-wrap {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: black;
|
||||
}
|
||||
.svg-obj { width: 100%; height: 100%; }
|
||||
|
||||
/* 波形区 */
|
||||
.wave-track {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
margin: 0 12px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wave-item {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
background-color: #939496; /* 加深线条颜色，防止看不清 */
|
||||
border-radius: 1px;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 播放态动画 */
|
||||
.playing .wave-item {
|
||||
background-color: black;
|
||||
animation: bar-throb 0.7s infinite alternate;
|
||||
}
|
||||
|
||||
/* 使用 nth-child 赋予不同的波浪起伏感 */
|
||||
.wave-item:nth-child(4n+1) { height: 6px; animation-delay: 0.1s; }
|
||||
.wave-item:nth-child(4n+2) { height: 14px; animation-delay: 0.3s; }
|
||||
.wave-item:nth-child(4n+3) { height: 10px; animation-delay: 0.2s; }
|
||||
.wave-item:nth-child(4n+4) { height: 6px; animation-delay: 0.4s; }
|
||||
|
||||
@keyframes bar-throb {
|
||||
from { transform: scaleY(1); opacity: 0.7; }
|
||||
to { transform: scaleY(1.8); opacity: 1; }
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 13px;
|
||||
font-weight: 800; /* 加粗时间，更清晰 */
|
||||
color: #5f6368;
|
||||
flex-shrink: 0;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* 未读红点：增加发光效果 */
|
||||
.unread-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #f44336;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 1px 4px rgba(244, 67, 54, 0.4);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 1. 定义全局共享的状态 (单例模式)
|
||||
const messages = ref([]);
|
||||
let idCounter = 0;
|
||||
|
||||
export function useMessage() {
|
||||
|
||||
// 移除弹窗
|
||||
const remove = (id) => {
|
||||
const index = messages.value.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
messages.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加弹窗
|
||||
// type: 'success' | 'error' | 'warning' | 'info'
|
||||
const show = (content, type = 'info', duration = 3000) => {
|
||||
const id = idCounter++;
|
||||
const message = { id, content, type };
|
||||
|
||||
messages.value.push(message);
|
||||
|
||||
// 自动销毁
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
remove(id);
|
||||
}, duration);
|
||||
}
|
||||
};
|
||||
|
||||
// 快捷方法
|
||||
const success = (content) => show(content, 'success');
|
||||
const error = (content) => show(content, 'error');
|
||||
const warning = (content) => show(content, 'warning');
|
||||
const info = (content) => show(content, 'info');
|
||||
|
||||
return {
|
||||
messages, // 导出给组件渲染用
|
||||
show,
|
||||
remove,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
info
|
||||
};
|
||||
}
|
||||
175
frontend/pc/IM/src/renderer/src/components/user/SearchUser.vue
Normal file
175
frontend/pc/IM/src/renderer/src/components/user/SearchUser.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { friendService } from '@/services/friend';
|
||||
import { useMessage } from '../messages/useAlert';
|
||||
|
||||
const props = defineProps({ modelValue: Boolean });
|
||||
const emit = defineEmits(['update:modelValue', 'success']);
|
||||
const message = useMessage();
|
||||
|
||||
// 状态管理
|
||||
const step = ref(1);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const hasSearched = ref(false);
|
||||
const userResult = ref(null);
|
||||
|
||||
const keyword = ref('');
|
||||
const form = reactive({ remark: '', description: '你好，想加你为好友' });
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
setTimeout(() => {
|
||||
step.value = 1;
|
||||
userResult.value = null;
|
||||
keyword.value = '';
|
||||
hasSearched.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onSearch = async () => {
|
||||
if (!keyword.value.trim()) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await friendService.findUser(keyword.value);
|
||||
userResult.value = res.data;
|
||||
if (res.data) form.remark = res.data.nickName;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
hasSearched.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const submitAdd = async () => {
|
||||
submitting.value = true;
|
||||
const res = await friendService.requestFriend({
|
||||
toUserId: userResult.value.id,
|
||||
remarkName: form.remark,
|
||||
description: form.description
|
||||
});
|
||||
if (res.code == 0) message.success('已发送请求');
|
||||
else message.error(res.message);
|
||||
submitting.value = false;
|
||||
close();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="modelValue" class="overlay" @click.self="close">
|
||||
<div class="mini-modal">
|
||||
<header>
|
||||
<button v-if="step === 2" @click="step = 1" class="back-btn">←</button>
|
||||
<span class="title">{{ step === 1 ? '添加好友' : '验证信息' }}</span>
|
||||
<button @click="close" class="close-btn">✕</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div v-if="step === 1">
|
||||
<div class="search-bar">
|
||||
<input v-model="keyword" placeholder="搜索 ID / 手机号" @keyup.enter="onSearch" />
|
||||
<button @click="onSearch" :disabled="loading">
|
||||
{{ loading ? '...' : '搜索' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="userResult" class="result-card">
|
||||
<img :src="userResult.avatar" class="mini-avatar" />
|
||||
<div class="info">
|
||||
<div class="name">{{ userResult.nickName }}</div>
|
||||
<div class="id">ID: {{ userResult.username }}</div>
|
||||
</div>
|
||||
<button class="next-btn" @click="step = 2">添加</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasSearched" class="empty">未找到用户</div>
|
||||
</div>
|
||||
|
||||
<div v-if="step === 2" class="form">
|
||||
<div class="f-item">
|
||||
<label>备注</label>
|
||||
<input v-model="form.remark" class="f-input" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<label>留言</label>
|
||||
<textarea v-model="form.description" rows="2" class="f-input"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer v-if="step === 2">
|
||||
<button class="submit-btn" :disabled="submitting" @click="submitAdd">
|
||||
{{ submitting ? '发送中...' : '发送申请' }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
|
||||
display: flex; align-items: center; justify-content: center; z-index: 1000;
|
||||
}
|
||||
|
||||
.mini-modal {
|
||||
background: white; width: 300px; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 12px; display: flex; align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0; background: #fafafa;
|
||||
}
|
||||
|
||||
.title { flex: 1; font-size: 14px; font-weight: bold; text-align: center; }
|
||||
.back-btn, .close-btn { background: none; border: none; cursor: pointer; color: #999; padding: 4px; }
|
||||
|
||||
main { padding: 12px; }
|
||||
|
||||
/* 搜索条 */
|
||||
.search-bar {
|
||||
display: flex; background: #f0f0f0; border-radius: 6px; padding: 4px;
|
||||
}
|
||||
.search-bar input {
|
||||
flex: 1; background: transparent; border: none; outline: none;
|
||||
padding: 4px 8px; font-size: 13px;
|
||||
}
|
||||
.search-bar button {
|
||||
background: #007aff; color: white; border: none;
|
||||
padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
|
||||
/* 结果卡片 */
|
||||
.result-card {
|
||||
margin-top: 12px; display: flex; align-items: center;
|
||||
padding: 10px; background: #f9f9f9; border-radius: 8px;
|
||||
}
|
||||
.mini-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
|
||||
.info { flex: 1; }
|
||||
.name { font-size: 14px; font-weight: bold; color: #333; }
|
||||
.id { font-size: 11px; color: #999; }
|
||||
.next-btn {
|
||||
background: #007aff; color: white; border: none;
|
||||
padding: 5px 12px; border-radius: 15px; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
|
||||
/* 表单区 */
|
||||
.f-item { margin-bottom: 10px; }
|
||||
.f-item label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.f-input {
|
||||
width: 100%; border: 1px solid #eee; border-radius: 4px;
|
||||
padding: 8px; box-sizing: border-box; font-size: 13px; outline: none;
|
||||
}
|
||||
.f-input:focus { border-color: #007aff; }
|
||||
|
||||
footer { padding: 0 12px 12px; }
|
||||
.submit-btn {
|
||||
width: 100%; padding: 10px; background: #007aff; color: white;
|
||||
border: none; border-radius: 6px; font-weight: bold; cursor: pointer;
|
||||
}
|
||||
.submit-btn:disabled { opacity: 0.6; }
|
||||
|
||||
.empty { text-align: center; padding: 20px; font-size: 12px; color: #ccc; }
|
||||
</style>
|
||||
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="im-hover-card"
|
||||
:style="cardStyle"
|
||||
@mouseenter="clearTimer"
|
||||
@mouseleave="hide"
|
||||
>
|
||||
<div class="card-inner">
|
||||
<div class="user-profile">
|
||||
<div class="info-text">
|
||||
<h4 class="nickname">{{ currentUser.name }}</h4>
|
||||
<p class="detail-item">
|
||||
<span class="label">微信号：</span>
|
||||
<span class="value">{{ currentUser.id }}</span>
|
||||
</p>
|
||||
<p class="detail-item">
|
||||
<span class="label">地 区：</span>
|
||||
<span class="value">{{ currentUser.region || '未知' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<img :src="currentUser.avatar" class="avatar-square" />
|
||||
</div>
|
||||
|
||||
<div class="user-bio">
|
||||
<p class="bio-text">{{ currentUser.bio || '暂无签名' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<button class="action-btn primary" @click="onChat">发消息</button>
|
||||
<button v-if="!currentUser.isFriend" class="action-btn secondary" @click="onAdd">添加好友</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const isVisible = ref(false);
|
||||
const currentUser = ref({});
|
||||
const cardStyle = reactive({
|
||||
position: 'fixed',
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
});
|
||||
|
||||
let timer = null;
|
||||
|
||||
const show = (el, data) => {
|
||||
clearTimer();
|
||||
currentUser.value = data;
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
// IM 习惯：通常在头像右侧或下方弹出
|
||||
// 这里设置为在头像中心水平对齐，下方弹出
|
||||
cardStyle.top = `${rect.bottom + 8}px`;
|
||||
cardStyle.left = `${rect.left}px`;
|
||||
|
||||
isVisible.value = true;
|
||||
};
|
||||
|
||||
const hide = () => {
|
||||
timer = setTimeout(() => {
|
||||
isVisible.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const clearTimer = () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
console.log('申请添加好友:', currentUser.value.id);
|
||||
// 这里写你的逻辑
|
||||
};
|
||||
|
||||
const onChat = () => {
|
||||
console.log('跳转聊天窗口:', currentUser.value.id);
|
||||
isVisible.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ show, hide });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.im-hover-card {
|
||||
z-index: 9999;
|
||||
width: 280px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px; /* IM 通常是小圆角或直角 */
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #ebeef5;
|
||||
color: #333;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 头部布局：文字在左，头像在右（典型微信名片风） */
|
||||
.user-profile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
margin: 4px 0;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
color: #999;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 签名区 */
|
||||
.user-bio {
|
||||
padding: 15px 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 底部按钮：去掉花哨渐变，改用纯色或文字链接感 */
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
color: #576b95; /* 经典的微信蓝/链接色 */
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
color: #3e4d6d;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
color: #576b95;
|
||||
}
|
||||
|
||||
/* 动画：简单的淡入 */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
4
frontend/pc/IM/src/renderer/src/constants/MessageType.js
Normal file
4
frontend/pc/IM/src/renderer/src/constants/MessageType.js
Normal file
@ -0,0 +1,4 @@
|
||||
export const MESSAGE_TYPE = Object.freeze({
|
||||
PRIVATE: 'PRIVATE',
|
||||
GROUP: 'GROUP'
|
||||
})
|
||||
40
frontend/pc/IM/src/renderer/src/constants/fileTypeDefine.js
Normal file
40
frontend/pc/IM/src/renderer/src/constants/fileTypeDefine.js
Normal file
@ -0,0 +1,40 @@
|
||||
export const getMessageType = (fileType) => {
|
||||
if (!fileType) return FILE_TYPE.File; // 兜底处理
|
||||
|
||||
// 处理图片
|
||||
if (fileType.startsWith('image/')) {
|
||||
return FILE_TYPE.Image;
|
||||
}
|
||||
|
||||
// 处理音频（录音消息）
|
||||
if (fileType.startsWith('audio/')) {
|
||||
return FILE_TYPE.Voice;
|
||||
}
|
||||
|
||||
// 处理视频
|
||||
if (fileType.startsWith('video/')) {
|
||||
return FILE_TYPE.Video;
|
||||
}
|
||||
|
||||
// 常见文档类型的特殊处理（可选）
|
||||
const documentTypes = [
|
||||
'application/pdf',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'text/plain'
|
||||
];
|
||||
|
||||
if (documentTypes.includes(fileType)) {
|
||||
return FILE_TYPE.File;
|
||||
}
|
||||
|
||||
// 其他所有情况统一归类为文件
|
||||
return FILE_TYPE.File;
|
||||
};
|
||||
|
||||
export const FILE_TYPE = Object.freeze({
|
||||
Image: 'Image',
|
||||
Video: 'Video',
|
||||
Voice: 'Voice',
|
||||
File: 'File'
|
||||
});
|
||||
29
frontend/pc/IM/src/renderer/src/constants/fileTypeInfo.js
Normal file
29
frontend/pc/IM/src/renderer/src/constants/fileTypeInfo.js
Normal file
@ -0,0 +1,29 @@
|
||||
export class MessageBaseInfo {
|
||||
constructor(format, text) {
|
||||
this.format = format;
|
||||
this.text = text;
|
||||
}
|
||||
}
|
||||
|
||||
export class ImageInfo extends MessageBaseInfo {
|
||||
constructor(format, text, w, h, Thumb) {
|
||||
super(format, text);
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
this.thumb = Thumb;
|
||||
}
|
||||
}
|
||||
|
||||
export class VideoInfo extends ImageInfo {
|
||||
constructor(format, text, w, h, Thumb, duration) {
|
||||
super(format, text, w, h, Thumb);
|
||||
this.duration = duration;
|
||||
}
|
||||
}
|
||||
|
||||
export class VoiceInfo extends MessageBaseInfo {
|
||||
constructor(format, text, duration) {
|
||||
super(format, text);
|
||||
this.duration = duration;
|
||||
}
|
||||
}
|
||||
17
frontend/pc/IM/src/renderer/src/constants/friendAction.js
Normal file
17
frontend/pc/IM/src/renderer/src/constants/friendAction.js
Normal file
@ -0,0 +1,17 @@
|
||||
export const FRIEND_ACTIONS = Object.freeze({
|
||||
/**接受 */
|
||||
Accept: 'Accept',
|
||||
/**拒绝 */
|
||||
Reject: 'Reject'
|
||||
});
|
||||
|
||||
export const FRIEND_REQUEST_STATUS = Object.freeze({
|
||||
/**待处理 */
|
||||
Pending: 'Pending',
|
||||
/**通过 */
|
||||
Passed: 'Passed',
|
||||
/**已拒绝 */
|
||||
Declined: 'Declined',
|
||||
/**已拉黑 */
|
||||
Blocked: 'Blocked'
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
export const SYSTEM_BASE_STATUS = Object.freeze({
|
||||
SUCCESS: 0
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
|
||||
export const UPLOAD_STATUS = Object.freeze({
|
||||
UPLOADING: 'uploading',
|
||||
UPLOADED: 'uploaded',
|
||||
MERGING: 'merging',
|
||||
COMPLETE: 'complete'
|
||||
})
|
||||
14
frontend/pc/IM/src/renderer/src/handler/messageHandler.js
Normal file
14
frontend/pc/IM/src/renderer/src/handler/messageHandler.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { useConversationStore } from "@/stores/conversation"
|
||||
|
||||
export const messageHandler = (msg) => {
|
||||
const conversationStore = useConversationStore();
|
||||
const conversation = conversationStore.conversations.find(x => x.targetId == msg.senderId || x.targetId == msg.receiverId);
|
||||
conversation.lastMessage = msg.content;
|
||||
if (conversation.targetId == msg.receiverId) {
|
||||
conversation.unreadCount = 0;
|
||||
} else {
|
||||
conversation.unreadCount += 1;
|
||||
}
|
||||
conversation.dateTime = new Date().toISOString();
|
||||
|
||||
}
|
||||
23
frontend/pc/IM/src/renderer/src/main.js
Normal file
23
frontend/pc/IM/src/renderer/src/main.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import MyButton from './components/MyButton.vue'
|
||||
import IconInput from './components/IconInput.vue'
|
||||
|
||||
import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
|
||||
import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(Vue3VideoPlayer, {
|
||||
lang: 'zh-CN' // 可选，语言包
|
||||
})
|
||||
app.component('MyButton', MyButton)
|
||||
app.component('IconInput', IconInput)
|
||||
|
||||
app.mount('#app')
|
||||
106
frontend/pc/IM/src/renderer/src/router/index.js
Normal file
106
frontend/pc/IM/src/renderer/src/router/index.js
Normal file
@ -0,0 +1,106 @@
|
||||
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
|
||||
import MainView from '@/views/Main.vue'
|
||||
import TestView from '@/views/Test.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useMessage } from '@/components/messages/useAlert'
|
||||
|
||||
// 1. 检测是否在 Electron 环境
|
||||
const isElectron = window.electron !== undefined || navigator.userAgent.toLowerCase().includes('electron');
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
const routes = [
|
||||
{ path: '/auth/login', component: () => import('@/views/auth/Login.vue') },
|
||||
{
|
||||
path: '/',
|
||||
component: MainView,
|
||||
redirect: '/messages',
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: '/messages',
|
||||
name: 'userMessages',
|
||||
component: () => import('@/views/messages/MessageList.vue'),
|
||||
redirect: '/messages/index',
|
||||
children: [
|
||||
{
|
||||
path: '/messages/index',
|
||||
name: 'msgDefault',
|
||||
component: () => import('@/views/messages/MessageDefault.vue')
|
||||
},
|
||||
{
|
||||
path: '/messages/chat/:id',
|
||||
name: 'msgChat', // 修正了原本 path 风格的 name 命名
|
||||
component: () => import('@/views/messages/messageContent/MessageContent.vue'),
|
||||
props: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/contacts',
|
||||
name: 'userContacts',
|
||||
redirect: '/contacts/index',
|
||||
component: () => import('@/views/contact/ContactList.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/contacts/index',
|
||||
name: "contactDefault",
|
||||
component: () => import('@/views/contact/ContactDefault.vue')
|
||||
},
|
||||
{
|
||||
path: '/contacts/info/:id',
|
||||
name: 'contactInfo',
|
||||
component: () => import('@/views/contact/UserInfoContent.vue'),
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/contacts/requests',
|
||||
name: 'friendRequests',
|
||||
component: () => import('@/views/contact/FriendRequestList.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{ path: '/settings', name: 'userSettings', component: () => import('@/views/settings/SettingMenu.vue') }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
component: MainView,
|
||||
redirect: '/messages',
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{ path: '/test', component: TestView },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
// 2. 关键修改：Electron 环境下必须强制使用 Hash 模式
|
||||
history: isElectron
|
||||
? createWebHashHistory()
|
||||
: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
})
|
||||
|
||||
// 3. 优化守卫逻辑，防止无限重定向
|
||||
router.beforeEach((to, from, next) => {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 处理登录页逻辑
|
||||
if (to.path === '/auth/login') {
|
||||
if (authStore.isLoggedIn) {
|
||||
message.info('已登录，即将跳转...');
|
||||
return next('/');
|
||||
}
|
||||
return next();
|
||||
}
|
||||
|
||||
// 处理鉴权逻辑
|
||||
if (to.meta.requiresAuth && !authStore.isLoggedIn) {
|
||||
message.info('未登录，即将跳转...');
|
||||
// 使用 name 或带斜杠的完整路径，防止路径拼接错误
|
||||
return next('/auth/login');
|
||||
}
|
||||
|
||||
next();
|
||||
})
|
||||
|
||||
export default router
|
||||
104
frontend/pc/IM/src/renderer/src/services/api.js
Normal file
104
frontend/pc/IM/src/renderer/src/services/api.js
Normal file
@ -0,0 +1,104 @@
|
||||
import axios from 'axios'
|
||||
import { useMessage } from '@/components/messages/useAlert';
|
||||
import router from '@/router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { authService } from './auth';
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
let waitqueue = [];
|
||||
let isRefreshing = false;
|
||||
const authURL = ['/auth/login', '/auth/register', '/auth/refresh'];
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api', // 从环境变量中读取基础 URL
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
api.interceptors.request.use(
|
||||
config => {
|
||||
const authStore = useAuthStore();
|
||||
const token = authStore.token;
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
err => {
|
||||
return Promise.reject(err);
|
||||
}
|
||||
)
|
||||
|
||||
api.interceptors.response.use(
|
||||
response => {
|
||||
return response.data;
|
||||
},
|
||||
async err => {
|
||||
const authStore = useAuthStore();
|
||||
const { config, response } = err;
|
||||
if (response) {
|
||||
switch (response.status) {
|
||||
case 401:
|
||||
if (authURL.some(x => config.url.includes(x))) {
|
||||
authStore.logout();
|
||||
message.error('未登录，请登录后操作。');
|
||||
router.push('/auth/login')
|
||||
break;
|
||||
}
|
||||
if (config._retry) {
|
||||
break;
|
||||
}
|
||||
|
||||
config._retry = true;
|
||||
// 已经在刷新 → 排队
|
||||
if (isRefreshing) {
|
||||
return new Promise(resolve => {
|
||||
waitqueue.push(token => {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
resolve(api(config))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
isRefreshing = true;
|
||||
const refreshToken = authStore.refreshToken;
|
||||
if (refreshToken != null && refreshToken != '') {
|
||||
const res = await authService.refresh(refreshToken)
|
||||
authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo)
|
||||
waitqueue.forEach(cb => cb(authStore.token));
|
||||
waitqueue = [];
|
||||
config.headers.Authorization = `Bearer ${authStore.token}`
|
||||
return api(config)
|
||||
}
|
||||
authStore.logout();
|
||||
message.error('未登录，请登录后操作。');
|
||||
router.push('/auth/login')
|
||||
break;
|
||||
case 400:
|
||||
if (response.data && response.data.code == 1003) {
|
||||
message.error(response.data.message);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
message.error('请求错误，请检查网络。');
|
||||
break;
|
||||
}
|
||||
return Promise.reject(err);
|
||||
} else {
|
||||
message.error('请求错误，请检查网络。');
|
||||
return Promise.reject(err);
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
export const request = {
|
||||
get: (url, config) => api.get(url, config),
|
||||
post: (url, data, config) => api.post(url, data, config),
|
||||
put: (url, data, config) => api.put(url, data, config),
|
||||
delete: (url, config) => api.delete(url, config),
|
||||
instance: api,
|
||||
};
|
||||
23
frontend/pc/IM/src/renderer/src/services/auth.js
Normal file
23
frontend/pc/IM/src/renderer/src/services/auth.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { request } from "./api";
|
||||
|
||||
export const authService = {
|
||||
/**
|
||||
* 用户登录接口
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
login: (data) => request.post('/auth/login', data),
|
||||
|
||||
/**
|
||||
* 用户注册
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
register: (data) => request.post('/auth/register', data),
|
||||
/**
|
||||
* 刷新用户凭证
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
refresh: (refreshToken) => request.post('/auth/refresh', { refreshToken })
|
||||
}
|
||||
44
frontend/pc/IM/src/renderer/src/services/friend.js
Normal file
44
frontend/pc/IM/src/renderer/src/services/friend.js
Normal file
@ -0,0 +1,44 @@
|
||||
import { request } from "./api";
|
||||
import { FRIEND_ACTIONS } from "@/constants/friendAction";
|
||||
|
||||
export const friendService = {
|
||||
|
||||
/**
|
||||
* 获取好友列表
|
||||
* @param {*} page 当前页
|
||||
* @param {*} limit 页大小
|
||||
* @returns
|
||||
*/
|
||||
getFriendList: (page = 1, limit = 100) => request.get(`/friend/list?page=${page}&limit=${limit}`),
|
||||
/**
|
||||
* 搜索好友
|
||||
* @param {*} username
|
||||
* @returns
|
||||
*/
|
||||
|
||||
findUser: (username) => request.get(`/user/findbyusername?username=${username}`),
|
||||
/**
|
||||
* 申请添加好友
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
requestFriend: (params) => request.post('/friend/request', params),
|
||||
/**
|
||||
* 获取好友请求列表
|
||||
* @param {*} page
|
||||
* @param {*} limit
|
||||
* @returns
|
||||
*/
|
||||
getFriendRequests: (page = 1, limit = 100) => request.get(`/friend/requests?page=${page}&limit=${limit}`),
|
||||
|
||||
/**
|
||||
* 处理好友请求
|
||||
* @param {*} friendRequestId
|
||||
* @param {typeof FRIEND_ACTIONS[keyof typeof FRIEND_ACTIONS]} action
|
||||
* @returns
|
||||
*/
|
||||
handleFriendRequest: (friendRequestId, action, remarkname) => request.post(`/Friend/HandleRequest?id=${friendRequestId}`, {
|
||||
remarkName: remarkname,
|
||||
action: action
|
||||
})
|
||||
}
|
||||
10
frontend/pc/IM/src/renderer/src/services/group.js
Normal file
10
frontend/pc/IM/src/renderer/src/services/group.js
Normal file
@ -0,0 +1,10 @@
|
||||
import { request } from "./api"
|
||||
|
||||
export const groupService = {
|
||||
/**
|
||||
* 创建群聊
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
createGroup: (data) => request.post('/Group/CreateGroup', data)
|
||||
}
|
||||
42
frontend/pc/IM/src/renderer/src/services/message.js
Normal file
42
frontend/pc/IM/src/renderer/src/services/message.js
Normal file
@ -0,0 +1,42 @@
|
||||
import { request } from "./api";
|
||||
|
||||
export const messageService = {
|
||||
/**
|
||||
* 获取当前用户会话
|
||||
* @returns
|
||||
*/
|
||||
getConversations: () => request.get('/conversation/list'),
|
||||
|
||||
/**
|
||||
* 清空所有会话消息
|
||||
* @returns
|
||||
*/
|
||||
clearConversation: () => request.post(''),
|
||||
/**
|
||||
* 获取单个会话信息
|
||||
* @param {*} conversationId
|
||||
* @returns
|
||||
*/
|
||||
getConversationById: (conversationId) => request.get(`/conversation/get?conversationId=${conversationId}`),
|
||||
/**
|
||||
* 获取历史消息列表
|
||||
* @param {*} conversationId 指定会话
|
||||
* @param {*} msgId
|
||||
* @param {*} pageSize
|
||||
* @returns
|
||||
*/
|
||||
//getHistoryMessages: (conversationId, msgId, pageSize = 10) => request.get(`/message/getmessageList?conversationId=${conversationId}&msgId=${msgId}&pageSize=${pageSize}`),
|
||||
/**
|
||||
* 获取消息
|
||||
* @param {*} conversationId 会话ID
|
||||
* @param {Number} cursor 锚点(对应sequenceId)，查询最新消息传null
|
||||
* @param {Number} direction 方向 0为查历史消息 1为查锚点后的消息，查询最新消息传0 需配合cursor
|
||||
* @param {number} limit 单次查询消息数
|
||||
* @returns
|
||||
*/
|
||||
getMessages: (conversationId, cursor, direction, limit) => request.get(
|
||||
`/message/getmessageList?conversationId=${conversationId}${cursor ? '&cursor=' + cursor : ''}&direction=${direction}&limit=${limit}`
|
||||
),
|
||||
|
||||
sendMessage: (msg) => request.post('/Message/SendMessage', msg)
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import { request } from "../api";
|
||||
|
||||
export const uploadService = {
|
||||
/**
|
||||
* 创建文件上传任务
|
||||
* @param {*} fileName 文件名
|
||||
* @param {*} fileSize 文件大小
|
||||
* @param {*} contentType 文件类型
|
||||
* @param {*} fileHash 文件哈希
|
||||
* @returns
|
||||
*/
|
||||
createUploadTask: (fileName, fileSize, contentType, fileHash) => request.post('/Upload/CreateTask', {
|
||||
fileName: fileName,
|
||||
fileSize: fileSize,
|
||||
contentType: contentType,
|
||||
fileHash: fileHash
|
||||
}),
|
||||
/**
|
||||
* 创建分段任务
|
||||
* @param {*} taskId 任务ID
|
||||
* @param {*} partNum 分段序号
|
||||
* @returns
|
||||
*/
|
||||
createPartTask: (taskId, partNum) => request.post(`/Upload/CreatePart?taskId=${taskId}&partNum=${partNum}`),
|
||||
|
||||
completeTask: (taskId, data) => request.post(`/Upload/CompleteTask?taskId=${taskId}`, data),
|
||||
|
||||
uploadPart: (uploadUrl, headers, file, onProgress) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
return request.post(
|
||||
uploadUrl,
|
||||
formData,
|
||||
{
|
||||
baseURL: '',
|
||||
headers, // 不要包含 Content-Type
|
||||
onUploadProgress: e => {
|
||||
if (onProgress && e.total) {
|
||||
onProgress(e.loaded / e.total)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
uploadSmallFile: (file, hash) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
return request.post(`/Upload/upload/${hash}`, formData);
|
||||
}
|
||||
}
|
||||
122
frontend/pc/IM/src/renderer/src/services/upload/uploader.js
Normal file
122
frontend/pc/IM/src/renderer/src/services/upload/uploader.js
Normal file
@ -0,0 +1,122 @@
|
||||
import { reactive } from "vue";
|
||||
import { uploadService } from "./uploadService";
|
||||
import { getFileHash, sliceFile } from "@/utils/uploadTools";
|
||||
import { request } from "../api";
|
||||
import { UPLOAD_STATUS } from "@/constants/uploadStatus";
|
||||
|
||||
|
||||
export const uploadFile = async (file, {
|
||||
onProgress,
|
||||
onPartComplete
|
||||
} = {}) => {
|
||||
|
||||
const fileHash = await getFileHash(file);
|
||||
const { taskId, chunkSize, concurrency, skip, url } = (await uploadService.createUploadTask(file.name, file.size, file.type, fileHash)).data;
|
||||
|
||||
if (skip) {
|
||||
const uploadStatus = {
|
||||
status: UPLOAD_STATUS.COMPLETE,
|
||||
progress: 100,
|
||||
taskId: taskId,
|
||||
url: url
|
||||
}
|
||||
onProgress?.(uploadStatus)
|
||||
return;
|
||||
}
|
||||
|
||||
const chunks = sliceFile(file, chunkSize);
|
||||
|
||||
const comleteData = [];
|
||||
|
||||
let chunkProgress = reactive(new Array(chunks.length).fill(0))
|
||||
|
||||
const tasks = chunks.map((chunk, index) => {
|
||||
return async () => {
|
||||
const partNum = index + 1;
|
||||
const { skip, method, url, headers, partNumber } = (await uploadService.createPartTask(taskId, partNum)).data;
|
||||
if (!skip) {
|
||||
const { data } = await uploadService.uploadPart(url, headers, chunks[index], p => {
|
||||
chunkProgress[index] = p;
|
||||
// 第三步：计算总进度
|
||||
// 把账本上所有的百分比加起来
|
||||
const sum = chunkProgress.reduce((acc, cur) => acc + cur, 0);
|
||||
const total = (sum / chunks.length) * 100;
|
||||
const displayTotal = total.toFixed(2);
|
||||
const uploadStatus = {
|
||||
status: displayTotal == 100 ? UPLOAD_STATUS.UPLOADED : UPLOAD_STATUS.UPLOADING,
|
||||
progress: displayTotal,
|
||||
taskId: taskId,
|
||||
url: null
|
||||
}
|
||||
onProgress?.(uploadStatus)
|
||||
});
|
||||
onPartComplete?.(partNum)
|
||||
return data;
|
||||
} else {
|
||||
return { skip, partNumber };
|
||||
}
|
||||
}
|
||||
});
|
||||
const results = await concurrentUpload(tasks, concurrency);
|
||||
|
||||
const errors = results.filter(r => r.status === 'rejected');
|
||||
|
||||
if (errors.length > 0) return;
|
||||
|
||||
await uploadService.completeTask(taskId, comleteData);
|
||||
|
||||
const evtSource = new EventSource(`${request.instance.defaults.baseURL}/upload/events/${taskId}`);
|
||||
|
||||
evtSource.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
const uploadStatus = {
|
||||
status: data.progress == 100 ? UPLOAD_STATUS.COMPLETE : UPLOAD_STATUS.MERGING,
|
||||
taskId: taskId,
|
||||
progress: data.progress,
|
||||
url: data.url
|
||||
}
|
||||
onProgress?.(uploadStatus)
|
||||
|
||||
if (data.status === "Completed") {
|
||||
evtSource.close();
|
||||
}
|
||||
};
|
||||
|
||||
evtSource.onerror = (err) => {
|
||||
console.error("SSE 连接异常", err);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const concurrentUpload = async (tasks, limit = 3, maxRetries = 3) => {
|
||||
const results = [];
|
||||
const executing = [];
|
||||
for (const task of tasks) {
|
||||
const retryTask = async (task) => {
|
||||
let attempt = 0;
|
||||
while (attempt <= maxRetries) {
|
||||
try {
|
||||
return await task();
|
||||
} catch (e) {
|
||||
attempt++;
|
||||
if (attempt > maxRetries) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const p = Promise.resolve().then(() => retryTask(task));
|
||||
results.push(p);
|
||||
|
||||
if (limit <= tasks.length) {
|
||||
const e = p.finally(() => executing.splice(executing.indexOf(e), 1));
|
||||
executing.push(e);
|
||||
|
||||
if (executing.length >= limit) {
|
||||
await Promise.race(executing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.allSettled(results);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
export function useBrowserNotification() {
|
||||
const requestPermission = async () => {
|
||||
if ("Notification" in window && Notification.permission === "default") {
|
||||
await Notification.requestPermission();
|
||||
}
|
||||
};
|
||||
|
||||
const send = (title, options = {}) => {
|
||||
if ("Notification" in window && Notification.permission === "granted") {
|
||||
// 如果页面正处于激活状态，通常不需要弹窗提醒，以免干扰用户
|
||||
/*
|
||||
if (document.visibilityState === 'visible' && document.hasFocus()) {
|
||||
return;
|
||||
}
|
||||
*/
|
||||
return new Notification(title, options);
|
||||
}
|
||||
};
|
||||
|
||||
return { requestPermission, send };
|
||||
}
|
||||
65
frontend/pc/IM/src/renderer/src/stores/auth.js
Normal file
65
frontend/pc/IM/src/renderer/src/stores/auth.js
Normal file
@ -0,0 +1,65 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref(localStorage.getItem('user_token') || '');
|
||||
const refreshToken = ref(localStorage.getItem('refresh_token') || '');
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem('user_info')) || {});
|
||||
|
||||
//判断是否已登录
|
||||
const isLoggedIn = computed(() => !!refreshToken.value);
|
||||
/**
|
||||
* 安全解析 JWT
|
||||
*/
|
||||
const getPayload = (t) => {
|
||||
try {
|
||||
const base64Url = t.split('.')[1];
|
||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
// 处理 Unicode 字符解码
|
||||
return JSON.parse(decodeURIComponent(atob(base64).split('').map(c =>
|
||||
'%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
|
||||
).join('')));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 检查 Token 是否过期
|
||||
const isTokenExpired = computed(() => {
|
||||
if (!token.value) return true;
|
||||
const payload = getPayload(token.value);
|
||||
if (!payload || !payload.exp) return true;
|
||||
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return (payload.exp - now) < 30; // 预留 30 秒缓冲
|
||||
});
|
||||
|
||||
/**
|
||||
* 登录成功保存状态
|
||||
* @param {String} newToken 用户凭证
|
||||
* @param {*} user 用户信息
|
||||
*/
|
||||
function setLoginInfo(newToken, newRefreshToken, user) {
|
||||
console.log(`设置凭证：\ntoken：${newToken}\nrefreshToken:${newRefreshToken}`)
|
||||
token.value = newToken;
|
||||
refreshToken.value = newRefreshToken
|
||||
userInfo.value = user;
|
||||
localStorage.setItem('user_token', newToken);
|
||||
localStorage.setItem('refresh_token', newRefreshToken)
|
||||
localStorage.setItem('user_info', JSON.stringify(user))
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
function logout() {
|
||||
token.value = '';
|
||||
userInfo.value = null;
|
||||
refreshToken.value = ''
|
||||
localStorage.removeItem('user_token');
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user_info')
|
||||
}
|
||||
|
||||
return { token, refreshToken, userInfo, isLoggedIn, isTokenExpired, setLoginInfo, logout };
|
||||
})
|
||||
121
frontend/pc/IM/src/renderer/src/stores/chat.js
Normal file
121
frontend/pc/IM/src/renderer/src/stores/chat.js
Normal file
@ -0,0 +1,121 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { messagesDb } from "@/utils/db/messageDB";
|
||||
import { messageService } from "@/services/message";
|
||||
import { useConversationStore } from "./conversation";
|
||||
|
||||
export const useChatStore = defineStore('chat', {
|
||||
state: () => ({
|
||||
activeConversationId: null,
|
||||
activeSessionId: null,
|
||||
maxSequenceId: null,
|
||||
isEnded: false,
|
||||
messages: [],
|
||||
pageSize: 20
|
||||
}),
|
||||
actions: {
|
||||
// 抽取统一的排序去重方法
|
||||
async pushAndSortMessagesAsync(newMsgs, sessionId, shouldSaveToDb = true) {
|
||||
if (shouldSaveToDb) {
|
||||
for (const m of newMsgs) {
|
||||
if (m.type != 'Text' && !m.isLoading && !m.isError && !m.isImgLoading) {
|
||||
m.content = JSON.parse(m.content);
|
||||
}
|
||||
await messagesDb.save({ ...m, sessionId });
|
||||
}
|
||||
}
|
||||
|
||||
if (sessionId == this.activeSessionId) {
|
||||
const combined = [...this.messages, ...newMsgs];
|
||||
// 1. 根据 msgId 或唯一 key 去重
|
||||
const uniqueMap = new Map();
|
||||
combined.forEach(m => uniqueMap.set(m.msgId || m.sequenceId, m));
|
||||
|
||||
// 2. 转换为数组并按sequenceId升序排序 (旧的在前，新的在后)
|
||||
this.messages = Array.from(uniqueMap.values()).sort((a, b) => {
|
||||
return a.sequenceId - b.sequenceId;
|
||||
});
|
||||
this.maxSequenceId = this.messages.reduce((max, m) =>
|
||||
m.sequenceId > max ? m.sequenceId : max,
|
||||
null // 初始值
|
||||
);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换会话加载当前会话消息列表
|
||||
* @param {*} sessionId
|
||||
*/
|
||||
async swtichSession(sessionId, conversationId) {
|
||||
this.activeSessionId = sessionId;
|
||||
this.activeConversationId = conversationId;
|
||||
this.messages = [];
|
||||
this.isEnded = false;
|
||||
//先从浏览器缓存加载一部分消息列表
|
||||
const localHistory = await messagesDb.getLatestMessages(sessionId, this.pageSize);
|
||||
console.log(localHistory)
|
||||
if (localHistory.length > 0) {
|
||||
this.messages = localHistory;
|
||||
this.maxSequenceId = this.messages.reduce((max, m) =>
|
||||
m.sequenceId > max ? m.sequenceId : max,
|
||||
null // 初始值
|
||||
);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 从服务器加载新消息
|
||||
* @param {*} sessionId
|
||||
* @returns
|
||||
*/
|
||||
async fetchNewMsgFromServier(conversationId, sequenceId) {
|
||||
const newMsg = (await messageService.getMessages(conversationId, sequenceId, sequenceId ? 1 : 0, this.pageSize)).data;
|
||||
if (newMsg.length > 0) {
|
||||
return newMsg;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 从服务器加载历史消息
|
||||
* @param {*} sessionId
|
||||
* @param {*} msgId
|
||||
* @returns
|
||||
*/
|
||||
async fetchHistoryFromServer(conversationId, sequenceId) {
|
||||
const res = (await messageService.getMessages(conversationId, sequenceId, 0, this.pageSize)).data;
|
||||
|
||||
if (res.length > 0) {
|
||||
const sessionId = this.activeSessionId;
|
||||
return res;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 加载更多历史消息
|
||||
*/
|
||||
async loadMoreMessages() {
|
||||
let minSequenceId = 0;
|
||||
if (!this.messages || this.messages.length === 0) return;
|
||||
minSequenceId = this.messages.reduce((min, m) =>
|
||||
(m.sequenceId < min ? m.sequenceId : min),
|
||||
this.messages[0].sequenceId // 使用第一项作为初始参考值
|
||||
);
|
||||
const dbCacheList = await messagesDb.getPageMessages(this.activeSessionId, minSequenceId, this.pageSize)
|
||||
const dbMaxSequenceId = dbCacheList.reduce((max, m) =>
|
||||
m.sequenceId > max ? m.sequenceId : max,
|
||||
null // 初始值
|
||||
);
|
||||
if (dbCacheList.length < this.pageSize) {
|
||||
const newList = await this.fetchHistoryFromServer(this.activeConversationId, minSequenceId)
|
||||
if (newList.length === 0) this.isEnded = true;
|
||||
await this.pushAndSortMessagesAsync(newList, this.activeSessionId, true);
|
||||
} else if (dbMaxSequenceId < minSequenceId - 1) {
|
||||
const newList = await this.fetchHistoryFromServer(this.activeConversationId, minSequenceId)
|
||||
if (newList.length === 0) this.isEnded = true;
|
||||
await this.pushAndSortMessagesAsync(newList, this.activeSessionId, true);
|
||||
}
|
||||
else {
|
||||
await this.pushAndSortMessagesAsync(dbCacheList, this.activeSessionId, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
45
frontend/pc/IM/src/renderer/src/stores/contact.js
Normal file
45
frontend/pc/IM/src/renderer/src/stores/contact.js
Normal file
@ -0,0 +1,45 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { contactDb } from "@/utils/db/contactDB";
|
||||
import { friendService } from "@/services/friend";
|
||||
import { useMessage } from "@/components/messages/useAlert";
|
||||
|
||||
export const useContactStore = defineStore('contact', {
|
||||
state: () => ({
|
||||
contacts: [],
|
||||
|
||||
}),
|
||||
actions: {
|
||||
async addContact(contact) {
|
||||
this.contacts.push(contact);
|
||||
await contactDb.save(contact);
|
||||
},
|
||||
async loadContactList() {
|
||||
if (this.contacts.length == 0) {
|
||||
this.contacts = await contactDb.getAll();
|
||||
}
|
||||
this.fetchContactFromServer();
|
||||
},
|
||||
async fetchContactFromServer() {
|
||||
const message = useMessage();
|
||||
const res = await friendService.getFriendList();
|
||||
if (res.code == 0) {
|
||||
const localMap = new Map(this.contacts.map(item => [item.id, item]));
|
||||
res.data.forEach(item => {
|
||||
const existingItem = localMap.get(item.id);
|
||||
if (existingItem) {
|
||||
// --- 局部更新 ---
|
||||
// 使用 Object.assign 将新数据合并到旧对象上，保持响应式引用
|
||||
Object.assign(existingItem, item);
|
||||
} else {
|
||||
// --- 插入新会话 ---
|
||||
this.contacts.push(item);
|
||||
}
|
||||
// 同步到本地数据库
|
||||
contactDb.save(item);
|
||||
});
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
72
frontend/pc/IM/src/renderer/src/stores/conversation.js
Normal file
72
frontend/pc/IM/src/renderer/src/stores/conversation.js
Normal file
@ -0,0 +1,72 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { messageService } from "@/services/message";
|
||||
import { conversationDb } from "@/utils/db/conversationDB";
|
||||
import { useMessage } from "@/components/messages/useAlert";
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
export const useConversationStore = defineStore('conversation', {
|
||||
state: () => ({
|
||||
conversations: []
|
||||
}),
|
||||
// stores/conversation.js
|
||||
getters: {
|
||||
// 始终根据时间戳倒序排列
|
||||
sortedConversations: (state) => {
|
||||
return [...state.conversations].sort((a, b) =>
|
||||
new Date(b.dateTime) - new Date(a.dateTime)
|
||||
);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async addConversation(conversation) {
|
||||
await conversationDb.save(conversation);
|
||||
this.conversations.unshift(conversation)
|
||||
},
|
||||
/**
|
||||
* 加载当前会话消息列表
|
||||
*/
|
||||
async loadUserConversations() {
|
||||
if (this.conversations.length == 0) {
|
||||
try {
|
||||
const covnersationsCache = await conversationDb.getAll();
|
||||
if (covnersationsCache && covnersationsCache.length > 0) {
|
||||
this.conversations = covnersationsCache.sort((a, b) => {
|
||||
return new Date(a.dateTime) - new Date(b.dateTime);
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
message.error('读取本地会话缓存失败...');
|
||||
console.log('读取本地会话缓存失败：', e);
|
||||
}
|
||||
}
|
||||
//await this.fetchConversationsFromServier()
|
||||
},
|
||||
/**
|
||||
* 从服务器加载新消息
|
||||
* @param {*} sessionId
|
||||
* @returns
|
||||
*/
|
||||
async fetchConversationsFromServier() {
|
||||
const newConversations = (await messageService.getConversations()).data;
|
||||
if (newConversations.length > 0) {
|
||||
// 1. 将当前的本地数据转为 Map，方便通过 ID 快速查找 (O(1) 复杂度)
|
||||
const localMap = new Map(this.conversations.map(item => [item.id, item]));
|
||||
newConversations.forEach(item => {
|
||||
const existingItem = localMap.get(item.id);
|
||||
if (existingItem) {
|
||||
// --- 局部更新 ---
|
||||
// 使用 Object.assign 将新数据合并到旧对象上，保持响应式引用
|
||||
Object.assign(existingItem, item);
|
||||
} else {
|
||||
// --- 插入新会话 ---
|
||||
this.conversations.unshift(item);
|
||||
}
|
||||
// 同步到本地数据库
|
||||
conversationDb.save(item);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
103
frontend/pc/IM/src/renderer/src/stores/signalr.js
Normal file
103
frontend/pc/IM/src/renderer/src/stores/signalr.js
Normal file
@ -0,0 +1,103 @@
|
||||
import { defineStore } from "pinia";
|
||||
import * as signalR from '@microsoft/signalr';
|
||||
import { useMessage } from "@/components/messages/useAlert";
|
||||
import { useAuthStore } from "./auth";
|
||||
import { useChatStore } from "./chat";
|
||||
import { authService } from "@/services/auth";
|
||||
import { generateSessionId } from "@/utils/sessionIdTools";
|
||||
import { messageHandler } from "@/handler/messageHandler";
|
||||
import { useBrowserNotification } from "@/services/useBrowserNotification";
|
||||
import { useConversationStore } from "./conversation";
|
||||
import { SignalRMessageHandler } from "@/utils/signalr/SignalMessageHandler";
|
||||
import { signalRConnectionEventHandler } from "@/utils/signalr/signalRConnectionEventHandler";
|
||||
|
||||
export const useSignalRStore = defineStore('signalr', {
|
||||
state: () => ({
|
||||
connection: null,
|
||||
isConnected: false
|
||||
}),
|
||||
actions: {
|
||||
async initSignalR() {
|
||||
const message = useMessage()
|
||||
const authStore = useAuthStore()
|
||||
const url = import.meta.env.VITE_SIGNALR_BASE_URL || 'http://localhost:5202/chat/';
|
||||
this.connection = new signalR.HubConnectionBuilder()
|
||||
.withUrl(url,
|
||||
{
|
||||
|
||||
accessTokenFactory: async () => {
|
||||
if (authStore.isTokenExpired) {
|
||||
const res = await authService.refresh(authStore.refreshToken)
|
||||
authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo)
|
||||
}
|
||||
return authStore.token;
|
||||
}
|
||||
})
|
||||
.withAutomaticReconnect()
|
||||
.build();
|
||||
this.registerHandlers();
|
||||
try {
|
||||
await this.connection.start();
|
||||
this.isConnected = true;
|
||||
signalRConnectionEventHandler();
|
||||
console.log('SignalR建立通信成功！')
|
||||
} catch (e) {
|
||||
message.error('与服务器建立通信失败，请检查网络连接...');
|
||||
}
|
||||
},
|
||||
registerHandlers() {
|
||||
|
||||
|
||||
this.connection.on('ReceiveMessage', (msg) => {
|
||||
console.log(msg)
|
||||
SignalRMessageHandler(msg)
|
||||
});
|
||||
|
||||
this.connection.onclose(() => {
|
||||
this.isConnected = false;
|
||||
});
|
||||
this.connection.onreconnected(() => {
|
||||
this.isConnected = true;
|
||||
signalRConnectionEventHandler();
|
||||
});
|
||||
|
||||
},
|
||||
/**
|
||||
* 通过signalr发送消息
|
||||
* @param {*} msg
|
||||
* @returns
|
||||
*/
|
||||
async sendMsg(msg) {
|
||||
const message = useMessage()
|
||||
const chatStore = useChatStore()
|
||||
if (!this.isConnected) {
|
||||
message.error('与服务器连接中断，请重连后尝试...');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 后端 Hub 定义的方法名通常为 SendMessage
|
||||
// 参数顺序需要与后端 ChatHub 中的方法签名一致
|
||||
if (msg.msgId == null) {
|
||||
msg.msgId = self.crypto.randomUUID();
|
||||
}
|
||||
const sessionId = generateSessionId(msg.senderId, msg.receiverId);
|
||||
this.connection.invoke("SendMessage", msg).then(() => {
|
||||
const msga = chatStore.messages.find(x => x.msgId == msg.msgId)
|
||||
if (msga.isLoading) {
|
||||
msga.isLoading = false;
|
||||
}
|
||||
})
|
||||
;
|
||||
chatStore.addMessage({ ...msg, isLoading: true }, sessionId);
|
||||
messageHandler(msg);
|
||||
console.log("消息发送成功!");
|
||||
} catch (err) {
|
||||
console.error("消息发送失败:", err);
|
||||
message.error("消息发送失败");
|
||||
}
|
||||
},
|
||||
async clearUnreadCount(conversationId) {
|
||||
await this.connection.invoke("ClearUnreadCount", conversationId)
|
||||
}
|
||||
}
|
||||
})
|
||||
10
frontend/pc/IM/src/renderer/src/utils/codeHelper.js
Normal file
10
frontend/pc/IM/src/renderer/src/utils/codeHelper.js
Normal file
@ -0,0 +1,10 @@
|
||||
export function getChatCodeStr(code) {
|
||||
switch (code) {
|
||||
case 0:
|
||||
return '私聊'
|
||||
case 1:
|
||||
return '群聊'
|
||||
default:
|
||||
return '未知类型'
|
||||
}
|
||||
}
|
||||
13
frontend/pc/IM/src/renderer/src/utils/dateTool.js
Normal file
13
frontend/pc/IM/src/renderer/src/utils/dateTool.js
Normal file
@ -0,0 +1,13 @@
|
||||
export const GetLocalIso = (date) => {
|
||||
// 考虑到时区偏差，手动构造符合 C# 要求的本地 ISO 字符串
|
||||
const offset = -date.getTimezoneOffset();
|
||||
const diff = offset >= 0 ? '+' : '-';
|
||||
const pad = (num) => String(num).padStart(2, '0');
|
||||
|
||||
return date.getFullYear() +
|
||||
'-' + pad(date.getMonth() + 1) +
|
||||
'-' + pad(date.getDate()) +
|
||||
'T' + pad(date.getHours()) +
|
||||
':' + pad(date.getMinutes()) +
|
||||
':' + pad(date.getSeconds());
|
||||
}
|
||||
29
frontend/pc/IM/src/renderer/src/utils/db/baseDb.js
Normal file
29
frontend/pc/IM/src/renderer/src/utils/db/baseDb.js
Normal file
@ -0,0 +1,29 @@
|
||||
import { openDB } from "idb";
|
||||
|
||||
const DBNAME = 'IM_DB';
|
||||
const STORE_NAME = 'messages';
|
||||
const CONVERSARION_STORE_NAME = 'conversations';
|
||||
const CONTACT_STORE_NAME = 'contacts';
|
||||
|
||||
export const dbPromise = openDB(DBNAME, 7, {
|
||||
upgrade(db) {
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
const store = db.createObjectStore(STORE_NAME, { keyPath: 'msgId' });
|
||||
store.createIndex('by-sessionId', 'sessionId');
|
||||
store.createIndex('by-time', 'timeStamp');
|
||||
store.createIndex('by-sequenceId', 'sequenceId');
|
||||
store.createIndex('by-session-sequenceId', ['sessionId', 'sequenceId']);
|
||||
|
||||
}
|
||||
if (!db.objectStoreNames.contains(CONVERSARION_STORE_NAME)) {
|
||||
const store = db.createObjectStore(CONVERSARION_STORE_NAME, { keyPath: 'id' });
|
||||
store.createIndex('by-id', 'id');
|
||||
}
|
||||
if (!db.objectStoreNames.contains(CONTACT_STORE_NAME)) {
|
||||
const store = db.createObjectStore(CONTACT_STORE_NAME, { keyPath: 'id' });
|
||||
store.createIndex('by-id', 'id');
|
||||
store.createIndex('by-username', 'username');
|
||||
store.createIndex('by-friendId', 'friendId', { unique: true });
|
||||
}
|
||||
}
|
||||
})
|
||||
18
frontend/pc/IM/src/renderer/src/utils/db/contactDB.js
Normal file
18
frontend/pc/IM/src/renderer/src/utils/db/contactDB.js
Normal file
@ -0,0 +1,18 @@
|
||||
import { dbPromise } from "./baseDb"
|
||||
|
||||
const STORE_NAME = 'contacts';
|
||||
|
||||
export const contactDb = {
|
||||
async save(contact) {
|
||||
(await dbPromise).put(STORE_NAME, contact);
|
||||
},
|
||||
async getById(id) {
|
||||
return (await dbPromise).getFromIndex(STORE_NAME, 'by-id', id);
|
||||
},
|
||||
async getByUsername(username) {
|
||||
return (await dbPromise).getFromIndex(STORE_NAME, 'by-username', username);
|
||||
},
|
||||
async getAll() {
|
||||
return (await dbPromise).getAll(STORE_NAME);
|
||||
}
|
||||
}
|
||||
18
frontend/pc/IM/src/renderer/src/utils/db/conversationDB.js
Normal file
18
frontend/pc/IM/src/renderer/src/utils/db/conversationDB.js
Normal file
@ -0,0 +1,18 @@
|
||||
import { dbPromise } from "./baseDb";
|
||||
|
||||
const STORE_NAME = 'conversations';
|
||||
|
||||
export const conversationDb = {
|
||||
async save(conversation) {
|
||||
(await dbPromise).put(STORE_NAME, conversation);
|
||||
},
|
||||
async getById(id) {
|
||||
return (await dbPromise).getFromIndex(STORE_NAME, 'by-id', id);
|
||||
},
|
||||
async getAll() {
|
||||
return (await dbPromise).getAll(STORE_NAME);
|
||||
},
|
||||
async clearAll() {
|
||||
(await dbPromise).clear(STORE_NAME);
|
||||
}
|
||||
}
|
||||
64
frontend/pc/IM/src/renderer/src/utils/db/messageDB.js
Normal file
64
frontend/pc/IM/src/renderer/src/utils/db/messageDB.js
Normal file
@ -0,0 +1,64 @@
|
||||
import { dbPromise } from "./baseDb";
|
||||
|
||||
const STORE_NAME = 'messages';
|
||||
|
||||
export const messagesDb = {
|
||||
async save(msg) {
|
||||
return (await dbPromise).put(STORE_NAME, msg);
|
||||
},
|
||||
async getBySession(sessionId) {
|
||||
return (await dbPromise).getAllFromIndex(STORE_NAME, 'by-sessionId', sessionId);
|
||||
},
|
||||
async clearAll() {
|
||||
return (await dbPromise).clear(STORE_NAME);
|
||||
},
|
||||
async getPageMessages(sessionId, beforeSequenceId, limit = 20) {
|
||||
const db = await dbPromise;
|
||||
const tx = db.transaction(STORE_NAME, 'readonly');
|
||||
const index = tx.store.index('by-session-sequenceId'); // 使用复合索引
|
||||
|
||||
// 定义范围：从 [sessionId, 最早时间] 到 [sessionId, beforeTimeStamp)
|
||||
// 注意：IDBKeyRange.bound([sessionId, ""], [sessionId, beforeTimeStamp], false, true)
|
||||
// 或者简单使用 upperbound 限制最大值
|
||||
const range = IDBKeyRange.upperBound([sessionId, beforeSequenceId], true);
|
||||
|
||||
// 'prev' 表示从最新的往回找（倒序）
|
||||
let cursor = await index.openCursor(range, 'prev');
|
||||
const results = [];
|
||||
|
||||
while (cursor && results.length < limit) {
|
||||
// 关键安全检查：因为 upperBound 可能会越界捞到其他 sessionId 的数据
|
||||
//（复合索引的特性决定了 sessionId 不一致的数据会排在后面）
|
||||
if (cursor.value.sessionId !== sessionId) break;
|
||||
|
||||
results.unshift(cursor.value); // 放入结果集开头，保证返回的是时间升序
|
||||
cursor = await cursor.continue();
|
||||
}
|
||||
|
||||
return results;
|
||||
},
|
||||
async getLatestMessages(sessionId, limit) {
|
||||
const db = await dbPromise;
|
||||
const tx = db.transaction(STORE_NAME, 'readonly');
|
||||
const index = tx.store.index('by-session-sequenceId');
|
||||
|
||||
// 关键点：范围只限定 sessionId，不限 sequenceId 的上限
|
||||
// 复合索引中，[sessionId, []] 到 [sessionId, [Infinity]] 会覆盖该 session 下所有数据
|
||||
const range = IDBKeyRange.bound([sessionId, 0], [sessionId, Infinity]);
|
||||
|
||||
// 使用 'prev' 游标，从最大的 sequenceId 开始往前找
|
||||
let cursor = await index.openCursor(range, 'prev');
|
||||
const results = [];
|
||||
|
||||
while (cursor && results.length < limit) {
|
||||
// 虽然有 bound 约束，但为了防御性编程，依然建议检查 sessionId
|
||||
if (cursor.value.sessionId !== sessionId) break;
|
||||
|
||||
results.push(cursor.value);
|
||||
cursor = await cursor.continue();
|
||||
}
|
||||
|
||||
// 因为是倒序捞出来的（20, 19, 18...），最后要反转一下变成升序给界面渲染
|
||||
return results.reverse();
|
||||
}
|
||||
}
|
||||
9
frontend/pc/IM/src/renderer/src/utils/electronHelper.js
Normal file
9
frontend/pc/IM/src/renderer/src/utils/electronHelper.js
Normal file
@ -0,0 +1,9 @@
|
||||
export const isElectron = () => {
|
||||
// 1. 检查是否存在 process 对象且其版本包含 electron
|
||||
const hasProcess = typeof process !== 'undefined' && process.versions && !!process.versions.electron;
|
||||
|
||||
// 2. 检查 User Agent（最保险，防止 process 被某些构建工具 mock 掉）
|
||||
const hasUserAgent = typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0;
|
||||
|
||||
return hasProcess || hasUserAgent;
|
||||
};
|
||||
18
frontend/pc/IM/src/renderer/src/utils/formatDate.js
Normal file
18
frontend/pc/IM/src/renderer/src/utils/formatDate.js
Normal file
@ -0,0 +1,18 @@
|
||||
export function formatDate(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
const nowDate = new Date();
|
||||
if (year == nowDate.getFullYear() && month == String(nowDate.getMonth() + 1).padStart(2, '0') && day == String(nowDate.getDate()).padStart(2, '0')) {
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
if (year == nowDate.getFullYear()) {
|
||||
return `${month}/${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
119
frontend/pc/IM/src/renderer/src/utils/imageTools.js
Normal file
119
frontend/pc/IM/src/renderer/src/utils/imageTools.js
Normal file
@ -0,0 +1,119 @@
|
||||
export const loadImage = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img); // 成功时返回 img 对象
|
||||
img.onerror = (err) => reject(err); // 失败时报错
|
||||
img.src = url;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 生成图片缩略图 (返回 Blob 文件)
|
||||
*/
|
||||
export function generateImageThumbnailBlob(img, maxWidth = 200) {
|
||||
return new Promise((resolve) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const scale = maxWidth / img.width;
|
||||
canvas.width = maxWidth;
|
||||
canvas.height = img.height * scale;
|
||||
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 关键：导出为 Blob
|
||||
canvas.toBlob((blob) => {
|
||||
resolve(blob);
|
||||
}, 'image/jpeg', 0.8);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取视频缩略图 (返回 Blob 文件)
|
||||
* 报错或无法渲染画面时自动生成全黑占位图
|
||||
*/
|
||||
export function getVideoThumbnailBlob(file, seekTime = 1) {
|
||||
return new Promise((resolve) => {
|
||||
const video = document.createElement('video');
|
||||
const url = URL.createObjectURL(file);
|
||||
video.muted = true;
|
||||
video.src = url;
|
||||
|
||||
// 统一定义一个生成黑色背景的方法
|
||||
const resolveBlackThumbnail = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
// 如果视频元数据拿不到宽高，给一个默认的 16:9 尺寸
|
||||
canvas.width = video.videoWidth || 320;
|
||||
canvas.height = video.videoHeight || 180;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#000000'; // 全黑
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(blob);
|
||||
}, 'image/jpeg', 0.8);
|
||||
};
|
||||
|
||||
video.onloadedmetadata = () => {
|
||||
// 检查：如果元数据加载了但没有画面尺寸（只有音频的视频常现）
|
||||
if (video.videoWidth === 0) {
|
||||
resolveBlackThumbnail();
|
||||
} else {
|
||||
video.currentTime = seekTime;
|
||||
}
|
||||
};
|
||||
|
||||
video.onseeked = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 尝试绘制，如果解码失败这里可能抛出异常
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
URL.revokeObjectURL(url);
|
||||
// 如果导出的 blob 大小极小（可能是空的），可以在这里进一步检查
|
||||
resolve(blob);
|
||||
}, 'image/jpeg', 0.8);
|
||||
} catch (e) {
|
||||
resolveBlackThumbnail();
|
||||
}
|
||||
};
|
||||
|
||||
// 报错处理：不再 reject，而是给一张黑图
|
||||
video.onerror = () => {
|
||||
console.warn("视频封面截取失败，已生成全黑占位图");
|
||||
resolveBlackThumbnail();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取视频时长
|
||||
* @param {File} file - 视频文件对象
|
||||
* @returns {Promise<number>} - 返回秒数 (float)
|
||||
*/
|
||||
export function getVideoDuration(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const video = document.createElement('video');
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
video.preload = 'metadata'; // 关键：只加载元数据
|
||||
video.src = url;
|
||||
|
||||
// 当元数据加载完成后触发
|
||||
video.onloadedmetadata = () => {
|
||||
const duration = video.duration;
|
||||
URL.revokeObjectURL(url); // 释放内存
|
||||
resolve(duration);
|
||||
};
|
||||
|
||||
video.onerror = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
reject("无法解析视频元数据");
|
||||
};
|
||||
});
|
||||
}
|
||||
14
frontend/pc/IM/src/renderer/src/utils/sessionIdTools.js
Normal file
14
frontend/pc/IM/src/renderer/src/utils/sessionIdTools.js
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 生成唯一的会话 ID (私聊)
|
||||
* @param {string|number} id1 用户A的ID
|
||||
* @param {string|number} id2 用户B的ID
|
||||
*/
|
||||
export const generateSessionId = (id1, id2, isGroup = false) => {
|
||||
// 1. 转换为字符串并放入数组
|
||||
// 2. 排序（确保顺序一致性）
|
||||
// 3. 用下划线或其他分隔符拼接
|
||||
if (isGroup) {
|
||||
return `g:${id2}`;
|
||||
}
|
||||
return [String(id1), String(id2)].sort().join('_');
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
import { useBrowserNotification } from "@/services/useBrowserNotification";
|
||||
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
|
||||
import { messageHandler } from "@/handler/messageHandler";
|
||||
import { generateSessionId } from "../sessionIdTools";
|
||||
import { useConversationStore } from "@/stores/conversation";
|
||||
import { MESSAGE_TYPE } from "@/constants/MessageType";
|
||||
|
||||
export const SignalRMessageHandler = (data) => {
|
||||
const msg = data.data;
|
||||
const chatStore = useChatStore()
|
||||
const browserNotification = useBrowserNotification();
|
||||
const sessionId = generateSessionId(msg.senderId, msg.receiverId, msg.chatType == MESSAGE_TYPE.GROUP);
|
||||
messageHandler(msg);
|
||||
chatStore.pushAndSortMessagesAsync([msg], sessionId);
|
||||
const conversation = useConversationStore().conversations.find(x => x.targetId == msg.senderId);
|
||||
browserNotification.send(`${conversation.targetName}发来一条消息`, {
|
||||
body: msg.content,
|
||||
icon: conversation.targetAvatar
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { useConversationStore } from "@/stores/conversation"
|
||||
|
||||
export const signalRConnectionEventHandler = () => {
|
||||
const conversationStore = useConversationStore();
|
||||
conversationStore.fetchConversationsFromServier().then(res => {
|
||||
conversationStore.conversations.forEach(element => {
|
||||
element.isInitialized = false;
|
||||
});
|
||||
})
|
||||
}
|
||||
55
frontend/pc/IM/src/renderer/src/utils/uploadTools.js
Normal file
55
frontend/pc/IM/src/renderer/src/utils/uploadTools.js
Normal file
@ -0,0 +1,55 @@
|
||||
import SparkMD5 from "spark-md5";
|
||||
|
||||
export const getFileHash = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
|
||||
const chunkSize = 2 * 1024 * 1024; // 每次读取 2MB
|
||||
const chunks = Math.ceil(file.size / chunkSize);
|
||||
let currentChunk = 0;
|
||||
const spark = new SparkMD5.ArrayBuffer();
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = (e) => {
|
||||
spark.append(e.target.result); // 将二进制数据添加到计算器
|
||||
currentChunk++;
|
||||
|
||||
if (currentChunk < chunks) {
|
||||
loadNext();
|
||||
} else {
|
||||
resolve(spark.end()); // 完成计算，返回最终结果
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.onerror = () => {
|
||||
reject('文件读取出错');
|
||||
};
|
||||
|
||||
function loadNext() {
|
||||
const start = currentChunk * chunkSize;
|
||||
const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
|
||||
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
|
||||
}
|
||||
|
||||
loadNext();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件分片
|
||||
* @param {*} file 文件
|
||||
* @param {*} chunkSize 分片大小
|
||||
* @returns
|
||||
*/
|
||||
export const sliceFile = (file, chunkSize) => {
|
||||
const chuncks = [];
|
||||
let index = 0;
|
||||
|
||||
while (index < file.size) {
|
||||
chuncks.push(file.slice(index, index + chunkSize));
|
||||
index += chunkSize;
|
||||
}
|
||||
|
||||
return chuncks;
|
||||
}
|
||||
|
||||
|
||||
258
frontend/pc/IM/src/renderer/src/views/Main.vue
Normal file
258
frontend/pc/IM/src/renderer/src/views/Main.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="im-container">
|
||||
<nav class="nav-sidebar">
|
||||
<div class="user-self">
|
||||
<img :src="myInfo?.avatar ?? defaultAvatar" class="avatar-std" />
|
||||
</div>
|
||||
<router-link class="nav-item" to="/messages" active-class="active">
|
||||
<i class="menuIcon" v-html="feather.icons['message-square'].toSvg()"></i>
|
||||
</router-link>
|
||||
<router-link class="nav-item" to="/contacts" active-class="active">
|
||||
<i class="menuIcon" v-html="feather.icons['user'].toSvg()"></i>
|
||||
</router-link>
|
||||
<router-link class="nav-item" to="/settings" active-class="active">
|
||||
<i class="menuIcon" v-html="feather.icons['settings'].toSvg()"></i>
|
||||
</router-link>
|
||||
</nav>
|
||||
<router-view @start-chat="handleStartChat"></router-view>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import defaultAvatar from '@/assets/default_avatar.png'
|
||||
import { useRouter } from 'vue-router';
|
||||
import feather from 'feather-icons';
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const myInfo = authStore.userInfo;
|
||||
|
||||
// 监听用户信息变化（如头像更新）
|
||||
watch(() => authStore.userInfo, (newInfo) => {
|
||||
myInfo.value = newInfo;
|
||||
});
|
||||
|
||||
function handleStartChat(contact) {
|
||||
if (contact && contact.id) {
|
||||
// 导航到消息页面并传递联系人 ID
|
||||
router.push(`/messages/chat/${contact.id}`);
|
||||
} else {
|
||||
console.error('Invalid contact object:', contact);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 1. 基础容器：锁定宽高，禁止抖动 */
|
||||
.im-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 48px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-sidebar {
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
background: #e9e9e9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
gap: 24px;
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
background-color: #e9e9e9;
|
||||
color: black;
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.user-self { margin-bottom: 10px;/* 允许拖动整个窗口 */
|
||||
-webkit-app-region:no-drag; }
|
||||
|
||||
/* 2. 列表区修复 */
|
||||
.list-panel {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 修复：搜索框美化 */
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #dbdbdb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 5px;
|
||||
}
|
||||
.search-icon { font-size: 12px; color: #666; }
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-area { flex: 1; overflow-y: auto; }
|
||||
|
||||
/* 3. 聊天主面板修复 */
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* 修复：本人消息右侧对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 别人发的：默认靠左 */
|
||||
.msg.other { flex-direction: row; }
|
||||
|
||||
/* 本人发的：翻转排列方向，靠右显示 */
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* 修复：本人消息文字和时间戳也需要右对齐 */
|
||||
.msg.mine .msg-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 9px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.other .bubble { background: #fff; color: #333; }
|
||||
.mine .bubble { background: #95ec69; color: #000; }
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 头像样式统一 */
|
||||
.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
||||
.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
/* 未读气泡 */
|
||||
.avatar-container { position: relative; }
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
/* 输入框区域修复 */
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
|
||||
.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.send-row { display: flex; justify-content: flex-end; }
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.send-btn:hover { background: #e2e2e2; }
|
||||
|
||||
/* 列表美化 */
|
||||
.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
.list-item:hover:not(.active) { background: #ddd; }
|
||||
.info { flex: 1; overflow: hidden; }
|
||||
.name-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.name { font-size: 14px; font-weight: 500; }
|
||||
.time { font-size: 11px; color: #999; }
|
||||
.last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; background-color: #fff; border-radius: 5px; text-decoration: none;}
|
||||
.nav-item.active { opacity: 1; }
|
||||
</style>
|
||||
222
frontend/pc/IM/src/renderer/src/views/Test.vue
Normal file
222
frontend/pc/IM/src/renderer/src/views/Test.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div v-if="true" class="modal-mask" @click.self="close">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h2>添加好友</h2>
|
||||
<button class="icon-close" @click="close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="file"
|
||||
placeholder="搜索 ID / 手机号"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { uploadFile } from '@/services/upload/uploader';
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 接收父组件的 v-model 用于控制显示隐藏
|
||||
const props = defineProps(['modelValue']);
|
||||
const emit = defineEmits(['update:modelValue', 'add-friend']);
|
||||
|
||||
const keyword = ref('');
|
||||
const loading = ref(false);
|
||||
const userResult = ref(null);
|
||||
const hasSearched = ref(false);
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
// 关闭时重置状态
|
||||
userResult.value = null;
|
||||
hasSearched.value = false;
|
||||
keyword.value = '';
|
||||
};
|
||||
|
||||
const onSearch = async () => {
|
||||
if (!keyword.value) return;
|
||||
|
||||
loading.value = true;
|
||||
hasSearched.value = false;
|
||||
|
||||
// 模拟 API 请求延时
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
hasSearched.value = true;
|
||||
|
||||
// 模拟搜索结果
|
||||
if (keyword.value === '12345') {
|
||||
userResult.value = {
|
||||
userId: '12345',
|
||||
nickname: '极简猫',
|
||||
avatar: 'https://api.dicebear.com/7.x/beta/svg?seed=Felix'
|
||||
};
|
||||
} else {
|
||||
userResult.value = null;
|
||||
}
|
||||
}, 600);
|
||||
};
|
||||
|
||||
|
||||
const handleFileChange = async (event) => {
|
||||
const file = event.target.files[0];
|
||||
uploadFile(file, {
|
||||
onProgress: (p) => {
|
||||
console.log(`当前进度：${p}%`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
emit('add-friend', userResult.value);
|
||||
// 通常这里会显示“已发送请求”提示
|
||||
close();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 遮罩层 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.modal-container {
|
||||
background: #ffffff;
|
||||
width: 360px;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
background: #f5f5f7;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #007aff; /* 经典的克莱因蓝/苹果蓝 */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 用户卡片 */
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.add-action-btn {
|
||||
width: 100%;
|
||||
background: #f0f7ff;
|
||||
color: #007aff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-action-btn:hover {
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.fade-slide-enter-active, .fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.fade-slide-enter-from, .fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
</style>
|
||||
329
frontend/pc/IM/src/renderer/src/views/auth/Login.vue
Normal file
329
frontend/pc/IM/src/renderer/src/views/auth/Login.vue
Normal file
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<div class="login-layout">
|
||||
|
||||
<div class="login-card">
|
||||
<div class="side-visual">
|
||||
<div class="brand-container">
|
||||
<h1 class="hero-title">Work<br>Together.</h1>
|
||||
<p class="hero-subtitle">下一代企业级即时通讯平台，让沟通无距离。</p>
|
||||
</div>
|
||||
<div class="visual-footer">
|
||||
<span>© 2025 IM System</span>
|
||||
<div class="dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-form">
|
||||
<div class="form-wrapper">
|
||||
<div class="welcome-header">
|
||||
<h2>账号登录</h2>
|
||||
<p>请输入您的工作账号以继续</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin">
|
||||
<IconInput class="input"
|
||||
placeholder="请输入用户名" lab="用户名 / 邮箱" type="text" icon-name="user" v-model="form.username"/>
|
||||
|
||||
<IconInput class="input"
|
||||
placeholder="请输入密码" lab="密码" type="password" icon-name="lock" v-model="form.password"/>
|
||||
|
||||
<div class="login-btn-wrapper">
|
||||
<MyButton variant="pill" class="login-btn" :loading="loading">
|
||||
登录
|
||||
</MyButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="register-hint">
|
||||
还没有账号? <router-link to="/auth/register">立即注册</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { useMessage } from '@/components/messages/useAlert'
|
||||
import { authService } from '@/services/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import feather from 'feather-icons'
|
||||
import IconInput from '@/components/IconInput.vue'
|
||||
import MyButton from '@/components/MyButton.vue'
|
||||
import { required, maxLength, helpers } from '@vuelidate/validators'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useSignalRStore } from '@/stores/signalr'
|
||||
|
||||
const message = useMessage();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
|
||||
const loading = ref(false)
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
username:{
|
||||
required:helpers.withMessage('用户名不能为空', required),
|
||||
maxLength:helpers.withMessage('用户名最大20字符', maxLength(20))
|
||||
},
|
||||
password:{
|
||||
required:helpers.withMessage('密码不能为空', required),
|
||||
maxLength:helpers.withMessage('密码最大50字符', maxLength(50))
|
||||
}
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(rules,form);
|
||||
|
||||
const handleLogin = async () => {
|
||||
const isFormCorrect = await v$.value.$validate()
|
||||
if (!isFormCorrect) {
|
||||
if (v$.value.$errors.length > 0) {
|
||||
message.error(v$.value.$errors[0].$message)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
try{
|
||||
loading.value = true;
|
||||
const res = await authService.login(form);
|
||||
if(res.code === 0){ // Assuming 0 is success
|
||||
message.success('登录成功')
|
||||
authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo);
|
||||
signalRStore.initSignalR();
|
||||
router.push('/messages')
|
||||
}else{
|
||||
message.error(res.message || '登录失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally{
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
feather.replace()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Soft Mesh Gradient Background */
|
||||
.login-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-color: #f8fafc;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, hsla(190, 100%, 95%, 1) 0, transparent 50%),
|
||||
radial-gradient(at 50% 0%, hsla(160, 100%, 96%, 1) 0, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(210, 100%, 96%, 1) 0, transparent 50%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Very subtle grid overlay */
|
||||
.login-layout::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
backdrop-filter: blur(30px);
|
||||
border-radius: 32px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgba(0, 0, 0, 0.02),
|
||||
0 40px 100px -20px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.side-visual {
|
||||
flex: 1;
|
||||
/* Soft connectivity gradient */
|
||||
background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Abstract "Connection" Circles */
|
||||
.side-visual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20%; left: -20%;
|
||||
width: 400px; height: 400px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
.side-visual::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10%; right: -10%;
|
||||
width: 300px; height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
opacity: 0.95;
|
||||
line-height: 1.6;
|
||||
max-width: 340px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.visual-footer {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dots span {
|
||||
display: inline-block;
|
||||
width: 6px; height: 6px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
margin-left: 6px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.side-form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-header h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.welcome-header p {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
|
||||
.register-hint {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.register-hint a {
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.register-hint a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Response Design */
|
||||
@media (max-width: 960px) {
|
||||
.login-card {
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 20px;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.side-visual {
|
||||
padding: 30px;
|
||||
min-height: 160px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.hero-title { font-size: 28px; }
|
||||
.hero-subtitle, .visual-footer { display: none; }
|
||||
.side-form { padding: 40px 20px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
background-color: #f0f4f8; /* Fallback */
|
||||
}
|
||||
</style>
|
||||
355
frontend/pc/IM/src/renderer/src/views/auth/Register.vue
Normal file
355
frontend/pc/IM/src/renderer/src/views/auth/Register.vue
Normal file
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="login-layout">
|
||||
<div class="login-card">
|
||||
<div class="side-visual">
|
||||
<div class="brand-container">
|
||||
<h1 class="hero-title">Join<br>Us.</h1>
|
||||
<p class="hero-subtitle">创建一个新账号，开启您的沟通之旅。</p>
|
||||
</div>
|
||||
<div class="visual-footer">
|
||||
<span>© 2025 IM System</span>
|
||||
<div class="dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-form">
|
||||
<div class="form-wrapper">
|
||||
<div class="welcome-header">
|
||||
<h2>注册账号</h2>
|
||||
<p>请填写以下信息以完成注册</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleRegister">
|
||||
<IconInput class="input"
|
||||
placeholder="请输入用户名" lab="用户名" type="text" icon-name="user" v-model="form.username"/>
|
||||
|
||||
<IconInput class="input"
|
||||
placeholder="请输入昵称" lab="昵称" type="text" icon-name="smile" v-model="form.nickname"/>
|
||||
|
||||
<IconInput class="input"
|
||||
placeholder="请输入密码" lab="密码" type="password" icon-name="lock" v-model="form.password"/>
|
||||
|
||||
<IconInput class="input"
|
||||
placeholder="再次输入密码" lab="确认密码" type="password" icon-name="check-circle" v-model="form.confirmPassword"/>
|
||||
|
||||
<div class="login-btn-wrapper">
|
||||
<MyButton variant="pill-green" class="login-btn" :loading="loading">
|
||||
立即注册
|
||||
</MyButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="register-hint">
|
||||
已有账号? <router-link to="/auth/login">直接登录</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { useMessage } from '@/components/messages/useAlert'
|
||||
import { authService } from '@/services/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import feather from 'feather-icons'
|
||||
import IconInput from '@/components/IconInput.vue'
|
||||
import MyButton from '@/components/MyButton.vue'
|
||||
import { required, maxLength, minLength, sameAs, helpers } from '@vuelidate/validators'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
|
||||
const message = useMessage();
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false)
|
||||
const form = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
username:{
|
||||
required:helpers.withMessage('用户名不能为空', required),
|
||||
maxLength:helpers.withMessage('用户名最大20字符', maxLength(20)),
|
||||
minLength:helpers.withMessage('用户名至少3字符', minLength(3))
|
||||
},
|
||||
nickname: {
|
||||
required: helpers.withMessage('昵称不能为空', required),
|
||||
maxLength: helpers.withMessage('昵称最大20字符', maxLength(20))
|
||||
},
|
||||
password:{
|
||||
required:helpers.withMessage('密码不能为空', required),
|
||||
minLength:helpers.withMessage('密码至少6字符', minLength(6)),
|
||||
maxLength:helpers.withMessage('密码最大50字符', maxLength(50))
|
||||
},
|
||||
confirmPassword: {
|
||||
required: helpers.withMessage('请确认密码', required),
|
||||
sameAs: helpers.withMessage('两次输入的密码不一致', sameAs(ref(form).password)) // This might fail if using reactive directly without computed ref binding for sameAs. Let's fix sameAs usage.
|
||||
// Actually sameAs(form.password) won't work reactively in Vuelidate 2 sometimes if not ref.
|
||||
// Just utilize a simpler computed or validator.
|
||||
}
|
||||
};
|
||||
|
||||
// Vuelidate sameAs expects a generic or a ref.
|
||||
// Let's use computed for the target or just fix the rule.
|
||||
// In composition API, use computed(() => form.password)
|
||||
const rulesWithComputed = {
|
||||
...rules,
|
||||
confirmPassword: {
|
||||
required: helpers.withMessage('请确认密码', required),
|
||||
sameAs: helpers.withMessage('两次输入的密码不一致', sameAs(ref(form).value?.password || form.password)) // Trickier with reactive.
|
||||
}
|
||||
}
|
||||
// Actually, standard way:
|
||||
// const rules = computed(() => ({ ... }))
|
||||
|
||||
const v$ = useVuelidate(rules, form); // Vuelidate supports reactive object directly.
|
||||
// The problem is `sameAs` needs a locator.
|
||||
// Correct usage: sameAs(computed(() => form.password))
|
||||
|
||||
const handleRegister = async () => {
|
||||
// Manual check for confirm password if Vuelidate sameAs is tricky without computed rules
|
||||
if (form.password !== form.confirmPassword) {
|
||||
message.error('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
const isFormCorrect = await v$.value.$validate()
|
||||
if (!isFormCorrect) {
|
||||
if (v$.value.$errors.length > 0) {
|
||||
// Skip confirmPassword error if we manually checked it or if it's the only one
|
||||
message.error(v$.value.$errors[0].$message)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
try{
|
||||
loading.value = true;
|
||||
// Prepare data (exclude confirmPassword)
|
||||
const { confirmPassword, ...registerData } = form;
|
||||
|
||||
const res = await authService.register(registerData);
|
||||
if(res.code === 0){
|
||||
message.success('注册成功，请登录')
|
||||
router.push('/auth/login')
|
||||
}else{
|
||||
message.error(res.message || '注册失败')
|
||||
}
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
message.error('注册请求异常');
|
||||
} finally{
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
feather.replace()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Green Soft Mesh Gradient Background */
|
||||
.login-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-color: #f0fdf4; /* Very light green fallback */
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, hsla(150, 100%, 95%, 1) 0, transparent 50%),
|
||||
radial-gradient(at 50% 0%, hsla(165, 100%, 96%, 1) 0, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(140, 100%, 96%, 1) 0, transparent 50%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Very subtle grid overlay */
|
||||
.login-layout::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
backdrop-filter: blur(30px);
|
||||
border-radius: 32px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgba(0, 0, 0, 0.02),
|
||||
0 40px 100px -20px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.side-visual {
|
||||
flex: 1;
|
||||
/* Green connectivity gradient */
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Abstract Decorations */
|
||||
.side-visual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20%; left: -20%;
|
||||
width: 400px; height: 400px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
.side-visual::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10%; right: -10%;
|
||||
width: 300px; height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
opacity: 0.95;
|
||||
line-height: 1.6;
|
||||
max-width: 340px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.visual-footer {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dots span {
|
||||
display: inline-block;
|
||||
width: 6px; height: 6px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
margin-left: 6px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.side-form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-header h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.welcome-header p {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.login-btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.register-hint {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.register-hint a {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.register-hint a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 960px) {
|
||||
.login-card {
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 20px;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.side-visual {
|
||||
padding: 30px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.hero-title { font-size: 28px; }
|
||||
.hero-subtitle, .visual-footer { display: none; }
|
||||
.side-form { padding: 40px 20px; }
|
||||
}
|
||||
</style>
|
||||
153
frontend/pc/IM/src/renderer/src/views/contact/ContactDefault.vue
Normal file
153
frontend/pc/IM/src/renderer/src/views/contact/ContactDefault.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import WindowControls from '../../components/WindowControls.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="empty-contact">
|
||||
<WindowControls/>
|
||||
<main class="profile-main">
|
||||
<div class="empty-state">
|
||||
<div class="empty-logo">👤</div>
|
||||
<p>请在左侧选择联系人查看详情</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#empty-contact {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
/* --- 右侧名片区 --- */
|
||||
.profile-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
width: 420px;
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gender-tag { font-size: 16px; }
|
||||
.gender-tag.m { color: #1890ff; }
|
||||
.gender-tag.f { color: #ff4d4f; }
|
||||
|
||||
.sub-text {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.big-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-row .label {
|
||||
width: 80px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-row .value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-ghost:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-logo {
|
||||
font-size: 80px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
/* 4. 定义组件进场和退场的动画 */
|
||||
.fade-scale-enter-active,
|
||||
.fade-scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-scale-enter-from,
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(10px);
|
||||
}
|
||||
</style>
|
||||
240
frontend/pc/IM/src/renderer/src/views/contact/ContactList.vue
Normal file
240
frontend/pc/IM/src/renderer/src/views/contact/ContactList.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="contact-container">
|
||||
<aside class="contact-list-panel">
|
||||
<div class="search-section">
|
||||
<div class="search-box">
|
||||
<span class="search-icon"><i v-html="feather.icons['search'].toSvg({width:15,height:15})"></i></span>
|
||||
<input v-model="searchQuery" placeholder="搜索联系人" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-area">
|
||||
<div class="fixed-entries">
|
||||
<RouterLink class="list-item mini" to="/contacts/requests">
|
||||
<div class="icon-box orange" v-html="feather.icons['user-plus'].toSvg()"></div>
|
||||
<div class="name">新的朋友</div>
|
||||
</RouterLink>
|
||||
<div class="list-item mini" @click="showGroupList">
|
||||
<div class="icon-box green" v-html="feather.icons['users'].toSvg()"></div>
|
||||
<div class="name">群聊</div>
|
||||
</div>
|
||||
<div class="list-item mini">
|
||||
<div class="icon-box blue" v-html="feather.icons['tag'].toSvg()"></div>
|
||||
<div class="name">标签</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactTab">
|
||||
<button class="group-title" :class="{'group-title-active': contactTab === 0}" @click="contactTab = 0">我的好友</button>
|
||||
<button class="group-title" :class="{'group-title-active': contactTab === 1}" @click="contactTab = 1">群聊</button>
|
||||
</div>
|
||||
|
||||
<contactShow v-if="contactTab == 0" :contacts="filteredContacts"></contactShow>
|
||||
<groupsShow v-if="contactTab == 1" :groups="myGroups"></groupsShow>
|
||||
</div>
|
||||
</aside>
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
<Transition>
|
||||
<GroupChatModal
|
||||
v-if="groupModal"
|
||||
@close="groupModal = false"
|
||||
@select="handleChatSelect"
|
||||
/>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import GroupChatModal from '@/components/groups/GroupChatModal.vue'
|
||||
import feather from 'feather-icons';
|
||||
import { useContactStore } from '@/stores/contact';
|
||||
import { useRouter } from 'vue-router';
|
||||
import contactShow from '@/components/contacts/contactShow.vue';
|
||||
import groupsShow from '@/components/groups/groupsShow.vue';
|
||||
|
||||
|
||||
const searchQuery = ref('')
|
||||
const contactStore = useContactStore();
|
||||
|
||||
const groupModal = ref(false);
|
||||
const contactTab = ref(0);
|
||||
|
||||
const myGroups = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "产品设计交流群",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1",
|
||||
lastMessage: "那个UI设计的初稿已经发在群文件了，大家记得看下。",
|
||||
lastTime: "14:20",
|
||||
unread: 3,
|
||||
online: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "周五羽毛球小分队",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=2",
|
||||
lastMessage: "这周五晚上 8 点，老地方见！",
|
||||
lastTime: "昨天",
|
||||
unread: 0,
|
||||
online: false
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
const filteredContacts = computed(() => {
|
||||
const searchKey = searchQuery.value.toString().trim();
|
||||
if(!searchKey){
|
||||
return contactStore.contacts;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return contactStore.contacts.filter(c => {
|
||||
if (!c) return false
|
||||
|
||||
const remark = c.remarkName || ''
|
||||
const username = c.userInfo.username || ''
|
||||
|
||||
return remark.includes(searchKey) || username.includes(searchKey)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 发送事件给父组件（用于切换回聊天Tab并打开会话）
|
||||
const emit = defineEmits(['start-chat'])
|
||||
|
||||
const showGroupList = () => {
|
||||
groupModal.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await contactStore.loadContactList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-container {
|
||||
display: flex;
|
||||
width: 100%; /* 继承父组件的高度和宽度 */
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* --- 左侧列表栏 --- */
|
||||
.contact-list-panel {
|
||||
width: 250px;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #dbdbdb;
|
||||
padding: 5px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
width: 40%;
|
||||
padding: 5px 14px;
|
||||
font-size: 12px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.group-title:hover {
|
||||
color: #8e8e8e;
|
||||
}
|
||||
|
||||
.group-title-active {
|
||||
background-color: white;
|
||||
color: rgb(78, 78, 249);
|
||||
}
|
||||
|
||||
.fixed-entries {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.contactTab {
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
text-decoration: none; /* 去除下划线 */
|
||||
color: inherit; /* 继承父元素的文本颜色 */
|
||||
outline: none; /* 去除点击时的蓝框 */
|
||||
-webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
|
||||
}
|
||||
|
||||
/* 去除 hover、active 等状态的效果 */
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: inherit; /* 保持颜色不变 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item:hover { background: #e2e2e2; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
|
||||
.avatar-std {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.icon-box.orange { background: #faad14; }
|
||||
.icon-box.green { background: #52c41a; }
|
||||
.icon-box.blue { background: #1890ff; }
|
||||
</style>
|
||||
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="minimal-page">
|
||||
<div class="content-limit">
|
||||
<div class="section-title">申请列表</div>
|
||||
|
||||
<div class="request-group">
|
||||
<div v-for="item in requests" :key="item.id" class="minimal-item">
|
||||
<img :src="item.avatar" class="avatar" />
|
||||
|
||||
<div class="info">
|
||||
<div class="title-row">
|
||||
<span class="name">{{ item.nickName }}</span>
|
||||
<span class="date">{{ formatDate(item.created) }}</span>
|
||||
</div>
|
||||
<p class="sub-text">{{ item.description }}</p>
|
||||
<p v-if="item.remark" class="remark-text">{{ item.remark }}</p>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<template v-if="item.state === FRIEND_REQUEST_STATUS.Pending && item.requestUser != authStore.userInfo.id">
|
||||
<button class="btn-text btn-reject" @click="confirmReject(item)">拒绝</button>
|
||||
<button class="btn-text btn-accept" @click="handleOpenDialog(item)">接受</button>
|
||||
</template>
|
||||
<span v-else-if="item.state === FRIEND_REQUEST_STATUS.Pending" class="status-label">
|
||||
待对方同意
|
||||
</span>
|
||||
<span v-else-if="item.state === FRIEND_REQUEST_STATUS.Declined" class="status-label">
|
||||
{{item.requestUser != authStore.userInfo.id ? '已拒绝' : '对方拒绝'}}
|
||||
</span>
|
||||
<span v-else-if="item.state === FRIEND_REQUEST_STATUS.Passed" class="status-label">
|
||||
已添加
|
||||
</span>
|
||||
<span v-else-if="item.state === FRIEND_REQUEST_STATUS.Blocked && item.requestUser != authStore.userInfo.id" class="status-label">
|
||||
已拉黑
|
||||
</span>
|
||||
<span v-else class="status-label">
|
||||
已忽略
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showDialog" class="modal-mask">
|
||||
<div class="modal-box">
|
||||
<div class="modal-header">添加备注</div>
|
||||
<input v-model="remarkName" class="modal-input" placeholder="备注姓名" focus />
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn-cancel" @click="showDialog = false">取消</button>
|
||||
<button class="modal-btn-confirm" @click="confirmAccept">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { friendService } from '@/services/friend';
|
||||
import { useMessage } from '@/components/messages/useAlert';
|
||||
import { formatDate } from '@/utils/formatDate';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { FRIEND_ACTIONS, FRIEND_REQUEST_STATUS } from '@/constants/friendAction';
|
||||
import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
|
||||
|
||||
const message = useMessage();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const requests = ref([]);
|
||||
|
||||
const loadFriendRequests = async () => {
|
||||
const res = await friendService.getFriendRequests();
|
||||
if(res.code != 0){
|
||||
message.error(res.message);
|
||||
return;
|
||||
}
|
||||
requests.value = res.data;
|
||||
}
|
||||
|
||||
const showDialog = ref(false);
|
||||
const remarkName = ref('');
|
||||
const activeItem = ref(null);
|
||||
|
||||
const handleOpenDialog = (item) => {
|
||||
activeItem.value = item;
|
||||
remarkName.value = item.nickName; // 默认备注为昵称
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmAccept = async () => {
|
||||
if (!activeItem.value) return;
|
||||
await handleFriendRequest(FRIEND_ACTIONS.Accept)
|
||||
activeItem.value.state = FRIEND_REQUEST_STATUS.Passed;
|
||||
showDialog.value = false;
|
||||
};
|
||||
|
||||
const confirmReject = async (item) => {
|
||||
if(!item) return;
|
||||
activeItem.value = item;
|
||||
await handleFriendRequest(FRIEND_ACTIONS.Reject);
|
||||
activeItem.value.state = FRIEND_REQUEST_STATUS.Declined;
|
||||
}
|
||||
|
||||
const handleFriendRequest = async (action) => {
|
||||
const res = await friendService.handleFriendRequest(activeItem.value.id,action,activeItem.value.remarkName);
|
||||
if(res.code == SYSTEM_BASE_STATUS.SUCCESS){
|
||||
switch(action){
|
||||
case FRIEND_ACTIONS.Accept:
|
||||
message.show('添加好友成功');
|
||||
break;
|
||||
case FRIEND_ACTIONS.Reject:
|
||||
message.show('已拒绝');
|
||||
break;
|
||||
default:
|
||||
message.error('无效的操作');
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
message.error(res.message);
|
||||
console.log('好友请求处理异常：', res);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadFriendRequests();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 1. 基础环境：纯净背景 */
|
||||
.minimal-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5; /* 极致白 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-limit {
|
||||
width: 100%;
|
||||
max-width: 640px; /* 进一步收窄，视线更集中 */
|
||||
padding: 60px 24px;
|
||||
}
|
||||
|
||||
/* 2. 标题：极简，不带副标题 */
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #86868b;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* 3. 列表项：去掉外框和投影，靠间距呼吸 */
|
||||
.minimal-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px 4px;
|
||||
margin-bottom: 8px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
/* 4. 头像：小而圆润 */
|
||||
.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%; /* 纯圆更简洁 */
|
||||
background-color: #f5f5f7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 5. 信息区：对齐与行高 */
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1d1d1f;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 11px;
|
||||
color: #c1c1c6;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 13px;
|
||||
color: #86868b;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
font-size: 12px;
|
||||
color: #007aff;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
/* 6. 按钮：完全去掉色块，仅保留文字或超淡背景 */
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
/* “接受”只使用淡蓝色背景，不使用深色块 */
|
||||
.btn-accept {
|
||||
color: #007aff;
|
||||
background: rgba(0, 122, 255, 0.08);
|
||||
}
|
||||
|
||||
.btn-accept:hover {
|
||||
background: rgba(0, 122, 255, 0.15);
|
||||
}
|
||||
|
||||
/* “拒绝”使用最淡的灰色 */
|
||||
.btn-reject {
|
||||
color: #86868b;
|
||||
}
|
||||
|
||||
.btn-reject:hover {
|
||||
background: #f5f5f7;
|
||||
color: #1d1d1f;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
color: #d2d2d7;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩：毛玻璃效果 */
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 弹窗主体：延续你的极简白 */
|
||||
.modal-box {
|
||||
background: #fff;
|
||||
width: 280px;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 输入框：延续你的微灰色调 */
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #f5f5f7;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 按钮：完全复用你原本的 btn-text 逻辑 */
|
||||
.modal-btn-cancel {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #f5f5f7;
|
||||
border-radius: 10px;
|
||||
color: #86868b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-btn-confirm {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #007aff;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div id="ContactContainer">
|
||||
<WindowControls/>
|
||||
<main class="profile-main">
|
||||
|
||||
<div v-if="currentContact" class="profile-card">
|
||||
<header class="profile-header">
|
||||
<div class="text-info">
|
||||
<h2 class="display-name">
|
||||
{{ currentContact.remarkName }}
|
||||
<span :class="['gender-tag', 'm']">
|
||||
{{ '♂' }}
|
||||
</span>
|
||||
</h2>
|
||||
<p class="sub-text">账号：{{ currentContact.userInfo.username }}</p>
|
||||
<p class="sub-text">地区：{{ '未知' }}</p>
|
||||
</div>
|
||||
<img :src="currentContact.userInfo.avatar" class="big-avatar" />
|
||||
</header>
|
||||
|
||||
<div class="profile-body">
|
||||
<div class="info-row">
|
||||
<span class="label">昵称</span>
|
||||
<span class="value">{{ currentContact.userInfo.nickName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">个性签名</span>
|
||||
<span class="value">{{ currentContact.signature || '这个家伙很懒，什么都没留下' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">来源</span>
|
||||
<span class="value">通过搜索账号添加</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="profile-footer">
|
||||
<button class="btn-primary" @click="handleGoToChat">发消息</button>
|
||||
<button class="btn-ghost">音视频通话</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, ref } from 'vue';
|
||||
import { useContactStore } from '@/stores/contact';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useConversationStore } from '@/stores/conversation';
|
||||
import WindowControls from '../../components/WindowControls.vue';
|
||||
|
||||
const contactStore = useContactStore();
|
||||
const router = useRouter();
|
||||
const conversationStore = useConversationStore();
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const currentContact = ref(null)
|
||||
|
||||
function handleGoToChat() {
|
||||
if (currentContact.value) {
|
||||
const cid = conversationStore.conversations.find(x => x.targetId == currentContact.value.userInfo.id).id;
|
||||
console.log(cid)
|
||||
router.push(`/messages/chat/${cid}`);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
currentContact.value = contactStore.contacts.find(x => x.id == props.id);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* --- 右侧名片区 --- */
|
||||
.profile-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
width: 420px;
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gender-tag { font-size: 16px; }
|
||||
.gender-tag.m { color: #1890ff; }
|
||||
.gender-tag.f { color: #ff4d4f; }
|
||||
|
||||
.sub-text {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.big-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-row .label {
|
||||
width: 80px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-row .value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-ghost:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-logo {
|
||||
font-size: 80px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
/* 4. 定义组件进场和退场的动画 */
|
||||
.fade-scale-enter-active,
|
||||
.fade-scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-scale-enter-from,
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(10px);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div id="ContactContainer">
|
||||
<WindowControls/>
|
||||
<div class="empty-container">
|
||||
<div class="empty-content">
|
||||
<div class="empty-icon">
|
||||
<svg viewBox="0 0 100 100" width="100" height="100">
|
||||
<circle cx="50" cy="50" r="48" fill="none" stroke="#e2e2e2" stroke-width="2" />
|
||||
<path d="M30 40 Q30 30 45 30 L65 30 Q75 30 75 40 L75 55 Q75 65 60 65 L45 80 L45 65 L35 65 Q30 65 30 55 Z"
|
||||
fill="#f0f0f0" stroke="#dcdcdc" stroke-width="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="empty-title">未选中会话</h2>
|
||||
<p class="empty-tips">请从左侧列表中选择一个联系人开始聊天</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import WindowControls from '../../components/WindowControls.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
text-align: center;
|
||||
/* 稍微上移一点，视觉中心更平衡 */
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 入场动画，增加平滑感 */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 0.8; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
344
frontend/pc/IM/src/renderer/src/views/messages/MessageList.vue
Normal file
344
frontend/pc/IM/src/renderer/src/views/messages/MessageList.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div id="MsgList">
|
||||
<aside class="list-panel">
|
||||
<div class="search-section">
|
||||
<div class="search-box">
|
||||
<span class="search-icon"><i v-html="feather.icons['search'].toSvg({width:15,height:15})"></i></span>
|
||||
<input v-model="searchQuery" placeholder="搜索" />
|
||||
</div>
|
||||
<div class="addMenu">
|
||||
<AddMenu :menu-list="addMenuList" @action-active="actionHandler"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="msgTitleShow" class="showMsg" @click="requestNotificationPermission">
|
||||
<i style="color: red;line-height:0;" v-html="feather.icons['alert-circle'].toSvg({width:14})"></i>
|
||||
<span>新消息无法通知，点我授予通知权限</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-area">
|
||||
<div v-for="s in filteredSessions" :key="s.id"
|
||||
class="list-item" :class="{active: activeId == s.id}" @click="selectSession(s)">
|
||||
<div class="avatar-container">
|
||||
<img :src="s.targetAvatar ? s.targetAvatar : defaultAvatar" class="avatar-std" />
|
||||
<span v-if="s.unreadCount > 0" class="unread-badge">{{ s.unreadCount ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name-row">
|
||||
<span class="name">{{ s.targetName ?? '未知用户' }}</span>
|
||||
<span class="time">{{ formatDate(s.dateTime) ?? '1970/1/1 00:00:00' }}</span>
|
||||
</div>
|
||||
<div class="last-msg">{{ lastMessageHandler(s.lastMessage) ?? '获取消息内容失败' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<RouterView></RouterView>
|
||||
<SearchUser v-model="searchUserModal"/>
|
||||
<CreateGroup v-model="createGroupModal"></CreateGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import defaultAvatar from '@/assets/default_avatar.png'
|
||||
import { formatDate } from '@/utils/formatDate'
|
||||
import { useConversationStore } from '@/stores/conversation'
|
||||
import AddMenu from '@/components/addMenu.vue'
|
||||
import feather from 'feather-icons'
|
||||
import SearchUser from '@/components/user/SearchUser.vue'
|
||||
import CreateGroup from '@/components/groups/CreateGroup.vue'
|
||||
import { useBrowserNotification } from '@/services/useBrowserNotification'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
|
||||
const conversationStore = useConversationStore();
|
||||
const router = useRouter();
|
||||
const browserNotification = useBrowserNotification();
|
||||
|
||||
const searchQuery = ref('')
|
||||
const activeId = ref(0)
|
||||
const searchUserModal = ref(false);
|
||||
const createGroupModal = ref(false);
|
||||
const msgTitleShow = ref(false);
|
||||
const addMenuList = [
|
||||
{
|
||||
text: '发起群聊',
|
||||
action: 'createGroup',
|
||||
// 气泡/对话图标
|
||||
icon: feather.icons['message-square'].toSvg()
|
||||
},
|
||||
{
|
||||
text: '添加朋友',
|
||||
action: 'addFriend',
|
||||
// 人像+号图标
|
||||
icon: feather.icons['user-plus'].toSvg()
|
||||
},
|
||||
{
|
||||
text: '新建笔记',
|
||||
action: 'newNote',
|
||||
// 书本/笔记本图标
|
||||
icon: feather.icons['book-open'].toSvg()
|
||||
}
|
||||
];
|
||||
|
||||
const filteredSessions = computed(() => conversationStore.sortedConversations.filter(s => s.targetName.includes(searchQuery.value)))
|
||||
|
||||
function selectSession(s) {
|
||||
activeId.value = s.id
|
||||
router.push(`/messages/chat/${s.id}`)
|
||||
}
|
||||
|
||||
function actionHandler(type){
|
||||
switch(type){
|
||||
case 'addFriend':
|
||||
searchUserModal.value = true;
|
||||
break;
|
||||
case 'createGroup':
|
||||
createGroupModal.value = true;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function lastMessageHandler(text){
|
||||
try{
|
||||
const data = JSON.parse(text);
|
||||
if(data.text){
|
||||
return data.text;
|
||||
}else{
|
||||
return text
|
||||
}
|
||||
}catch(e){
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
const chatStore = useChatStore();
|
||||
|
||||
watch(
|
||||
() => chatStore.activeConversationId,
|
||||
(newVal) => {
|
||||
if(newVal && newVal != 0){
|
||||
activeId.value = newVal;
|
||||
}
|
||||
},
|
||||
{immediate:true}
|
||||
)
|
||||
|
||||
async function requestNotificationPermission(){
|
||||
await browserNotification.requestPermission();
|
||||
if(Notification.permission === "granted") msgTitleShow.value = false;
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await conversationStore.loadUserConversations();
|
||||
if(Notification.permission != "granted") msgTitleShow.value = true;
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#MsgList {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 2. 列表区修复 */
|
||||
.list-panel {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.showMsg {
|
||||
/* width: 10px; */
|
||||
height: 20px;
|
||||
background: #e3f98d;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
/* text-align: center; */
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* 修复：搜索框美化 */
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
display: flex;
|
||||
}
|
||||
.search-box {
|
||||
flex: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #dbdbdb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 5px;
|
||||
}
|
||||
.search-icon { font-size: 12px; color: #666; }
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
.addMenu {
|
||||
flex: 1;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.scroll-area { flex: 1; overflow-y: auto; }
|
||||
|
||||
/* 3. 聊天主面板修复 */
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* 修复：本人消息右侧对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 别人发的：默认靠左 */
|
||||
.msg.other { flex-direction: row; }
|
||||
|
||||
/* 本人发的：翻转排列方向，靠右显示 */
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* 修复：本人消息文字和时间戳也需要右对齐 */
|
||||
.msg.mine .msg-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 9px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.other .bubble { background: #fff; color: #333; }
|
||||
.mine .bubble { background: #95ec69; color: #000; }
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 头像样式统一 */
|
||||
.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
||||
.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
/* 未读气泡 */
|
||||
.avatar-container { position: relative; }
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
/* 输入框区域修复 */
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
|
||||
.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.send-row { display: flex; justify-content: flex-end; }
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.send-btn:hover { background: #e2e2e2; }
|
||||
|
||||
/* 列表美化 */
|
||||
.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
.list-item:hover:not(.active) { background: #ddd; }
|
||||
.info { flex: 1; overflow: hidden; }
|
||||
.name-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.name { font-size: 14px; font-weight: 500; }
|
||||
.time { font-size: 11px; color: #999; }
|
||||
.last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; }
|
||||
.nav-item.active { opacity: 1; }
|
||||
</style>
|
||||
@ -0,0 +1,889 @@
|
||||
<template>
|
||||
<section class="chat-panel">
|
||||
<WindowControls />
|
||||
<header class="chat-header">
|
||||
<span class="title">{{ conversationInfo?.targetName || '未选择会话' }}</span>
|
||||
<div class="actions">
|
||||
<button class="tool-btn" @click="startCall('video')" v-html="feather.icons['video'].toSvg({width:20, height: 20})"></button>
|
||||
<button class="tool-btn" @click="startCall('voice')" v-html="feather.icons['phone-call'].toSvg({width:20, height: 20})"></button>
|
||||
<button class="tool-btn" @click="infoShowHandler" v-html="feather.icons['more-vertical'].toSvg({width:20, height: 20})"></button>
|
||||
</div>
|
||||
</header>
|
||||
<div :class="{'main': !isElectron(), 'main-electron':isElectron()}">
|
||||
<div class="chat-history" ref="historyRef">
|
||||
<HistoryLoading ref="loadingRef" :loading="isLoading" :finished="isFinished" :error="hasError" @retry="loadHistoryMsg"/>
|
||||
<UserHoverCard ref="userHoverCardRef"/>
|
||||
<ContextMenu ref="menuRef"/>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="videoOpen" class="video-overlay" @click.self="videoOpen = false">
|
||||
|
||||
<div class="video-dialog">
|
||||
<div class="close-bar" @click="videoOpen = false">
|
||||
<span>正在播放视频</span>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
|
||||
<div class="player-wrapper">
|
||||
<vue3-video-player
|
||||
:src="videoUrl"
|
||||
poster="https://xxx.jpg"
|
||||
:controls="true"
|
||||
:autoplay="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<div v-for="m in chatStore.messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
|
||||
<img @mouseenter="(e) => handleHoverCard(e,m)" @mouseleave="closeHoverCard" :src="(m.senderId == myInfo.id ? (myInfo?.avatar || defaultAvatar) :m.chatType == MESSAGE_TYPE.GROUP ? m.senderAvatar : conversationInfo?.targetAvatar) ?? defaultAvatar" class="avatar-chat" />
|
||||
|
||||
<div class="msg-content">
|
||||
<div class="group-sendername" v-if="m.chatType == MESSAGE_TYPE.GROUP && m.senderId != myInfo.id">{{ m.senderName }}</div>
|
||||
<div :class="['bubble', m.type == 'Text' ? 'text-bubble' : '']" @contextmenu.prevent="(e) => handleRightClick(e, m)">
|
||||
<div v-if="m.type === 'Text'">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === FILE_TYPE.Image" class="image-msg-container" :style="getImageStyle(m.content)">
|
||||
<img
|
||||
class="image-msg-content"
|
||||
:src="m.isImgLoading || m.isLoading ? m.localUrl : m.content.thumb"
|
||||
alt="图片消息" @click="imagePreview(m)"
|
||||
>
|
||||
|
||||
<div v-if="m.isImgLoading || m.isError" class="image-overlay">
|
||||
<div v-if="m.isImgLoading" class="progress-box">
|
||||
<div class="circular-progress">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<circle class="bg" cx="20" cy="20" r="16" />
|
||||
<circle
|
||||
class="bar"
|
||||
cx="20" cy="20" r="16"
|
||||
:style="{ strokeDashoffset: 100 - (m.progress || 0) }"
|
||||
/>
|
||||
</svg>
|
||||
<span class="pct">{{ m.progress || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i v-if="m.isError" class="error-icon" v-html="feather.icons['alert-circle'].toSvg({width:24, height: 24})"></i>
|
||||
</div>
|
||||
</div>
|
||||
<VideoMsg v-else-if="m.type === FILE_TYPE.Video"
|
||||
:thumbnailUrl="m.localUrl ?? m.content.thumb"
|
||||
:duration="m.content.duration"
|
||||
:w="m.content.w"
|
||||
:h="m.content.h"
|
||||
:uploading="m.isImgLoading"
|
||||
:progress="+m.progress"
|
||||
@play="playHandler(m)"
|
||||
/>
|
||||
<VoiceMsg v-else-if="m.type === FILE_TYPE.Voice"
|
||||
:url="m.localUrl ?? m.content.url"
|
||||
:duration="m.content.duration"
|
||||
:isRead="true"
|
||||
:isSelf="m.senderId == myInfo.id"
|
||||
/>
|
||||
<div class="status" v-if="m.senderId == myInfo.id">
|
||||
<i v-if="m.isError" style="color: red;" v-html="feather.icons['alert-circle'].toSvg({width:18, height: 18})"></i>
|
||||
<i v-if="m.isLoading" class="loaderIcon" v-html="feather.icons['loader'].toSvg({width:18, height: 18})"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="msg-time">{{ formatDate(m.timeStamp) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="chat-footer">
|
||||
<div class="toolbar">
|
||||
<button class="tool-btn" @click="toggleEmoji" v-html="feather.icons['smile'].toSvg({width:25, height: 25})">
|
||||
</button>
|
||||
<label class="tool-btn">
|
||||
<i v-html="feather.icons['file'].toSvg({width:25, height: 25})"></i>
|
||||
<input type="file" hidden @change="handleFile($event.target.files)" />
|
||||
</label>
|
||||
<button :class="['tool-btn', isRecord ? 'is-recording' : '']" @mousedown="startRecord" @mouseup="stopRecord" v-html="feather.icons[isRecord ? 'mic' : 'mic-off'].toSvg({width:25, height: 25})">
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="input"
|
||||
placeholder="请输入消息..."
|
||||
@keydown.enter.exact.prevent="sendText"
|
||||
></textarea>
|
||||
<div class="send-row">
|
||||
<button class="send-btn" :disabled="!input.trim()" @click="sendText">发送(S)</button>
|
||||
</div>
|
||||
</footer>
|
||||
<InfoSidebar v-if="infoSideBarShow" class="infoSideBar" :chatType="conversationInfo.chatType ?? null" :groupData="conversationInfo"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onMounted, watch, onUnmounted } from 'vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import defaultAvatar from '@/assets/default_avatar.png';
|
||||
import { formatDate } from '@/utils/formatDate';
|
||||
import { useChatStore } from '@/stores/chat';
|
||||
import { generateSessionId } from '@/utils/sessionIdTools';
|
||||
import { useSignalRStore } from '@/stores/signalr';
|
||||
import { useConversationStore } from '@/stores/conversation';
|
||||
import feather from 'feather-icons';
|
||||
import { MESSAGE_TYPE } from '@/constants/MessageType';
|
||||
import HistoryLoading from '@/components/messages/HistoryLoading.vue';
|
||||
import UserHoverCard from '@/components/user/UserHoverCard.vue';
|
||||
import ContextMenu from '@/components/ContextMenu.vue';
|
||||
import { useSendMessageHandler } from './hooks/useSendMessageHandler';
|
||||
import { previewImages } from 'hevue-img-preview/v3'
|
||||
import { useMessage } from '@/components/messages/useAlert';
|
||||
import { FILE_TYPE, getMessageType } from '@/constants/fileTypeDefine';
|
||||
import { generateImageThumbnailBlob, getVideoDuration, getVideoThumbnailBlob, loadImage } from '@/utils/imageTools';
|
||||
import { ImageInfo, VideoInfo, VoiceInfo } from '@/constants/fileTypeInfo';
|
||||
import VideoMsg from '@/components/messages/VideoMsg.vue';
|
||||
import VoiceMsg from '@/components/messages/VoiceMsg.vue';
|
||||
import WindowControls from '../../../components/WindowControls.vue';
|
||||
import InfoSidebar from '../../../components/messages/InfoSidebar.vue';
|
||||
import { isElectron } from '../../../utils/electronHelper';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
id:{
|
||||
type: String,
|
||||
required:true
|
||||
}
|
||||
})
|
||||
|
||||
const infoSideBarShow = ref(false);
|
||||
|
||||
const chatStore = useChatStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
const conversationStore = useConversationStore();
|
||||
const message = useMessage();
|
||||
const {sendMessage, sendFileMessage, sendTextMessage} = useSendMessageHandler();
|
||||
|
||||
const input = ref(''); // 输入框内容
|
||||
const historyRef = ref(null); // 绑定 DOM 用于滚动
|
||||
const loadingRef = ref(null)
|
||||
const userHoverCardRef = ref(null);
|
||||
const menuRef = ref(null);
|
||||
const myInfo = useAuthStore().userInfo;
|
||||
|
||||
const conversationInfo = ref(null)
|
||||
|
||||
// --- 消息数据 ---
|
||||
const messages = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const isFinished = ref(false);
|
||||
const hasError = ref(false);
|
||||
let observer = null;
|
||||
const isRecord = ref(false);
|
||||
let mediaRecorder = null;
|
||||
let audioChunks = []; // 用于存储录音的数据片段
|
||||
const videoUrl = ref(null);
|
||||
const videoOpen = ref(false)
|
||||
|
||||
const infoShowHandler = () => {
|
||||
if(infoSideBarShow.value)
|
||||
infoSideBarShow.value = false;
|
||||
else
|
||||
infoSideBarShow.value =true;
|
||||
}
|
||||
|
||||
|
||||
const getImageStyle = (content) => {
|
||||
const maxWidth = 200; // 最大宽度
|
||||
const maxHeight = 200; // 最大高度
|
||||
const minSize = 60; // 最小尺寸，防止变成一个点
|
||||
|
||||
let w = content.W || maxWidth;
|
||||
let h = content.H || maxHeight;
|
||||
|
||||
const ratio = w / h;
|
||||
|
||||
if (w > h) {
|
||||
// 横图
|
||||
w = Math.min(w, maxWidth);
|
||||
h = w / ratio;
|
||||
} else {
|
||||
// 纵图
|
||||
h = Math.min(h, maxHeight);
|
||||
w = h * ratio;
|
||||
}
|
||||
|
||||
return {
|
||||
width: `${Math.max(w, minSize)}px`,
|
||||
height: `${Math.max(h, minSize)}px`
|
||||
};
|
||||
};
|
||||
|
||||
const imagePreview = (m) => {
|
||||
const imageList = chatStore.messages
|
||||
.filter(x => x.type == 'Image')
|
||||
;
|
||||
const index = imageList.indexOf(m);
|
||||
previewImages({
|
||||
imgList: imageList.map(m => m.content.url),
|
||||
nowImgIndex: index
|
||||
});
|
||||
}
|
||||
|
||||
const startRecord = async () => {
|
||||
try{
|
||||
const stream = await navigator.mediaDevices.getUserMedia({audio:true});
|
||||
mediaRecorder = new MediaRecorder(stream);
|
||||
audioChunks = [];
|
||||
mediaRecorder.ondataavailable = e => {
|
||||
if(e.data.size > 0) audioChunks.push(e.data);
|
||||
}
|
||||
// 录音结束后的处理
|
||||
mediaRecorder.onstop = () => {
|
||||
const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
|
||||
// 生成一个唯一的文件名：时间戳 + 随机数 + 后缀
|
||||
const fileName = `audio_${Date.now()}_${Math.floor(Math.random() * 1000)}.mp3`;
|
||||
|
||||
// 将 Blob 转换为 File 对象
|
||||
const audioFile = new File([audioBlob], fileName, {
|
||||
type: 'audio/mp3',
|
||||
lastModified: Date.now()
|
||||
});
|
||||
handleFile([audioFile]).finally(() => {
|
||||
// 停止所有轨道以关闭麦克风图标
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
});
|
||||
};
|
||||
|
||||
mediaRecorder.start();
|
||||
isRecord.value = true;
|
||||
}catch(e){
|
||||
console.log(e)
|
||||
message.error('无法获取麦克风权限!');
|
||||
}
|
||||
}
|
||||
|
||||
const stopRecord = async () => {
|
||||
if (mediaRecorder && isRecord.value) {
|
||||
mediaRecorder.stop();
|
||||
isRecord.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const playHandler = (m) => {
|
||||
videoUrl.value = m.content.url
|
||||
videoOpen.value = true
|
||||
}
|
||||
|
||||
const loadHistoryMsg = async () => {
|
||||
// 1. 如果正在加载，或者已经彻底没数据了，才拦截
|
||||
if (isLoading.value || isFinished.value) return;
|
||||
|
||||
isLoading.value = true;
|
||||
hasError.value = false;
|
||||
|
||||
try {
|
||||
|
||||
const oldHeight = historyRef.value.scrollHeight;
|
||||
// 假设你的 store 方法会返回新加载的消息数量，或者直接内部更新 isEnded
|
||||
await chatStore.loadMoreMessages();
|
||||
const newHeight = historyRef.value.scrollHeight;
|
||||
|
||||
historyRef.value.scrollTop = newHeight - oldHeight;
|
||||
// 2. 核心：根据 Store 里的状态同步组件状态
|
||||
// 只有当服务器明确告诉你“没消息了”，才设为 true
|
||||
if (chatStore.isEnded) {
|
||||
isFinished.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
// 3. 发生错误时，不要设置 isFinished = true
|
||||
hasError.value = true;
|
||||
console.error("加载历史消息失败:", error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHoverCard = (e, m) => {
|
||||
const userInfo = {
|
||||
name: m.senderName,
|
||||
avatar: m.senderAvatar,
|
||||
id: m.senderId
|
||||
}
|
||||
userHoverCardRef.value.show(e.target, userInfo);
|
||||
}
|
||||
|
||||
const closeHoverCard = () => {
|
||||
userHoverCardRef.value.hide();
|
||||
}
|
||||
|
||||
const handleRightClick = (e, m) => {
|
||||
e.stopPropagation();
|
||||
const items = [
|
||||
{
|
||||
label: '复制',
|
||||
action: () => console.log('打开之前的悬浮卡片', user)
|
||||
},
|
||||
{
|
||||
label: '转发',
|
||||
action: () => console.log('进入私聊', user.id)
|
||||
},
|
||||
{
|
||||
label: '多选',
|
||||
action: () => {}
|
||||
},
|
||||
{
|
||||
label: '翻译',
|
||||
action: () => {}
|
||||
},
|
||||
{
|
||||
label: '引用',
|
||||
action: () => {}
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'danger',
|
||||
action: () => alert('删除成功')
|
||||
}
|
||||
];
|
||||
menuRef.value.show(e, items);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => chatStore.messages,
|
||||
async (newVal) => {
|
||||
scrollToBottom();
|
||||
conversationStore.conversations.find(x => x.id == conversationInfo.value.id).unreadCount = 0;
|
||||
signalRStore.clearUnreadCount(conversationInfo.value.id);
|
||||
},
|
||||
{deep: true}
|
||||
);
|
||||
|
||||
// 自动滚动到底部
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick(); // 等待 DOM 更新后执行
|
||||
if (historyRef.value) {
|
||||
historyRef.value.scrollTop = historyRef.value.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
// 发送文本
|
||||
async function sendText() {
|
||||
if (!input.value.trim()) return;
|
||||
// 根据 C# MessageBaseDto 构造的示例对象
|
||||
const content = input.value;
|
||||
input.value = '';
|
||||
await sendTextMessage(content, conversationInfo);
|
||||
}
|
||||
|
||||
// 通话模拟
|
||||
function startCall(type) {
|
||||
console.log(`发起${type === 'video' ? '视频' : '语音'}通话`);
|
||||
}
|
||||
|
||||
// 文件处理模拟
|
||||
async function handleFile(files) {
|
||||
const file = files[0];
|
||||
let info = {};
|
||||
let localUrl = null;
|
||||
let img = null;
|
||||
switch(getMessageType(file.type)){
|
||||
case FILE_TYPE.Image:
|
||||
localUrl = URL.createObjectURL(file);
|
||||
img = await loadImage(localUrl);
|
||||
info = new ImageInfo(file.type, '[图片]', img.width, img.height, await generateImageThumbnailBlob(await loadImage(localUrl), 200));
|
||||
break;
|
||||
|
||||
case FILE_TYPE.Video: {
|
||||
const imgBlob = await getVideoThumbnailBlob(file);
|
||||
localUrl = URL.createObjectURL(imgBlob);
|
||||
img = await loadImage(localUrl);
|
||||
|
||||
info = new VideoInfo(file.type,'[视频]', img.width, img.height, imgBlob, await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
case FILE_TYPE.Voice: {
|
||||
localUrl = URL.createObjectURL(file);
|
||||
info = new VoiceInfo(file.type,'[语音消息]', await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
await sendFileMessage(file, conversationInfo,info,localUrl);
|
||||
}
|
||||
|
||||
function toggleEmoji() {
|
||||
console.log('打开表情面板');
|
||||
}
|
||||
|
||||
async function loadConversation(conversationId) {
|
||||
/*
|
||||
const res = await messageService.getConversationById(conversationId);
|
||||
conversationInfo.value = res.data;
|
||||
*/
|
||||
if(conversationStore.conversations.length == 0){
|
||||
await conversationStore.loadUserConversations();
|
||||
}
|
||||
conversationInfo.value = conversationStore.conversations.find(x => x.id == Number(conversationId));
|
||||
}
|
||||
|
||||
const initChat = async (newId) => {
|
||||
await loadConversation(newId);
|
||||
if(conversationInfo.value){
|
||||
const sessionid = generateSessionId(
|
||||
conversationInfo.value.userId, conversationInfo.value.targetId, conversationInfo.value.chatType == MESSAGE_TYPE.GROUP)
|
||||
await chatStore.swtichSession(sessionid,newId);
|
||||
isFinished.value = false;
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
watch(
|
||||
// 1. 监听源：同时监听 ID 和 初始化状态
|
||||
// 这里必须写得极其小心，防止在 find 不到的时候报错
|
||||
() => {
|
||||
// 如果没有 ID，或者 Store 还没加载，返回一个安全的默认值
|
||||
if (!conversationStore.conversations.length) {
|
||||
return [props.id,null];
|
||||
}
|
||||
|
||||
// 尝试找到当前会话
|
||||
const session = conversationStore.conversations.find(x => x.id == Number(props.id));
|
||||
|
||||
// 返回 [ID, 状态]，用了 ?. 即使 session 是 undefined 也只会返回 undefined，不会报错
|
||||
return [props.id, session?.isInitialized];
|
||||
},
|
||||
|
||||
// 2. 回调逻辑
|
||||
async ([newId, isInited], [oldId, oldInited]) => {
|
||||
// 基础防守：如果 ID 无效，直接跳过
|
||||
if (!newId) return;
|
||||
|
||||
try {
|
||||
// 场景 A：路由切换 (ID 变了)
|
||||
// 这里的逻辑是：只要切了 ID，先加载本地的给用户看
|
||||
//if (newId !== oldId) {
|
||||
// 注意：这里只是加载本地缓存，不负责去服务器拉新
|
||||
// 真正的“拉新”逻辑交给下面的 isInited 判断
|
||||
await initChat(newId);
|
||||
//}
|
||||
|
||||
// 场景 B：检测到需要补洞 (isInited 变为 false)
|
||||
// 无论是“刚进页面”还是“SignalR重连”导致的，都会命中这里
|
||||
if (isInited === false) {
|
||||
console.log(`[同步触发] 会话 ${newId} 需要补洞...`);
|
||||
|
||||
// 1. 获取当前断点（本地最新一条消息的 ID）
|
||||
//const currentMax = chatStore.maxSequenceId;
|
||||
|
||||
// 2. 去服务器拉取增量数据
|
||||
const msgList = await chatStore.fetchNewMsgFromServier(newId);
|
||||
|
||||
const session = conversationStore.conversations.find(x => x.id == Number(newId));
|
||||
if(msgList && msgList.length > 0){
|
||||
const minSequenceId = Math.min(...msgList.map(m => m.sequenceId));
|
||||
const locaMaxSequenceId = chatStore.maxSequenceId;
|
||||
if(locaMaxSequenceId < (minSequenceId - 1)){
|
||||
chatStore.messages = [];;
|
||||
}
|
||||
await chatStore.pushAndSortMessagesAsync(msgList, generateSessionId(session.userId, session.targetId, session.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
}
|
||||
// 3. 如果有新消息，存入 Store
|
||||
|
||||
|
||||
|
||||
// 4. 关键步骤：手动把状态回正！
|
||||
// 必须重新 find 一次对象，确保引用是对的
|
||||
if (session) {
|
||||
session.isInitialized = true;
|
||||
console.log(`[同步完成] 会话 ${newId} 状态已重置为 true`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("同步流程异常:", err);
|
||||
}
|
||||
},
|
||||
{ deep: true } // 加上 deep 确保能监听到对象属性变化
|
||||
);
|
||||
|
||||
const initObs = async () => {
|
||||
await nextTick();
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
|
||||
// 只有当 Loading 组件进入视口，且满足触发条件
|
||||
if (entry.isIntersecting) {
|
||||
loadHistoryMsg();
|
||||
}
|
||||
}, {
|
||||
root: historyRef.value, // 指定监听容器
|
||||
threshold: 0.1 // 露出 10% 就算触发
|
||||
});
|
||||
|
||||
// 开始观察 Loading 组件
|
||||
if (loadingRef.value) {
|
||||
// 如果 sentinel 是组件，需要拿它底下的 $el
|
||||
observer.observe(loadingRef.value.$el || loadingRef.value);
|
||||
}
|
||||
// 3. 【主动侦测逻辑】
|
||||
// 如果当前没有在加载，且还没有结束，且内容还没有撑开容器
|
||||
const el = historyRef.value;
|
||||
if (el && !isLoading.value && !isFinished.value) {
|
||||
if (el.scrollHeight <= el.clientHeight) {
|
||||
console.log('检测到首屏内容不足，主动拉取历史记录');
|
||||
loadHistoryMsg();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initChat(props.id)
|
||||
await initObs();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) observer.disconnect();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 核心布局修复 */
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* 确保占满父容器 */
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.chat-panel .main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 60px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-panel .main-electron {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 60px - 30px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
/* 遮罩层：全屏、黑色半透明、固定定位 */
|
||||
.video-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999; /* 确保在最顶层 */
|
||||
}
|
||||
|
||||
/* 播放器弹窗主体 */
|
||||
.video-dialog {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1000px;
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 顶部状态栏（包含关闭按钮） */
|
||||
.close-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background: #1a1a1a;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
transform: scale(1.2);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9; /* 锁定 16:9 比例 */
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 进场动画 */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: no-drag;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-header .actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background: #b8b8b8;
|
||||
}
|
||||
|
||||
.tool-btn.is-recording {
|
||||
background-color: rgba(0, 196, 98, 0.1);
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.image-msg {
|
||||
max-width: 100px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 容器：由计算属性决定宽高 */
|
||||
.image-msg-container {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 图片：填满容器但不拉伸 */
|
||||
.image-msg-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 关键：裁剪而非拉伸 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 覆盖层 */
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
inset: 0; /* 铺满父容器 */
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 环形进度条样式 */
|
||||
.circular-progress {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.circular-progress svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.circular-progress circle {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
.circular-progress .bg {
|
||||
stroke: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.circular-progress .bar {
|
||||
stroke: #ffffff;
|
||||
stroke-dasharray: 100; /* 这里的 100 对应周长 */
|
||||
transition: stroke-dashoffset 0.2s;
|
||||
}
|
||||
.circular-progress .pct {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
.error-icon {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
|
||||
/* 历史区域：自动撑开并处理滚动 */
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.group-sendername {
|
||||
width: 55px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 消息对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loaderIcon {
|
||||
display: inline-block; /* 必须是 block 或 inline-block 才能旋转 */
|
||||
line-height: 0;
|
||||
animation: spin 1s linear infinite; /* 1秒转一圈，线性速度，无限循环 */
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.msg.mine .msg-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
max-width: 450px;
|
||||
word-break: break-all;
|
||||
/* background: #fff; */
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-bubble {
|
||||
padding: 10px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mine .text-bubble {
|
||||
background: #95ec69;
|
||||
}
|
||||
|
||||
.mine .bubble {
|
||||
/* background: #95ec69; */
|
||||
}
|
||||
|
||||
.avatar-chat {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.send-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,21 @@
|
||||
export function useRightClickHandler() {
|
||||
const items = [
|
||||
{
|
||||
label: '查看资料',
|
||||
action: () => console.log('打开之前的悬浮卡片', user)
|
||||
},
|
||||
{
|
||||
label: '发送消息',
|
||||
action: () => console.log('进入私聊', user.id)
|
||||
},
|
||||
{
|
||||
label: '修改备注',
|
||||
action: () => { }
|
||||
},
|
||||
{
|
||||
label: '删除好友',
|
||||
type: 'danger',
|
||||
action: () => alert('删除成功')
|
||||
}
|
||||
];
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import { generateSessionId } from "@/utils/sessionIdTools";
|
||||
import { MESSAGE_TYPE } from "@/constants/MessageType";
|
||||
import { messageService } from "@/services/message";
|
||||
import { SYSTEM_BASE_STATUS } from "@/constants/systemBaseStatus";
|
||||
import { uploadFile } from "@/services/upload/uploader";
|
||||
import { UPLOAD_STATUS } from "@/constants/uploadStatus";
|
||||
import { getMessageType } from "@/constants/fileTypeDefine";
|
||||
import { uploadService } from "@/services/upload/uploadService";
|
||||
import { getFileHash } from "@/utils/uploadTools";
|
||||
|
||||
export function useSendMessageHandler() {
|
||||
const sendMessage = async (msg) => {
|
||||
const chatStore = useChatStore();
|
||||
//设置消息为加载状态
|
||||
const msgServer = { ...msg }
|
||||
msg.isLoading = true;
|
||||
//将临时消息推送到消息列表(存库，方便后续重试)
|
||||
await chatStore.pushAndSortMessagesAsync([msg], generateSessionId(msg.senderId, msg.receiverId, msg.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
//从列表取出消息
|
||||
let updateMsg = msg;
|
||||
try {
|
||||
const res = await messageService.sendMessage(msgServer);
|
||||
if (res.code != SYSTEM_BASE_STATUS.SUCCESS) {
|
||||
updateMsg.isError = true;
|
||||
} else {
|
||||
//发送成功将后端生成的sequenceId更新
|
||||
updateMsg = res.data;
|
||||
}
|
||||
} catch {
|
||||
updateMsg.isError = true;
|
||||
} finally {
|
||||
updateMsg.isLoading = false;
|
||||
chatStore.pushAndSortMessagesAsync([updateMsg], generateSessionId(msg.senderId, msg.receiverId, msg.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
|
||||
msg.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const sendTextMessage = async (text, conversationInfo) => {
|
||||
const msg = {
|
||||
type: 'Text', // 消息类型，例如 'Text', 'Image', 'File'
|
||||
chatType: conversationInfo.value.chatType, // 'PRIVATE' 或 'GROUP'
|
||||
senderId: conversationInfo.value.userId, // 当前用户ID (对应 int)
|
||||
receiverId: conversationInfo.value.targetId, // 接收者ID (对应 int)
|
||||
content: text,
|
||||
timeStamp: new Date(), // 对应 DateTime
|
||||
msgId: self.crypto.randomUUID()
|
||||
};
|
||||
//更新当前会话最新消息
|
||||
conversationInfo.value.lastMessage = msg.content;
|
||||
await sendMessage(msg);
|
||||
}
|
||||
const sendFileMessage = async (file, conversationInfo, info, localUrl) => {
|
||||
const chatStore = useChatStore();
|
||||
const msg = {
|
||||
type: getMessageType(file.type), // 消息类型，例如 'Text', 'Image', 'File'
|
||||
chatType: conversationInfo.value.chatType, // 'PRIVATE' 或 'GROUP'
|
||||
senderId: conversationInfo.value.userId, // 当前用户ID (对应 int)
|
||||
receiverId: conversationInfo.value.targetId, // 接收者ID (对应 int)
|
||||
content: '',
|
||||
timeStamp: new Date(), // 对应 DateTime
|
||||
msgId: self.crypto.randomUUID(),
|
||||
localUrl: localUrl,
|
||||
progress: 0
|
||||
};
|
||||
//更新当前会话最新消息
|
||||
conversationInfo.value.lastMessage = info.text;
|
||||
msg.isImgLoading = true;
|
||||
await chatStore.pushAndSortMessagesAsync([msg], generateSessionId(msg.senderId, msg.receiverId, msg.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
|
||||
if (info.thumb) {
|
||||
const hash = await getFileHash(info.thumb);
|
||||
try {
|
||||
const { data } = await uploadService.uploadSmallFile(info.thumb, hash);
|
||||
info.thumb = data.objectName;
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
msg.isError = true;
|
||||
msg.isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
await uploadFile(file, {
|
||||
onProgress: async (e) => {
|
||||
if (!e.status) return;
|
||||
switch (e.status) {
|
||||
case UPLOAD_STATUS.MERGING:
|
||||
case UPLOAD_STATUS.UPLOADING:
|
||||
msg.progress = e.progress;
|
||||
break;
|
||||
case UPLOAD_STATUS.COMPLETE:
|
||||
msg.progress = 100;
|
||||
msg.isImgLoading = false;
|
||||
info.fileId = e.taskId;
|
||||
msg.content = JSON.stringify(info);
|
||||
await sendMessage(msg);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { sendMessage, sendFileMessage, sendTextMessage };
|
||||
}
|
||||
261
frontend/pc/IM/src/renderer/src/views/settings/SettingMenu.vue
Normal file
261
frontend/pc/IM/src/renderer/src/views/settings/SettingMenu.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="im-settings-container">
|
||||
<section class="menu-sidebar">
|
||||
<h2 class="sidebar-title">系统设置</h2>
|
||||
<div class="menu-list">
|
||||
<button
|
||||
v-for="item in menuItems"
|
||||
:key="item.id"
|
||||
:class="['menu-item', { active: activeTab === item.id }]"
|
||||
@click="activeTab = item.id"
|
||||
>
|
||||
<span class="item-icon" v-html="item.icon"></span>
|
||||
<span class="item-text">{{ item.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-footer">版本 v2.4.0</div>
|
||||
</section>
|
||||
|
||||
<main class="main-panel">
|
||||
<header class="panel-header">
|
||||
<h1>{{ currentMenuName }}</h1>
|
||||
<p>配置您的个性化通讯偏好</p>
|
||||
</header>
|
||||
|
||||
<div class="panel-body">
|
||||
<div v-if="activeTab === 'notifications'" class="setting-group">
|
||||
<div v-for="(val, key) in notificationSettings" :key="key" class="setting-row">
|
||||
<div class="row-info">
|
||||
<div class="row-label">{{ key }}</div>
|
||||
<div class="row-desc">开启后系统将实时同步您的通知偏好</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" v-model="notificationSettings[key]">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-placeholder">
|
||||
<span class="icon">⚙️</span>
|
||||
<p>{{ currentMenuName }} 功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="panel-footer">
|
||||
<button class="btn-cancel" @click="reset">重置</button>
|
||||
<button class="btn-save" @click="save">保存更改</button>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import feather from 'feather-icons'
|
||||
|
||||
const activeTab = ref('notifications')
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'profile', name: '个人资料', icon: feather.icons['user-check'].toSvg() },
|
||||
{ id: 'notifications', name: '通知设置', icon: feather.icons['bell'].toSvg() },
|
||||
{ id: 'security', name: '账号安全', icon: feather.icons['shield'].toSvg() },
|
||||
{ id: 'general', name: '通用设置', icon: feather.icons['settings'].toSvg() }
|
||||
]
|
||||
|
||||
const currentMenuName = computed(() => menuItems.find(i => i.id === activeTab.value)?.name)
|
||||
|
||||
const notificationSettings = reactive({
|
||||
'声音提醒': true,
|
||||
'桌面弹窗': true,
|
||||
'仅在免打扰外提醒': false
|
||||
})
|
||||
|
||||
const save = () => alert('设置已生效')
|
||||
const reset = () => location.reload()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 变量定义 */
|
||||
:component {
|
||||
--active-color: #00a884;
|
||||
--bg-sidebar: #f7f9fa;
|
||||
--bg-hover: #f0f2f5;
|
||||
--text-main: #111b21;
|
||||
--text-dim: #667781;
|
||||
--border: #e9edef;
|
||||
}
|
||||
|
||||
/* 核心容器：填满外部 */
|
||||
.im-settings-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%; /* 绝对铺满 */
|
||||
background: #ffffff;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧样式 */
|
||||
.menu-sidebar {
|
||||
width: 260px;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
padding: 30px 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
transition: 0.2s;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.menu-item:hover { background: #c6c6c6; }
|
||||
|
||||
.menu-item.active {
|
||||
background: #c6c6c6;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-icon { margin-right: 12px; font-size: 18px; }
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 右侧内容样式 */
|
||||
.main-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 40px 50px 20px;
|
||||
}
|
||||
|
||||
.panel-header h1 { font-size: 26px; color: var(--text-main); margin: 0 0 8px 0; }
|
||||
.panel-header p { font-size: 14px; color: var(--text-dim); margin: 0; }
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
padding: 0 50px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.row-label { font-weight: 500; color: var(--text-main); margin-bottom: 4px; }
|
||||
.row-desc { font-size: 13px; color: var(--text-dim); }
|
||||
|
||||
/* 开关组件 */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 46px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
background-color: #d1d5db;
|
||||
transition: .3s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .slider { background-color: #0075ae; }
|
||||
input:checked + .slider:before { transform: translateX(22px); }
|
||||
|
||||
/* 底部操作 */
|
||||
.panel-footer {
|
||||
padding: 30px 50px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: #000000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 32px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 10px rgba(0, 168, 132, 0.2);
|
||||
}
|
||||
|
||||
.empty-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 响应式：窄容器自动堆叠 */
|
||||
@media (max-width: 650px) {
|
||||
.im-settings-container { flex-direction: column; }
|
||||
.menu-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.menu-list { display: flex; overflow-x: auto; padding: 10px; }
|
||||
.menu-item { white-space: nowrap; width: auto; margin-right: 8px; margin-bottom: 0; }
|
||||
.sidebar-title, .sidebar-footer { display: none; }
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user