Flarum扩展开发记录

扩展要实现的功能：输入 ‘ / ‘ 时列出同 group 的用户以供@

基于 flarum/core ^1.7

最终实现：https://github.com/Marchccc/flarum-ext-mentions-group-users

讨论：https://discuss.flarum.org/d/32768-mentions-group-users

extiverse：https://extiverse.com/extension/marchccc/flarum-ext-mentions-group-users

安装Flarum

https://docs.flarum.org/install/#installing

composer create-project flarum/flarum . -vvv

目录结构:

jun@zhangjuengdeMBP test % tree -L 1
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── composer.json
├── composer.lock
├── config.php     # 站点配置文件
├── extend.php     # 代码扩展入口
├── flarum
├── public         # 根目录
├── site.php
├── storage
└── vendor

设置 composer 加载本地模块

https://docs.flarum.org/extend/start/#extension-packaging

composer config repositories.0 path "packages/*"

建立 packages 目录，进入目录执行 flarum-cli init

我的packages目录结构：

packages
└── marchccc
    └── flarum-ext-mentions-group-users
        ├── LICENSE.md
        ├── README.md
        ├── composer.json
        ├── composer.lock
        ├── extend.php
        ├── js
        ├── less
        ├── locale
        ├── tests
        └── vendor

修改 Flarum 的 composer.json

"require": {
    ...
    "marchccc/flarum-ext-mentions-group-users": "dev-main"
    ...
}

"repositories": [{
        "type": "path",
        "url": "./packages/marchccc/flarum-ext-mentions-group-users"
}]

执行

composer dump-autoload
composer update

编译 js

https://docs.flarum.org/extend/frontend#adminjs-and-forumjs

cd /packages/marchccc/flarum-ext-mentions-group-users/js
npm run dev/build

在编辑器输入 ‘/‘ 时，列出同组用户供@

https://docs.flarum.org/extend/frontend/#changing-the-ui-part-1

PHP&JS API doc:https://github.com/flarum/api-docs

其实就是要找到编辑器的这个组件，监听输入变化。

通过审查元素，看到class名为TextEditor

在API doc找到这个组件

思路，extend TextEditor组件的oninput方法

import app from 'flarum/forum/app';
import { extend } from 'flarum/common/extend';
import TextEditor from 'flarum/common/components/TextEditor';


app.initializers.add('marchccc/flarum-ext-mentions-group-users', () => {
  // console.log('[marchccc/flarum-ext-mentions-group-users] Hello, forum!');

  extend(TextEditor.prototype, 'oninput', function (n, value) {
    console.log(value);
  });

});

这样就可以获取到在 TextEditor 输入的内容

其实官方有@功能：https://github.com/flarum/mentions

所以代码直接参考这里，只是略做调整将触发显示列表的’ @ ‘改为’ / ‘，避免和官方的@冲突。

前端：

app.store.find('group_users', {}).then((results) => {
  results.forEach((u) => {
    returnedUserIds.add(u.id());
    returnedUsers.push(u);
  });
});

extend.php

use Marchccc\Mention\Api\Controller\GroupUsersController;

return [
	...
	(new Extend\Routes('api'))
		->get('/group_users',  '', GroupUsersController::class),
];

GroupUsersController.php

来自ChatGPT，提词：我在开发Flarum扩展，在控制器里，如何获取当前用户的所有群组，并且获取当前用户所有群组里的所有用户？

<?php

namespace Marchccc\Mention\Api\Controller;

use Flarum\Api\Controller\AbstractListController;
use Flarum\Api\Serializer\UserSerializer;
use Psr\Http\Message\ServerRequestInterface;
use Tobscure\JsonApi\Document;

class GroupUsersController extends AbstractListController
{
    public $serializer = UserSerializer::class;

    /**
     * {@inheritdoc}
     */
    public function data(ServerRequestInterface $request, Document $document)
    {
        $actor = $request->getAttribute('actor');

        $groups = $actor->groups()->get();
        $members = [];
        foreach ($groups as $group) {
            $members = array_merge($members, $group->users()->get()->where('id', '!=', $actor->id)->all());
        }
        return $members;
    }
}

效果: