trpgengine/client

TRPG即时IM通讯软件客户端，基于React 与 React Native + Redux技术

client's Issues

点击通知无法跳转到对应的页面

使用微软的在线服务查看文档

使用微软的在线服务查看文档

https://products.office.com/zh-CN/office-online/view-office-documents-online

考虑到有很多现有TRPG的文档是现成的。但是浏览器原生没有好的在线显示这些文档的解决方案
因此考虑使用微软官方提供的在线服务
而且该在线服务查看的文档是响应式的。可以考虑添加到侧边栏显示

表情包功能

可以考虑增加表情包功能

包括自定义表情包与官方表情包

可以考虑在服务端Chat模块动态读取一套表情包

笔记本图片上传

可以考虑增加一个笔记本上传本地图片的功能，通过封装第三方图床将图片放在笔记中。

同时需要考虑到ctrl+v从剪切板复制图片的功能

TPRG游戏平台讨论

请畅所欲言

滚动到最新的按钮会挡住头像点击查看信息

v0.1.0 无法自动登录

提示babelHelpers is not defined

增加用户引导

基于 shepherd

关于上传图片后输入框中无法靠点击右边部分解除图片的选中状态

上传图片后输入框中会显示图片。当点击输入框右边空白部分的时候会选中图片，之后：

• 点击输入框左边空白部分可以解除选中
• 按向右方向键可以将光标移到图片右侧从而解除选中
• 点击输入框右边空白部分无法解除选中

另外，处于选中状态时，无法使用Del或者退格键删除图片，不知是否有意为之？

与之相对的是mention element，插入后光标直接移到右边；选中后无论点击左边还是右边的输入框空白部分都能解除选中。感觉更符合直觉？

在尝试边读代码边看能否找到解决方案，但无奈虚拟机今天莫名cpu拉满疯狂卡死。。还在研究中 😞 目前看来个人猜测根源可能在于判定ImageElement是否被选中的逻辑与MentionElement的不一致？

v0.1.0上传附件无法正常上传

POST https://trpgapi.moonrailgun.com/file/upload/temporary 404

搜索历史记录要求3个字以上(不包括三个字)有点太难了，改成2个字(包括两个字)比较好

开发模式切换页面时会出错，刷新后恢复

输入注册过的账号点击“登陆"后就转到错误页面。

刷新一次或几次后可以进入 http://127.0.0.1:8089/main/personal/friends 界面。之后可以进行正常创建团，上传头像等操作。但每次切换页面是都会转到错误页面（比如在/main/group/7a60b0f0-c288-11eb-bd53-97166aeb258f/lobby 和 /main/personal/friends之间切换。错误信息示例如下：

后台收到的错误报告示例如下：

trpg:webservice:koa <-- OPTIONS /report/error +3s
  trpg:webservice:koa --> OPTIONS /report/error 204 1ms  +1ms
  trpg:webservice:koa <-- POST /report/error +2ms
