Skip to content

Commit

Permalink
#139 恶性 BUG
Browse files Browse the repository at this point in the history
✨ 耶耶!现在你可以使用 npx 来快速启动 sql2 网页版!
💄 现在消息有进入动画了
🐛 修正在 webkit 下图片预览起出界的问题 <- #134
🐛 修正消息选择在触屏设备下消息背景的异常
🐛 修正一个消息列表元素 key 错误导致元素卡斯的问题
  • Loading branch information
Stapxs authored Nov 18, 2024
2 parents d7c5181 + 6947340 commit 2f6a732
Show file tree
Hide file tree
Showing 14 changed files with 224 additions and 14 deletions.
12 changes: 10 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,22 @@
### > 运行服务
Stapxs QQ Lite 需要一个 QQ Bot 后端提供服务,你可以参考 [📖 这个文档](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/wiki/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B) 布置它。

### > 访问应用
### > 访问网页
本仓库开启了 GitHub Pages, 所有向主分支提交的代码将会自动构建并发布。你可以直接访问 [🌎 这个页面](https://stapxs.github.io/Stapxs-QQ-Lite-2.0) 来使用已经构建并部署的页面。

### > 安装应用
### > 安装客户端
除了直接使用本仓库的构建页面,你也可以下载使用 electron 打包的功能**稍稍**更丰富的客户端版本,访问 [📦️ 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 查看版本发布列表。

当然你也可以使用包管理来安装它,使用包管理安装将会更便于更新 Stapxs QQ Lite 而不用每次都从 Github 上手动更新,访问 [💬 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/issues/99) 来查看目前支持的包管理。

### > 自行部署网页
Stapxs QQ Lite 在版本发布时构建了一份根目录下的 Web 文件,你可以在 [📦️ 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 找到它,它一般叫做```Stapxs.QQ.Lite-<版本>-web.zip```,将它解压放置到你的网页服务器中即可。

什么?不会部署网页服务器?Stapxs QQ Lite 网页版现在已经发布到了 [npm](https://www.npmjs.com/package/ssqq-web) 上!你可以使用 npx 工具快速启动它:
~~~bash
npx ssqq-web hostname=127.0.0.1 port=8081
~~~

## 💬 提醒和问题

### > 关于不安全连接
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "stapxs-qq-lite",
"version": "2.9.3",
"version": "2.9.4",
"private": false,
"author": "Stapx Steve [林槐]",
"description": "一个兼容 OneBot 的非官方网页版 QQ 客户端,使用 Vue 重制的全新版本。",
Expand Down
1 change: 1 addition & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@
</Transition>
<viewer
class="viewer" ref="viewer"
v-show="runtimeData.tags.viewer.show"
:options="viewerOpt"
:images="runtimeData.chatInfo.info.image_list"
@inited="viewerInited"
Expand Down
2 changes: 0 additions & 2 deletions src/assets/css/chat.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ input {
pointer-events: none;
transition: all .3s;
position: absolute;
user-select: text;
display: flex;
height: 100%;
left: 371px;
Expand Down Expand Up @@ -384,7 +383,6 @@ input {

.msg-menu {
position: absolute;
user-select: none;
overflow: hidden;
height: 100%;
width: 100%;
Expand Down
1 change: 1 addition & 0 deletions src/assets/css/msg.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

.message {
user-select: text;
transition: background .3s;
display: flex;
padding: 5px 10px 10px 10px;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/css/view.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
html, body {
background: var(--color-main);
font-family: 'Arial', 'Helvetica', 'sans-serif';
background: var(--color-main);
user-select: none;
overflow: hidden;
height: 100%;
Expand Down Expand Up @@ -390,7 +390,6 @@ textarea:focus {
}

.friend-body {
user-select: none;
cursor: pointer;
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -643,7 +642,6 @@ textarea:focus {
}
.app-msg > div > a {
color: var(--color-font-r);
user-select: none;
margin: 0 10px;
}
.app-msg > div > div:last-child {
Expand Down
18 changes: 13 additions & 5 deletions src/pages/Chat.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1677,7 +1677,6 @@ export default defineComponent({
*/
msgStartMove (event: TouchEvent, msg: any) {
const logger = new Logger()
const sender = event.currentTarget as HTMLDivElement
logger.add(LogType.UI, '消息触屏点击事件开始 ……')
this.tags.msgTouch.msgOnTouchDown = true
this.tags.msgTouch.x = event.targetTouches[0].pageX
Expand All @@ -1694,7 +1693,6 @@ export default defineComponent({
setTimeout(() => {
logger.add(LogType.UI, '消息触屏长按判定:' + this.tags.msgTouch.msgOnTouchDown)
if (this.tags.msgTouch.msgOnTouchDown === true) {
sender.style.background = '#00000008'
this.showMsgMeun(event, msg)
}
}, 400)
Expand Down Expand Up @@ -1902,13 +1900,23 @@ export default defineComponent({
</script>

<style scoped>
/* 消息移除动画 */
/* 消息动画 */
.msglist-move {
transition: all .5s;
transition: all .3s;
}

.msglist-enter-active {
transition: all .4s;
}
.msglist-leave-active {
display: none;
transition: all .2s;
}
.msglist-enter-from {
transform: translateX(-20px);
opacity: 0;
}
.msglist-leave-to {
opacity: 0;
}

/* 更多功能面板动画 */
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Messages.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
@click="systemNoticeClick"></FriendBody>
<!-- 其他消息 -->
<FriendBody v-for="item in runtimeData.onMsgList"
:key="'inMessage-' + item.user_id ? item.user_id : item.group_id"
:key="'inMessage-' + (item.user_id ? item.user_id : item.group_id)"
:select="chat.show.id === item.user_id || (chat.show.id === item.group_id && chat.group_name != '')"
:menu="menu.select && menu.select == item"
:data="item" from="message"
Expand Down
2 changes: 2 additions & 0 deletions ssqq-web/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist
bin
3 changes: 3 additions & 0 deletions ssqq-web/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
.gitignore
yarn.lock
95 changes: 95 additions & 0 deletions ssqq-web/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
#!/usr/bin/env node

import * as http from 'http'
import * as fs from 'fs'
import Logger from 'log4js'

import { checkUpdate } from './update'

// 日志配置
const logger = Logger.getLogger('index')
logger.level = 'info'

let hostname
let port

// 获取输入参数
// 参数包括 hostname、port 和 help
const argv = process.argv.slice(2).reduce((acc, cur) => {
const [key, value] = cur.split('=')
acc[key] = value || true
return acc
}, {})
if(argv['hostname']) {
hostname = argv['hostname']
}
if(argv['port']) {
port = argv['port']
}
if(argv['help'] || !hostname || !port) {
// eslint-disable-next-line no-console
console.log(`
Stapxs QQ Lite 网页服务工具:
--hostname 指定服务运行的主机名
--port 指定服务运行的端口
--help 查看帮助
主仓库:https://github.com/Stapxs/Stapxs-QQ-Lite-2.0
网页服务工具:https://www.npmjs.com/package/ssqq-web
** 欢迎 star 项目,如果有问题请在主仓库提 issue **
`)
process.exit(0)
}

logger.info('正在初始化...')
let localVersion = '0.0.1'
// 检查是否存在 dist 文件夹
if (fs.existsSync('./dist')) {
try {
// 获取文件夹中的 package.json
const packageJson = fs.readFileSync('./dist/package.json', 'utf-8')
localVersion = JSON.parse(packageJson).version
logger.info(`本地版本号为: ${localVersion}`)
} catch (err) {
logger.error(`读取 package.json 失败: ${err}`)
}
}

// 检查更新
checkUpdate(localVersion)

// 创建服务
const server = http.createServer((req, res) => {
const url = req.url
if (url === '/') {
// 根路径下的请求映射到 dist 文件夹下的 index.html
fs.readFile('./dist/index.html', (err, data) => {
if (err) {
logger.error(`读取 index.html 失败: ${err}`)
res.statusCode = 404
res.end()
} else {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html')
res.end(data)
}
})
} else {
// 其他路径直接映射到 dist 文件夹下
fs.readFile(`./dist${url}`, (err, data) => {
if (err) {
logger.error(`读取 ${url} 失败: ${err}`)
res.statusCode = 404
res.end()
} else {
res.statusCode = 200
res.end(data)
}
})
}
})

server.listen(port, hostname, () => {
logger.info(`服务于 http://${hostname}:${port} 运行`)
})
26 changes: 26 additions & 0 deletions ssqq-web/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "ssqq-web",
"version": "1.0.3",
"description": "一个兼容 OneBot 的非官方网页版 QQ 客户端,Web 端快速启动包。",
"main": "index.ts",
"bin": {
"ssqq-web": "bin/index.js"
},
"scripts": {
"start": "tsc && node index.js",
"build": "tsc",
"test": "tsc && node index.js help"
},
"repository": "https://github.com/Stapxs/Stapxs-QQ-Lite-2.0",
"author": "Stapx Steve [林槐]",
"license": "Apache-2.0",
"private": false,
"dependencies": {
"log4js": "^6.9.1",
"request": "^2.88.2",
"semver-compare": "^1.0.0",
"typescript": "^5.6.3",
"unzipper": "^0.12.3"
},
"devDependencies": {}
}
6 changes: 6 additions & 0 deletions ssqq-web/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"compilerOptions": {
"esModuleInterop": true,
"outDir": "bin"
}
}
64 changes: 64 additions & 0 deletions ssqq-web/update.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
#!/usr/bin/env node

import cmp from 'semver-compare'
import Logger from 'log4js'
import request from 'request'
import unzipper from 'unzipper'
import fs from 'fs'

// 日志配置
const logger = Logger.getLogger('update')
logger.level = 'info'


export function checkUpdate(nowVersion: string) {
// 检查本体版本
fetch('https://api.github.com/repos/Stapxs/Stapxs-QQ-Lite-2.0/releases/latest')
.then(res => res.json())
.then(json => {
const version = json.tag_name.slice(1)
logger.info(`Stapxs QQ Lite 当前版本: ${version}, 本地版本: ${nowVersion}`)
if (cmp(nowVersion, version) === -1) {
// 本地版本小于线上版本, 需要更新
logger.info('发现新版本, 正在更新...')
logger.info(`运行路径: ${process.cwd()}`)
// 下载新版本
const assetList = json.assets
assetList.forEach(asset => {
const name = asset.name
// 寻找结尾为 -web.zip 的文件
if (name.endsWith('-web.zip')) {
// 删除 dist 文件夹
if(fs.existsSync('./dist')) {
fs.rm('./dist', { recursive: true }, err => {
if (err) {
logger.error(`删除 dist 文件夹失败: ${err}`)
}
}
)
}
const downloadUrl = asset.browser_download_url
logger.info(`下载地址: ${downloadUrl}`)
// 下载文件并解压
request(downloadUrl).pipe(unzipper.Extract({ path: './' }))
.on('close', () => {
logger.info('更新完成')
// 保存版本缓存
fs.writeFile('./dist/package.json', JSON.stringify({
version: version
}), err => {
if (err) {
logger.error(`保存版本缓存失败: ${err}`)
}
})
})
}
})
} else {
logger.info('当前已是最新版本')
}
})
.catch(err => {
logger.error(`检查更新失败: ${err}`)
})
}

0 comments on commit 2f6a732

Please sign in to comment.