report err from ::ffff:127.0.0.1 stack 
    at Lifecycle (webpack-internal:///./node_modules/react-router/esm/react-router.js:203:29)
    at Redirect (webpack-internal:///./node_modules/react-router/esm/react-router.js:304:28)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:649:29)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:782:6)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:782:6)
    at eval (webpack-internal:///./src/web/routes/Main/Content/PageContent.tsx:77:90)
    at eval (webpack-internal:///./src/web/routes/Main/Content/PageContent.tsx:99:23)
    at eval (webpack-internal:///./src/web/routes/Main/Content/Group/GroupProvider.tsx:20:25)
    at eval (webpack-internal:///./src/web/routes/Main/Content/Group/index.tsx:38:72)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:447:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:649:29)
    at MainContent
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:782:6)
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:782:6)
    at eval (webpack-internal:///./src/web/routes/Main/SidebarContext.tsx:50:66)
    at MainRoute
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:447:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:649:29)
    at eval (webpack-internal:///./src/shared/components/portal/buildPortal.tsx:41:67)
    at eval (webpack-internal:///./src/web/components/portal/PortalProvider.tsx:16:67)
    at eval (webpack-internal:///./src/web/components/rtc/GlobalVoice.tsx:33:211)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:15:20)
    at eval (webpack-internal:///./src/rtc/redux/index.tsx:98:12)
    at eval (webpack-internal:///./src/rtc/RoomContext.tsx:226:66)
    at eval (webpack-internal:///./src/web/components/PWAContext.tsx:55:66)
    at CustomProvider (webpack-internal:///./src/web/routes/App.tsx:53:74)
    at div
    at ErrorBoundary (webpack-internal:///./src/web/containers/ErrorBoundary.tsx:47:43)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:82:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:56:35)
    at App
    at InnerLoadable (webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:162:34)
    at LoadableWithChunkExtractor
    at Loadable
    at FormProvider (webpack-internal:///./node_modules/rc-field-form/es/FormContext.js:19:31)
    at LocaleProvider (webpack-internal:///./node_modules/antd/es/locale-provider/index.js:34:87)
    at ProviderChildren (webpack-internal:///./node_modules/antd/es/config-provider/index.js:77:24)
    at LocaleReceiver (webpack-internal:///./node_modules/antd/es/locale-provider/LocaleReceiver.js:29:87)
    at ConfigProvider (webpack-internal:///./node_modules/antd/es/config-provider/index.js:185:13)
    at Ge (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:689:60)
    at eval (webpack-internal:///./src/shared/context/ThemeContext.tsx:51:66)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:15:20)
  trpg:storage:sql Executing (default): INSERT INTO `report_error` (`id`,`ip`,`ua`,`version`,`message`,`stack`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?,?,?,?,?); +147ms
  trpg:webservice:koa --> POST /report/error 200 152ms 12b +5ms

提及到自己则高亮显示

bbcode [at] 如果是自己则高亮

手机端上传图片一直失败

`$ npm run dev`时出现的错误

npm version: 6.13.4
node version: v10.19.0

mysql和redis-server正常运行；TRPGEngine的Server端正常运行。

试了$ npm uninstall 再$ npm install。依然遇到同样问题：

$ PLATFORM=web npm run dev

> [email protected] dev /home/glkwhr/Documents/Codes/trpg_engine/Client
> cross-env NODE_ENV=development yarn run dev:main

yarn run v1.22.10
$ cross-env NODE_OPTIONS='--max_old_space_size=4096' webpack serve --progress --color --config ./build/config/webpack.config.js
打包环境:
 环境: development 
 平台: web

✖ 🎲  TRPG Game
  Compiled with some errors in 3.33m

✖ ｢wdm｣: assets by info 57.2 MiB [immutable]
  assets by path *.js 56.8 MiB
    assets by chunk 33.6 MiB (id hint: vendors) 29 assets
  assets by path assets/ 451 KiB 8 assets
assets by path src/web/assets/ 1.15 MiB
  assets by path src/web/assets/img/ 545 KiB 23 assets
  assets by path src/web/assets/fonts/ 629 KiB 2 assets
  assets by path src/web/assets/lib/ 405 bytes 2 assets
  asset src/web/assets/css/iconfont.css 598 bytes [emitted] [from: src/web/assets/css/iconfont.css] [copied]
asset dll_vendor_b86d0fc400587605f6d0.js.map 339 KiB [emitted] [from: build/config/dll/dll_vendor.js.map] [copied]
asset dll_vendor_b86d0fc400587605f6d0.js 75.1 KiB [emitted] [from: build/config/dll/dll_vendor.js] [copied]
asset autotrack.js 24.2 KiB [emitted] [from: build/template/autotrack.js] [copied]
asset favicon.ico 4.19 KiB [emitted]
asset index.html 1.34 KiB [emitted]
asset pre-loading.css 1.29 KiB [emitted] [from: build/template/pre-loading.css] [copied]
orphan modules 674 KiB [orphan] 334 modules
runtime modules 61 KiB 27 modules
modules by path ./node_modules/ 17 MiB
  javascript modules 16.4 MiB 4671 modules
  json modules 628 KiB 7 modules
modules by path ./src/ 2.05 MiB
  modules by path ./src/web/ 1.32 MiB 413 modules
  modules by path ./src/shared/ 603 KiB 194 modules
  modules by path ./src/rtc/ 144 KiB 23 modules
  ./src/portal/components/Loading.tsx 800 bytes [built] [code generated]
modules by path delegated ./node_modules/ 84 bytes
  delegated ./node_modules/axios/index.js from dll-reference vendor_b86d0fc400587605f6d0 42 bytes [built] [code generated]
  delegated ./node_modules/moment/moment.js from dll-reference vendor_b86d0fc400587605f6d0 42 bytes [built] [code generated]
8 modules

WARNING in ./src/shared/api/rn-storage.api.ts 285:33-46
export 'NotFoundError' (imported as 'NotFoundError') was not found in 'react-native-storage' (possible exports: default)
 @ ./src/web/index.tsx 156:0-53 231:12-25 237:12-25

ERROR in /home/glkwhr/Documents/Codes/trpg_engine/Client/src/playground/editor/layout-editor/cups/shared.tsx
8:49-73
[tsl] ERROR in /home/glkwhr/Documents/Codes/trpg_engine/Client/src/playground/editor/layout-editor/cups/shared.tsx(8,50)
      TS2307: Cannot find module 'rc-select/es/interface' or its corresponding type declarations.

ERROR in /home/glkwhr/Documents/Codes/trpg_engine/Client/src/shared/api/rn-storage.api.ts
./src/shared/api/rn-storage.api.ts 2:18-31
[tsl] ERROR in /home/glkwhr/Documents/Codes/trpg_engine/Client/src/shared/api/rn-storage.api.ts(2,19)
      TS2614: Module '"react-native-storage"' has no exported member 'NotFoundError'. Did you mean to use 'import NotFoundError from "react-native-storage"' instead?
 @ ./src/web/index.tsx 156:0-53 231:12-25 237:12-25

webpack 5.38.1 compiled with 2 errors and 1 warning in 200103 ms

关于项目的疑问

您好 我看到目前角色卡已经支持多个跑团规则

但是我没太看懂这些规则的数据在什么地方
假如我想让他支持dnd3r 那么要怎么做呢

顺便 目前是单纯的做一个带骰子bot和角色卡的 聊天服务吗 会不会做一些额外支持呢（比如战斗地图等内容）

切换频道会丢失当前输入的内容，有点麻烦

用户头像图片预览

用户可以通过点击用户头像来查看完整的用户头像图片

二次确认弹窗的坐标有问题，导致无法点选

切换频道时滚动到底部不是很work

侧边栏有点窄，可以考虑加宽一点（特别是对于桌面端来说）

增加一个@功能

对于即时聊天类工具会非常有用

因此需要考虑把textarea修改为可编辑div

[!]把面板隐藏了还是可以通过消息推送来获取最新的内容（当然这对手机来说无效，因为手机端的推送有问题）

Web app加载出错

浏览器：Google Chrome Version 91.0.4472.77 (Official Build) (64-bit)

请问下有没有思路这可能是什么原因导致的？

如图：

TRPGEngine服务端已启动。客户端启动未出错：

$ yarn run dev
yarn run v1.22.10
$ cross-env NODE_ENV=development yarn run dev:main
$ cross-env NODE_OPTIONS='--max_old_space_size=4096' webpack serve --progress --color --config ./build/config/webpack.config.js
打包环境:
 环境: development 
 平台: undefined

✔ 🎲  TRPG Game
  Compiled successfully in 3.60m


✔ 🎲  TRPG Game
  Compiled successfully in 2.28s

附错误信息：

[HMR] Waiting for update signal from WDS...
react-dom.development.js?61bb:26244 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
common.ts?77d6:19 common utils loaded!
app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12184 Uncaught TypeError: Cannot read property 'register' of undefined
    at PostHogLib.register (es.js?7ba6:5440)
    at initAnalytics (analytics-helper.ts?98aa:23)
    at eval (init.tsx?4cce:22)
    at Module../src/web/init.tsx (app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:1614)
    at __webpack_require__ (app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12181)
    at fn (app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12464)
    at eval (index.tsx:4)
    at Module../src/web/index.tsx (app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:1603)
    at __webpack_require__ (app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12181)
    at app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:13359
PostHogLib.register @ es.js?7ba6:5440
initAnalytics @ analytics-helper.ts?98aa:23
eval @ init.tsx?4cce:22
./src/web/init.tsx @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:1614
__webpack_require__ @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12181
fn @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12464
eval @ index.tsx:4
./src/web/index.tsx @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:1603
__webpack_require__ @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:12181
(anonymous) @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:13359
(anonymous) @ app.d34d56af3936212a57c5.js?b238329ea78f3d6609d1:13362
buildRegFn.ts?fd07:20 Uncaught (in promise) Error: trpgStorage not regist
    at get (buildRegFn.ts?fd07:20)
    at eval (language.ts?b6cf:54)
    at step (language.ts:142)
    at Object.eval [as next] (language.ts:72)
    at eval (language.ts:44)
    at new Promise (<anonymous>)
    at __awaiter (language.ts:23)
    at saveLanguage (language.ts?b6cf:53)
    at Object.cacheUserLanguage (language.ts?b6cf:74)
    at setLng (i18next.js?5f34:2093)

图片信息无法显示

图片上传成功后在输入框中无法显示；发送出去后在聊天记录中依然无法显示：

获取图片的请求失败：

Request URL: https://images.weserv.nl/?url=https://img03.sogoucdn.com/app/a/100520146/ebe6ae3f7729f15f2e55c0e53b311ee8
Request Method: GET
Status Code: 404 
Remote Address: 104.21.79.95:443
Referrer Policy: strict-origin-when-cross-origin

尝试浏览器直接访问URL，response如下：

{"status":"error","code":404,"message":"The hostname of the origin is unresolvable (DNS) or blocked by policy."}

试着直接访问sogoucdn的连接（https://img03.sogoucdn.com/app/a/100520146/ebe6ae3f7729f15f2e55c0e53b311ee8）：

人工忽略警告后可以获取图片：

创建@的时候会覆盖掉原来的输入

应当是插入

保存人物卡的loading位置有些问题

人物卡编辑描述不会实时更新

团中删除人物卡二次确认框能否最前显示

当前显示在底下的操作十分糟糕

群组解散时的模态框显示有点问题

重复添加人物卡的时候显示有问题

没有权限的成员也能修改群组信息

修改一下创建人物卡的界面

创建人物卡界面左边的从人物库里创建具有迷惑性。

导致让人想不到需要搜索模板

角色卡信息加载时需要更多的loading

目前没有loading对于不了解的人不知道在做什么

发送搜索的表情有点问题