fix: #761

refactor

.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 # Set default charset
 charset = utf-8
 
-# 2 space indentation
+# 4 space indentation
 [*.{cjs,mjs,js,jsx,ts,tsx,css,scss,sass,html,json}]
 indent_style = space
 indent_size = 4

.env.universal

@@ -0,0 +1,2 @@
+VITE_BUILD_TYPE = Production
+VITE_BUILD_PLATFORM = Universal

.eslintrc.cjs

@@ -1,64 +0,0 @@
-module.exports = {
-    'env': {
-        'browser': true,
-        'es2021': true,
-        'node': true
-    },
-    'ignorePatterns': ['src/core/proto/'],
-    'extends': [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended'
-    ],
-    'overrides': [
-        {
-            'env': {
-                'node': true
-            },
-            'files': [
-                '.eslintrc.{js,cjs}'
-            ],
-            'parserOptions': {
-                'sourceType': 'script'
-            }
-        }
-    ],
-    'parser': '@typescript-eslint/parser',
-    'parserOptions': {
-        'ecmaVersion': 'latest',
-        'sourceType': 'module'
-    },
-    'plugins': [
-        '@typescript-eslint',
-        'import'
-    ],
-    'settings': {
-        'import/parsers': {
-            '@typescript-eslint/parser': ['.ts']
-        },
-        'import/resolver': {
-            'typescript': {
-                'alwaysTryTypes': true
-            }
-        }
-    },
-    'rules': {
-        'indent': [
-            'error',
-            4
-        ],
-        'linebreak-style': [
-            'error',
-            'unix'
-        ],
-        'semi': [
-            'error',
-            'always'
-        ],
-        'no-unused-vars': 'off',
-        'no-async-promise-executor': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-        'object-curly-spacing': ['error', 'always'],
-    }
-};

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -10,13 +10,12 @@ body:
         在提交新的 Bug 反馈前，请确保您：
         * 已经搜索了现有的 issues，并且没有找到可以解决您问题的方法
         * 不与现有的某一 issue 重复
-        * 不涉及[已经停止维护的特性](https://github.com/NapNeko/NapCatQQ?tab=readme-ov-file#挥别昨日)，例如 CQ 码
   - type: input
     id: system-version
     attributes:
       label: 系统版本
       description: 运行 QQNT 的系统版本
-      placeholder: Windows 10 Pro Workstation 22H2
+      placeholder: Windows 11 24H2
     validations:
       required: true
   - type: input
@@ -24,7 +23,7 @@ body:
     attributes:
       label: QQNT 版本
       description: 可在 QQNT 的「关于」的设置页中找到
-      placeholder: 9.9.7-21804
+      placeholder: 9.9.16-29927
     validations:
       required: true
   - type: input
@@ -40,21 +39,21 @@ body:
     attributes:
       label: OneBot 客户端
       description: 连接至 NapCat 的客户端版本信息
-      placeholder: Overflow 2.16.0-2cf7991-SNAPSHOT
+      placeholder: Karin 1.0.0
     validations:
       required: true
   - type: textarea
     id: what-happened
     attributes:
       label: 发生了什么?
-      description: 填写你认为的 NapCat 的不正常行为
+      description: 填写你认为的 NapCat 的异常行为
     validations:
       required: true
   - type: textarea
     id: how-reproduce
     attributes:
       label: 如何复现
-      description: 填写应当如何操作才能触发这个不正常行为
+      description: 填写应当如何操作才能触发这个异常行为
       placeholder: |
         1. xxx
         2. xxx

.github/dependabot.yml

@@ -1,11 +1,6 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"

.github/workflows/build.yml

@@ -1,5 +1,7 @@
 name: "Build Action"
 on:
+  push:
+  pull_request:
   workflow_dispatch:
 
 permissions: write-all
@@ -10,23 +12,15 @@ jobs:
     steps:
       - name: Clone Main Repository
         uses: actions/checkout@v4
-      with:
-          repository: 'NapNeko/NapCatQQ'
-          submodules: true
-          ref: main
-          token: ${{ secrets.NAPCAT_BUILD }}
       - name: Use Node.js 20.X
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
-    - name: Build NuCat Framework
+      - name: Build NapCat.Framework
         run: |
-          npm i
-          npm run build:framework
-          cd dist
-          npm i --omit=dev 
+          npm i && cd napcat.webui && npm i && cd .. || exit 1
+          npm run build:framework && npm run depend || exit 1
           rm package-lock.json
-          cd ..
       - name: Upload Artifact
         uses: actions/upload-artifact@v4
         with:
@@ -37,23 +31,15 @@ jobs:
     steps:
       - name: Clone Main Repository
         uses: actions/checkout@v4
-          with:
-                repository: 'NapNeko/NapCatQQ'
-                submodules: true
-                ref: main
-                token: ${{ secrets.NAPCAT_BUILD }}
       - name: Use Node.js 20.X
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
-        - name: Build NuCat LiteLoader
+      - name: Build NapCat.Shell
         run: |
-                npm i
-                npm run build:shell
-                cd dist
-                npm i --omit=dev
+          npm i && cd napcat.webui && npm i && cd .. || exit 1
+          npm run build:shell && npm run depend || exit 1
           rm package-lock.json
-                cd ..
       - name: Upload Artifact
         uses: actions/upload-artifact@v4
         with:

.github/workflows/release.yml

@@ -49,6 +49,9 @@ jobs:
     - name: Build NuCat Framework
       run: |
           npm i
+          cd napcat.webui
+          npm i
+          cd ..
           npm run build:framework
           cd dist
           npm i --omit=dev
@@ -78,6 +81,9 @@ jobs:
         - name: Build NuCat Shell
           run: |
                 npm i 
+                cd napcat.webui
+                npm i
+                cd ..
                 npm run build:shell
                 cd dist
                 npm i --omit=dev
@@ -93,15 +99,18 @@ jobs:
     needs: [Build-LiteLoader,Build-Shell]
     runs-on: ubuntu-latest
     steps:
+
+    - name: Clone Main Repository
+      uses: actions/checkout@v4
+      with:
+            repository: 'NapNeko/NapCatQQ'
+            submodules: true
+            ref: main
+            token: ${{ secrets.NAPCAT_BUILD }}
+
     - name: Download All Artifact
       uses: actions/download-artifact@v4
-    # - name: Compress subdirectories
-    #   run: |
-    #     cd ./NapCat.Shell/
-    #     zip -q -r NapCat.Shell.zip *
-    #     cd ..
-    #     rm ./NapCat.Shell.zip -rf
-    #     mv ./NapCat.Shell/NapCat.Shell.zip ./
+      
     - name: Compress subdirectories
       run: |
         cd ./NapCat.Shell/
@@ -114,6 +123,16 @@ jobs:
         rm ./NapCat.Framework.zip -rf
         mv ./NapCat.Shell/NapCat.Shell.zip ./
         mv ./NapCat.Framework/NapCat.Framework.zip ./
+
+        mkdir ./NapCat.Framework.Windows.Once
+        unzip -q ./external/LiteLoaderWrapper.zip -d ./NapCat.Framework.Windows.Once
+        cd ./NapCat.Framework.Windows.Once
+        ls 
+        mkdir -p ./LL/plugins/NapCatQQ
+        unzip -q ../NapCat.Framework.zip -d ./LL/plugins/NapCatQQ
+        zip -q -r NapCat.Framework.Windows.Once.zip *
+        cd ..
+        mv ./NapCat.Framework.Windows.Once/NapCat.Framework.Windows.Once.zip ./
     - name: Extract version from tag
       run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
       
@@ -129,4 +148,5 @@ jobs:
         files: |
           NapCat.Framework.zip
           NapCat.Shell.zip
+          NapCat.Framework.Windows.Once.zip
         draft: true

.gitignore

@@ -5,10 +5,9 @@ pnpm-lock.yaml
 out/
 dist/
 /src/core.lib/common/
-/localdebug/
+devconfig/*
 
 # Editor
-.vscode/*
 !.vscode/extensions.json
 .idea/*
 

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "explorer.fileNesting.enabled": true,
+    "explorer.fileNesting.expand": false,
+    "explorer.fileNesting.patterns": {
+        ".env.universal": ".env.*",
+        "tsconfig.json": "tsconfig.*.json, env.d.ts, vite.config.ts",
+        "package.json": "package-lock.json, eslint*, .prettier*, .editorconfig, manifest.json, logo.png, .gitignore, LICENSE"
+    },
+    "css.customData": [".vscode/tailwindcss.json"],
+}

.vscode/tailwindcss.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}

LICENSE

@@ -1,343 +1,19 @@
-   GNU GENERAL PUBLIC Without Social media promotion LICENSE 
-                       Version 2, June 1991
+Limited Redistribution License for NapCat
 
- Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
+Copyright © 2024 Mlikiowa
 
-                            Preamble
+1. Usage and Reproduction:
+   - Unauthorized use, reproduction, modification, or distribution of this code is prohibited without explicit permission from the main author of the NapCat repository.
    
-  The licenses for most software are designed to take away your
-freedom to share and change it.  By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change free
-software--to make sure the software is free for all its users.  This
-General Public License applies to most of the Free Software
-Foundation's software and to any other program whose authors commit to
-using it.  (Some other Free Software Foundation software is covered by
-the GNU Lesser General Public License instead.)  You can apply it to
-your programs, too.
+2. Redistribution:
+   - Redistribution of this code is permitted, provided that the full text of this license is included, and the source and copyright information is clearly stated.
+   - Minor modifications and extensions are allowed for redistribution purposes, but the modified code must not be publicly released.
 
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-this service if you wish), that you receive source code or can get it
-if you want it, that you can change the software or use pieces of it
-in new free programs; and that you know you can do these things.
+3. Non-Commercial Use:
+   - This code is not to be used for any commercial purposes.
 
-  To protect your rights, we need to make restrictions that forbid
-anyone to deny you these rights or to ask you to surrender the rights.
-These restrictions translate to certain responsibilities for you if you
-distribute copies of the software, or if you modify it.
+4. Additional Permissions:
+   - Any rights not explicitly addressed in this license must be requested from and granted by the main author of the NapCat repository.
 
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must give the recipients all the rights that
-you have.  You must make sure that they, too, receive or can get the
-source code.  And you must show them these terms so they know their
-rights.
-
-  We protect your rights with two steps: (1) copyright the software, and
-(2) offer you this license which gives you legal permission to copy,
-distribute and/or modify the software.
-
-  Also, for each author's protection and ours, we want to make certain
-that everyone understands that there is no warranty for this free
-software.  If the software is modified by someone else and passed on, we
-want its recipients to know that what they have is not the original, so
-that any problems introduced by others will not reflect on the original
-authors' reputations.
-
-  Finally, any free program is threatened constantly by software
-patents.  We wish to avoid the danger that redistributors of a free
-program will individually obtain patent licenses, in effect making the
-program proprietary.  To prevent this, we have made it clear that any
-patent must be licensed for everyone's free use or not licensed at all.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                    GNU GENERAL PUBLIC LICENSE
-   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-  0. This License applies to any program or other work which contains
-a notice placed by the copyright holder saying it may be distributed
-under the terms of this General Public License.  The "Program", below,
-refers to any such program or work, and a "work based on the Program"
-means either the Program or any derivative work under copyright law:
-that is to say, a work containing the Program or a portion of it,
-either verbatim or with modifications and/or translated into another
-language.  (Hereinafter, translation is included without limitation in
-the term "modification".)  Each licensee is addressed as "you".
-
-Activities other than copying, distribution and modification are not
-covered by this License; they are outside its scope.  The act of
-running the Program is not restricted, and the output from the Program
-is covered only if its contents constitute a work based on the
-Program (independent of having been made by running the Program).
-Whether that is true depends on what the Program does.
-
-  1. You may copy and distribute verbatim copies of the Program's
-source code as you receive it, in any medium, provided that you
-conspicuously and appropriately publish on each copy an appropriate
-copyright notice and disclaimer of warranty; keep intact all the
-notices that refer to this License and to the absence of any warranty;
-and give any other recipients of the Program a copy of this License
-along with the Program.
-
-You may charge a fee for the physical act of transferring a copy, and
-you may at your option offer warranty protection in exchange for a fee.
-
-  2. You may modify your copy or copies of the Program or any portion
-of it, thus forming a work based on the Program, and copy and
-distribute such modifications or work under the terms of Section 1
-above, provided that you also meet all of these conditions:
-
-    a) You must cause the modified files to carry prominent notices
-    stating that you changed the files and the date of any change.
-
-    b) You must cause any work that you distribute or publish, that in
-    whole or in part contains or is derived from the Program or any
-    part thereof, to be licensed as a whole at no charge to all third
-    parties under the terms of this License.
-
-    c) If the modified program normally reads commands interactively
-    when run, you must cause it, when started running for such
-    interactive use in the most ordinary way, to print or display an
-    announcement including an appropriate copyright notice and a
-    notice that there is no warranty (or else, saying that you provide
-    a warranty) and that users may redistribute the program under
-    these conditions, and telling the user how to view a copy of this
-    License.  (Exception: if the Program itself is interactive but
-    does not normally print such an announcement, your work based on
-    the Program is not required to print an announcement.)
-
-    d）You may use this software in accordance with the above terms, 
-    but you are not allowed to promote this project or your projects
-    based on this project on any public social media.
-
-These requirements apply to the modified work as a whole.  If
-identifiable sections of that work are not derived from the Program,
-and can be reasonably considered independent and separate works in
-themselves, then this License, and its terms, do not apply to those
-sections when you distribute them as separate works.  But when you
-distribute the same sections as part of a whole which is a work based
-on the Program, the distribution of the whole must be on the terms of
-this License, whose permissions for other licensees extend to the
-entire whole, and thus to each and every part regardless of who wrote it.
-
-Thus, it is not the intent of this section to claim rights or contest
-your rights to work written entirely by you; rather, the intent is to
-exercise the right to control the distribution of derivative or
-collective works based on the Program.
-
-In addition, mere aggregation of another work not based on the Program
-with the Program (or with a work based on the Program) on a volume of
-a storage or distribution medium does not bring the other work under
-the scope of this License.
-
-  3. You may copy and distribute the Program (or a work based on it,
-under Section 2) in object code or executable form under the terms of
-Sections 1 and 2 above provided that you also do one of the following:
-
-    a) Accompany it with the complete corresponding machine-readable
-    source code, which must be distributed under the terms of Sections
-    1 and 2 above on a medium customarily used for software interchange; or,
-
-    b) Accompany it with a written offer, valid for at least three
-    years, to give any third party, for a charge no more than your
-    cost of physically performing source distribution, a complete
-    machine-readable copy of the corresponding source code, to be
-    distributed under the terms of Sections 1 and 2 above on a medium
-    customarily used for software interchange; or,
-
-    c) Accompany it with the information you received as to the offer
-    to distribute corresponding source code.  (This alternative is
-    allowed only for noncommercial distribution and only if you
-    received the program in object code or executable form with such
-    an offer, in accord with Subsection b above.)
-
-The source code for a work means the preferred form of the work for
-making modifications to it.  For an executable work, complete source
-code means all the source code for all modules it contains, plus any
-associated interface definition files, plus the scripts used to
-control compilation and installation of the executable.  However, as a
-special exception, the source code distributed need not include
-anything that is normally distributed (in either source or binary
-form) with the major components (compiler, kernel, and so on) of the
-operating system on which the executable runs, unless that component
-itself accompanies the executable.
-
-If distribution of executable or object code is made by offering
-access to copy from a designated place, then offering equivalent
-access to copy the source code from the same place counts as
-distribution of the source code, even though third parties are not
-compelled to copy the source along with the object code.
-
-  4. You may not copy, modify, sublicense, or distribute the Program
-except as expressly provided under this License.  Any attempt
-otherwise to copy, modify, sublicense or distribute the Program is
-void, and will automatically terminate your rights under this License.
-However, parties who have received copies, or rights, from you under
-this License will not have their licenses terminated so long as such
-parties remain in full compliance.
-
-  5. You are not required to accept this License, since you have not
-signed it.  However, nothing else grants you permission to modify or
-distribute the Program or its derivative works.  These actions are
-prohibited by law if you do not accept this License.  Therefore, by
-modifying or distributing the Program (or any work based on the
-Program), you indicate your acceptance of this License to do so, and
-all its terms and conditions for copying, distributing or modifying
-the Program or works based on it.
-
-  6. Each time you redistribute the Program (or any work based on the
-Program), the recipient automatically receives a license from the
-original licensor to copy, distribute or modify the Program subject to
-these terms and conditions.  You may not impose any further
-restrictions on the recipients' exercise of the rights granted herein.
-You are not responsible for enforcing compliance by third parties to
-this License.
-
-  7. If, as a consequence of a court judgment or allegation of patent
-infringement or for any other reason (not limited to patent issues),
-conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot
-distribute so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you
-may not distribute the Program at all.  For example, if a patent
-license would not permit royalty-free redistribution of the Program by
-all those who receive copies directly or indirectly through you, then
-the only way you could satisfy both it and this License would be to
-refrain entirely from distribution of the Program.
-
-If any portion of this section is held invalid or unenforceable under
-any particular circumstance, the balance of the section is intended to
-apply and the section as a whole is intended to apply in other
-circumstances.
-
-It is not the purpose of this section to induce you to infringe any
-patents or other property right claims or to contest validity of any
-such claims; this section has the sole purpose of protecting the
-integrity of the free software distribution system, which is
-implemented by public license practices.  Many people have made
-generous contributions to the wide range of software distributed
-through that system in reliance on consistent application of that
-system; it is up to the author/donor to decide if he or she is willing
-to distribute software through any other system and a licensee cannot
-impose that choice.
-
-This section is intended to make thoroughly clear what is believed to
-be a consequence of the rest of this License.
-
-  8. If the distribution and/or use of the Program is restricted in
-certain countries either by patents or by copyrighted interfaces, the
-original copyright holder who places the Program under this License
-may add an explicit geographical distribution limitation excluding
-those countries, so that distribution is permitted only in or among
-countries not thus excluded.  In such case, this License incorporates
-the limitation as if written in the body of this License.
-
-  9. The Free Software Foundation may publish revised and/or new versions
-of the General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-Each version is given a distinguishing version number.  If the Program
-specifies a version number of this License which applies to it and "any
-later version", you have the option of following the terms and conditions
-either of that version or of any later version published by the Free
-Software Foundation.  If the Program does not specify a version number of
-this License, you may choose any version ever published by the Free Software
-Foundation.
-
-  10. If you wish to incorporate parts of the Program into other free
-programs whose distribution conditions are different, write to the author
-to ask for permission.  For software which is copyrighted by the Free
-Software Foundation, write to the Free Software Foundation; we sometimes
-make exceptions for this.  Our decision will be guided by the two goals
-of preserving the free status of all derivatives of our free software and
-of promoting the sharing and reuse of software generally.
-
-                            NO WARRANTY
-
-  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
-FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
-OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
-PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
-OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
-TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
-PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
-REPAIR OR CORRECTION.
-
-  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
-REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
-OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
-TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
-YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
-PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
-POSSIBILITY OF SUCH DAMAGES.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-convey the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software; you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation; either version 2 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License along
-    with this program; if not, write to the Free Software Foundation, Inc.,
-    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If the program is interactive, make it output a short notice like this
-when it starts in an interactive mode:
-
-    Gnomovision version 69, Copyright (C) year name of author
-    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, the commands you use may
-be called something other than `show w' and `show c'; they could even be
-mouse-clicks or menu items--whatever suits your program.
-
-You should also get your employer (if you work as a programmer) or your
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary.  Here is a sample; alter the names:
-
-  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
-  `Gnomovision' (which makes passes at compilers) written by James Hacker.
-
-  <signature of Ty Coon>, 1 April 1989
-  Ty Coon, President of Vice
-
-This General Public License does not permit incorporating your program into
-proprietary programs.  If your program is a subroutine library, you may
-consider it more useful to permit linking proprietary applications with the
-library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.
+5. Disclaimer:
+   - This code is provided "as is," without any express or implied warranties, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. In no event shall the author be liable for any damages or other liability arising from, out of, or in connection with the use or distribution of this code.

README.md

@@ -1,43 +1,67 @@
 <div align="center">
-  <img src="https://socialify.git.ci/NapNeko/NapCatQQ/image?description=1&language=1&logo=https%3A%2F%2Fraw.githubusercontent.com%2FNapNeko%2FNapCatQQ%2Fmain%2Flogo.png&name=1&stargazers=1&theme=Auto" alt="NapCatQQ" width="640" height="320" />
+  
+![NapCatQQ](https://socialify.git.ci/NapNeko/NapCatQQ/image?font=Jost&logo=https%3A%2F%2Fnapneko.github.io%2Fassets%2Fnewlogo.png&name=1&owner=1&pattern=Diagonal+Stripes&stargazers=1&theme=Auto)
+  
 </div>
 
 ---
-## 欢迎回来
-NapCatQQ (aka 猫猫框架) 是现代化的基于 NTQQ 的 Bot 协议端实现。
+## 欢迎回家
+NapCatQQ 是现代化的基于 NTQQ 的 Bot 协议端实现
 
-## 猫猫技能
-- [x] **高性能**：1K+ 群聊数目、20 线程并行发送消息毫无压力 
-- [x] **多种启动方式**：支持以无头、LiteLoader 插件、仅 QQ GUI 三种方式启动
-- [x] **多平台支持**: 覆盖 Windows / Linux (可选 Docker) / Android Termux / MacOS
-- [x] **安装简单**: 支持一键脚本/程序自动部署/镜像部署等多种覆盖范围
-- [x] **低占用**：无头模式占用资源极低，适合在服务器上运行
-- [x] **超多接口**：实现大部分 OneBot 和 go-cqhttp 接口，超多扩展 API
-- [x] **WebUI**：自带 WebUI 支持，远程管理更加便捷
-- [x] **低故障率**：快速适配最新版本，日常保证 0 Issue
+## 特性介绍
+- [x] **安装简单**：就算是笨蛋也能使用
+- [x] **性能友好**：就算是低内存也能使用
+- [x] **接口丰富**：就算是没有也能使用
+- [x] **稳定好用**：就算是被捉也能使用
 
-## 使用猫猫
+## 使用框架
 
 可前往 [Release](https://github.com/NapNeko/NapCatQQ/releases/) 页面下载最新版本
 
-**首次使用**请务必前往[官方文档](https://napneko.github.io/)查看使用教程。
+**首次使用**请务必查看如下文档看使用教程
+
+### 文档地址
+
+[Cloudflare.Worker](https://doc.napneko.icu/)
+
+[Cloudflare.HKServer](https://napcat.napneko.icu/)
+
+[Github.IO](https://napneko.github.io/)
+
+[Cloudflare.Pages](https://napneko.pages.dev/)
+
+[Server.Other](https://docs.napcat.cyou/)
+
+[NapCat.Wiki](https://www.napcat.wiki)
 
 ## 回家旅途
-[QQ Group](https://qm.qq.com/q/VfjAq5HIMS)
+[QQ Group#1](https://qm.qq.com/q/I6LU87a0Yq)
 
-[Telegram Link](https://t.me/+nLZEnpne-pQ1OWFl)
+[QQ Group#2](https://qm.qq.com/q/HaRcfrHpUk)
 
-## 猫猫朋友
-感谢 [LLOneBot](https://github.com/LLOneBot/LLOneBot) 提供部分参考
+[Telegram](https://t.me/MelodicMoonlight)
 
-感谢 [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持
+> QQ Group#2 准许Bot / Telegram与QQ Group#2 为新建Group
+
+## 性能设计/协议标准
+NapCat 已实现90％+的 OneBot / GoCQ 标准接口，并提供兼容性保留接口，其设计理念遵守 无数据库/异步优先/后台刷新 的性能思想。
+
+由此设计带来一系列好处，在开发中，获取群员列表通常小于50Ms，单条文本消息发送在320Ms以内，在1k+的群聊流畅运行，同时带来一些副作用，消息Id无法持久，无法上报撤回消息原始内容。
+
+NapCat 在设计理念下遵守 OneBot 规范大多数要求并且积极改进，任何合理的标准化 Issue 与 Pr 将被接收。
+
+## 感谢他们
+感谢 [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
+
+感谢 React 强力驱动 NapCat.WebUi
 
 不过最最重要的 还是需要感谢屏幕前的你哦~
 
 ---
 
-## 约法三章
-> [!CAUTION]\
-> **请不要在 QQ 官方群聊和任何影响力较大的简中互联网平台（包括但不限于: 哔哩哔哩，微博，知乎，抖音等）发布和讨论*任何*与本项目存在相关性的信息**
+## 特殊感谢
+[LLOneBot](https://github.com/LLOneBot/LLOneBot) 相关的开发曾参与本项目
 
-任何使用本仓库代码的地方，都应当严格遵守[本仓库开源许可](./LICENSE)。**此外，禁止任何项目未经授权二次分发或基于 NapCat 代码开发。**
+## 开源附加
+
+任何使用本仓库代码的地方，都应当严格遵守[本仓库开源许可](./LICENSE)。**本仓库仅用于提高IM易用性，实现类似Hook推送，此外，禁止任何项目未经仓库主作者授权二次分发或基于 NapCat 代码开发。使用请遵守当地法律法规，由此造成的问题由使用者和提供违规使用教程者负责。**

eslint.config.mjs

@@ -0,0 +1,32 @@
+import eslint from '@eslint/js';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsEslintParser from '@typescript-eslint/parser';
+import globals from "globals";
+
+const customTsFlatConfig = [
+    {
+        name: 'typescript-eslint/base',
+        languageOptions: {
+            parser: tsEslintParser,
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                NodeJS: 'readonly', // 添加 NodeJS 全局变量
+            },
+        },
+        files: ['**/*.{ts,tsx}'],
+        rules: {
+            ...tsEslintPlugin.configs.recommended.rules,
+            'quotes': ['error', 'single'], // 使用单引号
+            'semi': ['error', 'always'], // 强制使用分号
+            'indent': ['error', 4], // 使用 4 空格缩进
+        },
+        plugins: {
+            '@typescript-eslint': tsEslintPlugin,
+        },
+        ignores: ['src/webui/**'], // 忽略 src/webui/ 目录所有文件
+    },
+];
+
+export default [eslint.configs.recommended, ...customTsFlatConfig];

launcher/launcher-user.bat

@@ -0,0 +1,32 @@
+@echo off
+chcp 65001
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
+
+pause

launcher/launcher-win10-user.bat

@@ -0,0 +1,33 @@
+@echo off
+chcp 65001
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
+
+REM "%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" 123456
+
+pause

launcher/launcher-win10.bat

@@ -5,11 +5,11 @@ if %errorLevel% == 0 (
     echo Administrator mode detected.
 ) else (
     echo Please run this script in administrator mode.
-    powershell -Command "Start-Process 'cmd.exe' -ArgumentList '/c cd /d \"%cd%\" && \"%~f0\"' -Verb runAs" 
+    powershell -Command "Start-Process 'cmd.exe' -ArgumentList '/c cd /d \"%cd%\" && \"%~f0\" %1' -Verb runAs" 
     exit
 )
 
-set NAPCAT_PATCH_PATH=%cd%\patchNapCat.js
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
 set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
 set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
 set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
@@ -33,8 +33,8 @@ if not exist "%QQpath%" (
     exit /b
 )
 set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
-echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > %NAPCAT_LOAD_PATH%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
 
-"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%"
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
 
 REM "%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" 123456

launcher/launcher.bat

@@ -5,11 +5,11 @@ if %errorLevel% == 0 (
     echo Administrator mode detected.
 ) else (
     echo Please run this script in administrator mode.
-    powershell -Command "Start-Process 'wt.exe' -ArgumentList 'cmd /c cd /d \"%cd%\" && \"%~f0\"' -Verb runAs"
+    powershell -Command "Start-Process 'wt.exe' -ArgumentList 'cmd /c cd /d \"%cd%\" && \"%~f0\" %1' -Verb runAs"
     exit
 )
 
-set NAPCAT_PATCH_PATH=%cd%\patchNapCat.js
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
 set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
 set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
 set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
@@ -34,8 +34,6 @@ if not exist "%QQpath%" (
 )
 
 set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
-echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > %NAPCAT_LOAD_PATH%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
 
-"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%"
-
-REM "%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" 123456
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1

launcher/patchNapCat.js

@@ -1 +0,0 @@
-require('./launcher.node').load('external_index', module);

launcher/qqnt.json

@@ -0,0 +1,26 @@
+{
+  "name": "qq-chat",
+  "version": "9.9.17-30899",
+  "verHash": "ececf273",
+  "linuxVersion": "3.2.15-30899",
+  "linuxVerHash": "63c751e8",
+  "type": "module",
+  "private": true,
+  "description": "QQ",
+  "productName": "QQ",
+  "author": {
+    "name": "Tencent",
+    "email": "QQ-Team@tencent.com"
+  },
+  "homepage": "https://im.qq.com",
+  "sideEffects": true,
+  "bin": {
+    "qd": "externals/devtools/cli/index.js"
+  },
+  "main": "./loadNapCat.js",
+  "buildVersion": "30899",
+  "isPureShell": true,
+  "isByteCodeShell": true,
+  "platform": "win32",
+  "eleArch": "x64"
+}

launcher/quickLoginExample.bat

@@ -0,0 +1,4 @@
+@echo off
+REM ./launcher.bat 123456
+REM ./launcher-win10.bat 123456
+REM 带有REM的为注释 删掉你需要的系统的那行REM这三个单词 修改QQ本脚本启动即可

manifest.json

@@ -4,16 +4,12 @@
   "name": "NapCatQQ",
   "slug": "NapCat.Framework",
   "description": "高性能的 OneBot 11 协议实现",
-  "version": "2.4.2",
+  "version": "4.5.5",
   "icon": "./logo.png",
   "authors": [
     {
-      "name": "MliKiowa",
-      "link": "https://github.com/MliKiowa"
-    },
-    {
-      "name": "Young",
-      "link": "https://github.com/Wesley-Young"
+      "name": "NapNeko",
+      "link": "https://github.com/NapNeko"
     }
   ],
   "repository": {

napcat.webui/.env

@@ -0,0 +1 @@
+VITE_DEBUG_BACKEND_URL="http://127.0.0.1:6099"

napcat.webui/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# NPM LOCK files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+
+dist.zip

napcat.webui/.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@heroui/*

napcat.webui/.prettierignore

@@ -0,0 +1,7 @@
+dist
+*.md
+*.html
+yarn.lock
+package-lock.json
+node_modules
+pnpm-lock.yaml

napcat.webui/.prettierrc

@@ -0,0 +1,23 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^@/const/(.*)$",
+    "^@/store/(.*)$",
+    "^@/components/(.*)$",
+    "^@/contexts/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/utils/(.*)$",
+    "^@/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

napcat.webui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 bietiaop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

napcat.webui/README.md

@@ -0,0 +1,32 @@
+# NapCat WebUI
+
+## 功能
+
+- WebUI登录
+- QQ登录
+- 网络配置
+- OneBot/WebUI配置
+- 日志查看（实时日志、历史日志）
+- HTTP调试
+- WS调试
+- 在线音乐播放器，支持网易云音乐歌单（大屏在页面右下角，小屏在页面下方）
+
+如果你有更多功能需求，欢迎在 issue 中提出。
+
+# License
+
+[MIT](LICENSE)
+
+# Related Projects
+
+- [NapCat](https://github.com/NapNeko/NapCatQQ/)
+- [Karin](https://github.com/KarinJS/Karin/)
+
+# Thanks to
+
+- [Vercel](https://vercel.com/)
+- [React](https://react.dev/)
+- [HeroUI](https://nextui.org/)
+- and more open-source projects
+
+感谢群友“维拉”提供的在线音乐API。

napcat.webui/eslint.config.mjs

@@ -0,0 +1,91 @@
+import eslint_js from '@eslint/js'
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin'
+import tsEslintParser from '@typescript-eslint/parser'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+
+const customTsFlatConfig = [
+  {
+    name: 'typescript-eslint/base',
+    languageOptions: {
+      parser: tsEslintParser,
+      sourceType: 'module'
+    },
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    rules: {
+      ...tsEslintPlugin.configs.recommended.rules
+    },
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin
+    }
+  }
+]
+
+export default [
+  eslint_js.configs.recommended,
+
+  eslintPluginPrettierRecommended,
+
+  ...customTsFlatConfig,
+  {
+    name: 'global config',
+    languageOptions: {
+      globals: {
+        ...globals.es2022,
+        ...globals.browser,
+        ...globals.node
+      },
+      parserOptions: {
+        warnOnUnsupportedTypeScriptVersion: false
+      }
+    },
+    rules: {
+      'prettier/prettier': 'error',
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      //关闭不能再promise中使用ansyc
+      'no-async-promise-executor': 'off',
+      //关闭不能再常量中使用??
+      'no-constant-binary-expression': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+
+      //禁止失去精度的字面数字
+      '@typescript-eslint/no-loss-of-precision': 'off',
+      //禁止使用any
+      '@typescript-eslint/no-explicit-any': 'error'
+    }
+  },
+  {
+    ignores: ['**/node_modules', '**/dist', '**/output']
+  },
+  {
+    name: 'react-eslint',
+    files: ['src/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin
+    },
+    languageOptions: {
+      ...reactPlugin.configs.recommended.languageOptions
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+
+      'react/react-in-jsx-scope': 'off'
+    },
+    settings: {
+      react: {
+        // 需要显示安装 react
+        version: 'detect'
+      }
+    }
+  },
+  {
+    languageOptions: { globals: { ...globals.browser, ...globals.node } }
+  },
+  eslintConfigPrettier
+]

napcat.webui/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="zh">
+
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>NapCat WebUI</title>
+        <meta key="title" content="NapCat WebUI" property="og:title" />
+        <meta content="NapCat WebUI，基于React+tailwind+NextUI" property="og:description" />
+        <meta content="NapCat WebUI，基于React+tailwind+NextUI" name="description" />
+        <meta key="viewport"
+            content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+            name="viewport" />
+        <link href="/favicon.ico" rel="icon" />
+    </head>
+
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+
+</html>

napcat.webui/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "napcat-webui",
+  "private": true,
+  "version": "0.0.6",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host=0.0.0.0",
+    "build": "tsc && vite build",
+    "lint": "eslint -c eslint.config.mjs ./src/**/**/*.{ts,tsx} --fix",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@heroui/avatar": "2.2.7",
+    "@heroui/breadcrumbs": "2.2.7",
+    "@heroui/button": "2.2.10",
+    "@heroui/card": "2.2.10",
+    "@heroui/checkbox": "2.3.9",
+    "@heroui/chip": "2.2.7",
+    "@heroui/code": "2.2.7",
+    "@heroui/dropdown": "2.3.10",
+    "@heroui/form": "2.1.9",
+    "@heroui/image": "2.2.6",
+    "@heroui/input": "2.4.10",
+    "@heroui/kbd": "2.2.7",
+    "@heroui/link": "2.2.8",
+    "@heroui/listbox": "2.3.10",
+    "@heroui/modal": "2.2.8",
+    "@heroui/navbar": "2.2.9",
+    "@heroui/pagination": "^2.2.9",
+    "@heroui/popover": "2.3.10",
+    "@heroui/select": "2.4.10",
+    "@heroui/slider": "2.4.8",
+    "@heroui/snippet": "2.2.11",
+    "@heroui/spinner": "2.2.7",
+    "@heroui/switch": "2.2.9",
+    "@heroui/system": "2.4.7",
+    "@heroui/table": "^2.2.9",
+    "@heroui/tabs": "2.2.8",
+    "@heroui/theme": "2.4.6",
+    "@heroui/tooltip": "2.2.8",
+    "@monaco-editor/loader": "^1.4.0",
+    "@monaco-editor/react": "4.7.0-rc.0",
+    "@react-aria/visually-hidden": "^3.8.19",
+    "@reduxjs/toolkit": "^2.5.1",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@xterm/addon-canvas": "^0.7.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
+    "ahooks": "^3.8.4",
+    "axios": "^1.7.9",
+    "clsx": "^2.1.1",
+    "echarts": "^5.5.1",
+    "event-source-polyfill": "^1.0.31",
+    "framer-motion": "^12.0.6",
+    "monaco-editor": "^0.52.2",
+    "motion": "^12.0.6",
+    "path-browserify": "^1.0.1",
+    "qface": "^1.4.1",
+    "qrcode.react": "^4.2.0",
+    "quill": "^2.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.5",
+    "react-error-boundary": "^5.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.4.0",
+    "react-markdown": "^9.0.3",
+    "react-photo-view": "^1.2.7",
+    "react-redux": "^9.2.0",
+    "react-responsive": "^10.0.0",
+    "react-router-dom": "^7.1.4",
+    "react-use-websocket": "^4.11.1",
+    "react-window": "^1.8.11",
+    "remark-gfm": "^4.0.0",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "^3.4.17",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@react-types/shared": "^3.26.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/event-source-polyfill": "^1.0.5",
+    "@types/fabric": "^5.3.9",
+    "@types/node": "^22.12.0",
+    "@types/path-browserify": "^1.0.3",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.5",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "overrides": {
+    "ahooks": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "react-window": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
+  }
+}

napcat.webui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

napcat.webui/public/vercel.json

@@ -0,0 +1,5 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/" }
+  ]
+}

napcat.webui/src/App.tsx

@@ -0,0 +1,90 @@
+import { Suspense, lazy, useEffect } from 'react'
+import { Provider } from 'react-redux'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+
+import PageBackground from '@/components/page_background'
+import PageLoading from '@/components/page_loading'
+import Toaster from '@/components/toaster'
+
+import DialogProvider from '@/contexts/dialog'
+import AudioProvider from '@/contexts/songs'
+
+import useAuth from '@/hooks/auth'
+
+import store from '@/store'
+
+const WebLoginPage = lazy(() => import('@/pages/web_login'))
+const IndexPage = lazy(() => import('@/pages/index'))
+const QQLoginPage = lazy(() => import('@/pages/qq_login'))
+const DashboardIndexPage = lazy(() => import('@/pages/dashboard'))
+const AboutPage = lazy(() => import('@/pages/dashboard/about'))
+const ConfigPage = lazy(() => import('@/pages/dashboard/config'))
+const DebugPage = lazy(() => import('@/pages/dashboard/debug'))
+const HttpDebug = lazy(() => import('@/pages/dashboard/debug/http'))
+const WSDebug = lazy(() => import('@/pages/dashboard/debug/websocket'))
+const FileManagerPage = lazy(() => import('@/pages/dashboard/file_manager'))
+const LogsPage = lazy(() => import('@/pages/dashboard/logs'))
+const NetworkPage = lazy(() => import('@/pages/dashboard/network'))
+const TerminalPage = lazy(() => import('@/pages/dashboard/terminal'))
+
+function App() {
+  return (
+    <DialogProvider>
+      <Provider store={store}>
+        <PageBackground />
+        <Toaster />
+        <AudioProvider>
+          <Suspense fallback={<PageLoading />}>
+            <AuthChecker>
+              <AppRoutes />
+            </AuthChecker>
+          </Suspense>
+        </AudioProvider>
+      </Provider>
+    </DialogProvider>
+  )
+}
+
+function AuthChecker({ children }: { children: React.ReactNode }) {
+  const { isAuth } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!isAuth) {
+      const search = new URLSearchParams(window.location.search)
+      const token = search.get('token')
+      let url = '/web_login'
+
+      if (token) {
+        url += `?token=${token}`
+      }
+      navigate(url, { replace: true })
+    }
+  }, [isAuth, navigate])
+
+  return <>{children}</>
+}
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<IndexPage />}>
+        <Route index element={<DashboardIndexPage />} />
+        <Route path="network" element={<NetworkPage />} />
+        <Route path="config" element={<ConfigPage />} />
+        <Route path="logs" element={<LogsPage />} />
+        <Route path="debug" element={<DebugPage />}>
+          <Route path="ws" element={<WSDebug />} />
+          <Route path="http" element={<HttpDebug />} />
+        </Route>
+        <Route path="file_manager" element={<FileManagerPage />} />
+        <Route path="terminal" element={<TerminalPage />} />
+        <Route path="about" element={<AboutPage />} />
+      </Route>
+      <Route path="/qq_login" element={<QQLoginPage />} />
+      <Route path="/web_login" element={<WebLoginPage />} />
+    </Routes>
+  )
+}
+
+export default App

napcat.webui/src/components/audio_player.tsx

@@ -0,0 +1,425 @@
+import { Button } from '@heroui/button'
+import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Image } from '@heroui/image'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Slider } from '@heroui/slider'
+import { Tooltip } from '@heroui/tooltip'
+import { useLocalStorage } from '@uidotdev/usehooks'
+import clsx from 'clsx'
+import { useEffect, useRef, useState } from 'react'
+import {
+  BiSolidSkipNextCircle,
+  BiSolidSkipPreviousCircle
+} from 'react-icons/bi'
+import {
+  FaPause,
+  FaPlay,
+  FaRegHandPointRight,
+  FaRepeat,
+  FaShuffle
+} from 'react-icons/fa6'
+import { TbRepeatOnce } from 'react-icons/tb'
+import { useMediaQuery } from 'react-responsive'
+
+import { PlayMode } from '@/const/enum'
+import key from '@/const/key'
+
+import { VolumeHighIcon, VolumeLowIcon } from './icons'
+
+export interface AudioPlayerProps
+  extends React.AudioHTMLAttributes<HTMLAudioElement> {
+  src: string
+  title?: string
+  artist?: string
+  cover?: string
+  pressNext?: () => void
+  pressPrevious?: () => void
+  onPlayEnd?: () => void
+  onChangeMode?: (mode: PlayMode) => void
+  mode?: PlayMode
+}
+
+export default function AudioPlayer(props: AudioPlayerProps) {
+  const {
+    src,
+    pressNext,
+    pressPrevious,
+    cover = 'https://nextui.org/images/album-cover.png',
+    title = '未知',
+    artist = '未知',
+    onTimeUpdate,
+    onLoadedData,
+    onPlay,
+    onPause,
+    onPlayEnd,
+    onChangeMode,
+    autoPlay,
+    mode = PlayMode.Loop,
+    ...rest
+  } = props
+
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [volume, setVolume] = useState(100)
+  const [isCollapsed, setIsCollapsed] = useLocalStorage(
+    key.isCollapsedMusicPlayer,
+    false
+  )
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null)
+  const startY = useRef(0)
+  const startX = useRef(0)
+  const [translateY, setTranslateY] = useState(0)
+  const [translateX, setTranslateX] = useState(0)
+  const isSmallScreen = useMediaQuery({ maxWidth: 767 })
+  const isMediumUp = useMediaQuery({ minWidth: 768 })
+  const shouldAdd = useRef(false)
+  const currentProgress = (currentTime / duration) * 100
+  const [storageAutoPlay, setStorageAutoPlay] = useLocalStorage(
+    key.autoPlay,
+    true
+  )
+
+  const handleTimeUpdate = (event: React.SyntheticEvent<HTMLAudioElement>) => {
+    const audio = event.target as HTMLAudioElement
+    setCurrentTime(audio.currentTime)
+    onTimeUpdate?.(event)
+  }
+
+  const handleLoadedData = (event: React.SyntheticEvent<HTMLAudioElement>) => {
+    const audio = event.target as HTMLAudioElement
+    setDuration(audio.duration)
+    onLoadedData?.(event)
+  }
+
+  const handlePlay = (e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setIsPlaying(true)
+    setStorageAutoPlay(true)
+    onPlay?.(e)
+  }
+
+  const handlePause = (e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setIsPlaying(false)
+    onPause?.(e)
+  }
+
+  const changeMode = () => {
+    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single]
+    const currentIndex = modes.findIndex((_mode) => _mode === mode)
+    const nextIndex = currentIndex + 1
+    const nextMode = modes[nextIndex] || modes[0]
+    onChangeMode?.(nextMode)
+  }
+
+  const volumeChange = (value: number) => {
+    setVolume(value)
+  }
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (audio) {
+      audio.volume = volume / 100
+    }
+  }, [volume])
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startY.current = e.touches[0].clientY
+    startX.current = e.touches[0].clientX
+  }
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    const deltaY = e.touches[0].clientY - startY.current
+    const deltaX = e.touches[0].clientX - startX.current
+    const container = cardRef.current
+    const header = cardRef.current?.querySelector('[data-header]')
+    const headerHeight = header?.clientHeight || 20
+    const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+    const _shouldAdd = isCollapsed && deltaY < 0
+    if (isSmallScreen) {
+      shouldAdd.current = _shouldAdd
+      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY)
+    } else {
+      setTranslateX(deltaX)
+    }
+  }
+
+  const handleTouchEnd = () => {
+    if (isSmallScreen) {
+      const container = cardRef.current
+      const header = cardRef.current?.querySelector('[data-header]')
+      const headerHeight = header?.clientHeight || 20
+      const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+      const _translateY = translateY - (shouldAdd.current ? addHeight : 0)
+      if (_translateY > 100) {
+        setIsCollapsed(true)
+      } else if (_translateY < -100) {
+        setIsCollapsed(false)
+      }
+      setTranslateY(0)
+    } else {
+      if (translateX > 100) {
+        setIsCollapsed(true)
+      } else if (translateX < -100) {
+        setIsCollapsed(false)
+      }
+      setTranslateX(0)
+    }
+  }
+
+  const dragTranslate = isSmallScreen
+    ? translateY
+      ? `translateY(${translateY}px)`
+      : ''
+    : translateX
+      ? `translateX(${translateX}px)`
+      : ''
+  const collapsedTranslate = isCollapsed
+    ? isSmallScreen
+      ? 'translateY(90%)'
+      : 'translateX(96%)'
+    : ''
+
+  const translateStyle = dragTranslate || collapsedTranslate
+
+  if (!src) return null
+
+  return (
+    <div
+      className={clsx(
+        'fixed right-0 bottom-0 z-[52] w-full md:w-96',
+        !translateX && !translateY && 'transition-transform',
+        isCollapsed && 'md:hover:!translate-x-80'
+      )}
+      style={{
+        transform: translateStyle
+      }}
+    >
+      <audio
+        src={src}
+        onLoadedData={handleLoadedData}
+        onTimeUpdate={handleTimeUpdate}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onEnded={onPlayEnd}
+        autoPlay={autoPlay ?? storageAutoPlay}
+        {...rest}
+        controls={false}
+        hidden
+        ref={audioRef}
+      />
+
+      <Card
+        ref={cardRef}
+        className={clsx(
+          'border-none bg-background/60 dark:bg-default-300/50 w-full max-w-full transform transition-transform backdrop-blur-md duration-300 overflow-visible',
+          isSmallScreen ? 'rounded-t-3xl' : 'md:rounded-l-xl'
+        )}
+        classNames={{
+          body: 'p-0'
+        }}
+        shadow="sm"
+        radius="none"
+      >
+        {isMediumUp && (
+          <Button
+            isIconOnly
+            className={clsx(
+              'absolute data-[hover]:bg-foreground/10 text-lg z-50',
+              isCollapsed
+                ? 'top-0 left-0 w-full h-full rounded-xl bg-opacity-0 hover:bg-opacity-30'
+                : 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
+            )}
+            variant="solid"
+            color="danger"
+            size="sm"
+            onPress={() => setIsCollapsed(!isCollapsed)}
+          >
+            <FaRegHandPointRight />
+          </Button>
+        )}
+        {isSmallScreen && (
+          <CardHeader
+            data-header
+            className="flex-row justify-center pt-4"
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <div className="w-24 h-2 rounded-full bg-content2-foreground shadow-sm"></div>
+          </CardHeader>
+        )}
+        <CardBody>
+          <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center overflow-hidden p-6 md:p-2 m-0">
+            <div className="relative col-span-6 md:col-span-4 flex justify-center">
+              <Image
+                alt="Album cover"
+                className="object-cover"
+                classNames={{
+                  wrapper: 'w-36 aspect-square md:w-24 flex',
+                  img: 'block w-full h-full'
+                }}
+                shadow="md"
+                src={cover}
+                width="100%"
+              />
+            </div>
+
+            <div className="flex flex-col col-span-6 md:col-span-8">
+              <div className="flex flex-col gap-0">
+                <h1 className="font-medium truncate">{title}</h1>
+                <p className="text-xs text-foreground/80 truncate">{artist}</p>
+              </div>
+
+              <div className="flex flex-col">
+                <Slider
+                  aria-label="Music progress"
+                  classNames={{
+                    track: 'bg-default-500/30 border-none',
+                    thumb: 'w-2 h-2 after:w-1.5 after:h-1.5',
+                    filler: 'rounded-full'
+                  }}
+                  color="foreground"
+                  value={currentProgress || 0}
+                  defaultValue={0}
+                  size="sm"
+                  onChange={(value) => {
+                    value = Array.isArray(value) ? value[0] : value
+                    const audio = audioRef.current
+                    if (audio) {
+                      audio.currentTime = (value / 100) * duration
+                    }
+                  }}
+                />
+                <div className="flex justify-between h-3">
+                  <p className="text-xs">
+                    {Math.floor(currentTime / 60)}:
+                    {Math.floor(currentTime % 60)
+                      .toString()
+                      .padStart(2, '0')}
+                  </p>
+                  <p className="text-xs text-foreground/50">
+                    {Math.floor(duration / 60)}:
+                    {Math.floor(duration % 60)
+                      .toString()
+                      .padStart(2, '0')}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex w-full items-center justify-center">
+                <Tooltip
+                  content={
+                    mode === PlayMode.Loop
+                      ? '列表循环'
+                      : mode === PlayMode.Random
+                        ? '随机播放'
+                        : '单曲循环'
+                  }
+                >
+                  <Button
+                    isIconOnly
+                    className="data-[hover]:bg-foreground/10 text-lg md:text-medium"
+                    radius="full"
+                    variant="light"
+                    size="md"
+                    onPress={changeMode}
+                  >
+                    {mode === PlayMode.Loop && (
+                      <FaRepeat className="text-foreground/80" />
+                    )}
+                    {mode === PlayMode.Random && (
+                      <FaShuffle className="text-foreground/80" />
+                    )}
+                    {mode === PlayMode.Single && (
+                      <TbRepeatOnce className="text-foreground/80 text-xl" />
+                    )}
+                  </Button>
+                </Tooltip>
+                <Tooltip content="上一首">
+                  <Button
+                    isIconOnly
+                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
+                    radius="full"
+                    variant="light"
+                    size="md"
+                    onPress={pressPrevious}
+                  >
+                    <BiSolidSkipPreviousCircle />
+                  </Button>
+                </Tooltip>
+                <Tooltip content={isPlaying ? '暂停' : '播放'}>
+                  <Button
+                    isIconOnly
+                    className="data-[hover]:bg-foreground/10 text-3xl md:text-3xl"
+                    radius="full"
+                    variant="light"
+                    size="lg"
+                    onPress={() => {
+                      if (isPlaying) {
+                        audioRef.current?.pause()
+                        setStorageAutoPlay(false)
+                      } else {
+                        audioRef.current?.play()
+                      }
+                    }}
+                  >
+                    {isPlaying ? <FaPause /> : <FaPlay className="ml-1" />}
+                  </Button>
+                </Tooltip>
+                <Tooltip content="下一首">
+                  <Button
+                    isIconOnly
+                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
+                    radius="full"
+                    variant="light"
+                    size="md"
+                    onPress={pressNext}
+                  >
+                    <BiSolidSkipNextCircle />
+                  </Button>
+                </Tooltip>
+                <Popover
+                  placement="top"
+                  classNames={{
+                    content: 'bg-opacity-30 backdrop-blur-md'
+                  }}
+                >
+                  <PopoverTrigger>
+                    <Button
+                      isIconOnly
+                      className="data-[hover]:bg-foreground/10 text-xl md:text-xl"
+                      radius="full"
+                      variant="light"
+                      size="md"
+                    >
+                      <VolumeHighIcon />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <Slider
+                      orientation="vertical"
+                      showTooltip
+                      aria-label="Volume"
+                      className="h-40"
+                      color="primary"
+                      defaultValue={volume}
+                      onChange={(value) => {
+                        value = Array.isArray(value) ? value[0] : value
+                        volumeChange(value)
+                      }}
+                      startContent={<VolumeHighIcon className="text-2xl" />}
+                      size="sm"
+                      endContent={<VolumeLowIcon className="text-2xl" />}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  )
+}

napcat.webui/src/components/button/add_button.tsx

@@ -0,0 +1,208 @@
+import { Button } from '@heroui/button'
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger
+} from '@heroui/dropdown'
+import { Tooltip } from '@heroui/tooltip'
+import { FaRegCircleQuestion } from 'react-icons/fa6'
+import { IoAddCircleOutline } from 'react-icons/io5'
+
+import {
+  HTTPClientIcon,
+  HTTPServerIcon,
+  PCIcon,
+  PlusIcon,
+  WebsocketIcon
+} from '../icons'
+
+export interface AddButtonProps {
+  onOpen: (key: keyof OneBotConfig['network']) => void
+}
+
+const AddButton: React.FC<AddButtonProps> = (props) => {
+  const { onOpen } = props
+
+  return (
+    <Dropdown
+      classNames={{
+        content: 'bg-opacity-30 backdrop-blur-md'
+      }}
+      placement="right"
+    >
+      <DropdownTrigger>
+        <Button
+          color="danger"
+          startContent={<IoAddCircleOutline className="text-2xl" />}
+        >
+          新建
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        aria-label="Create Network Config"
+        color="primary"
+        variant="flat"
+        onAction={(key) => {
+          onOpen(key as keyof OneBotConfig['network'])
+        }}
+      >
+        <DropdownItem
+          key="title"
+          isReadOnly
+          className="cursor-default hover:!bg-transparent"
+          textValue="title"
+        >
+          <div className="flex items-center gap-2 justify-center">
+            <div className="w-5 h-5 -ml-3">
+              <PlusIcon />
+            </div>
+            <div className="text-primary-400">新建网络配置</div>
+          </div>
+        </DropdownItem>
+        <DropdownItem
+          key="httpServers"
+          textValue="httpServers"
+          startContent={
+            <div className="w-6 h-6">
+              <HTTPServerIcon />
+            </div>
+          }
+        >
+          <div className="flex gap-1 items-center">
+            HTTP服务器
+            <Tooltip
+              content="「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
+              showArrow
+              className="max-w-64"
+            >
+              <Button
+                isIconOnly
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
+              >
+                <FaRegCircleQuestion />
+              </Button>
+            </Tooltip>
+          </div>
+        </DropdownItem>
+        <DropdownItem
+          key="httpSseServers"
+          textValue="httpSseServers"
+          startContent={
+            <div className="w-6 h-6">
+              <HTTPServerIcon />
+            </div>
+          }
+        >
+          <div className="flex gap-1 items-center">
+            HTTP SSE服务器
+            <Tooltip
+              content="「由NapCat建立」一个HTTP SSE服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
+              showArrow
+              className="max-w-64"
+            >
+              <Button
+                isIconOnly
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
+              >
+                <FaRegCircleQuestion />
+              </Button>
+            </Tooltip>
+          </div>
+        </DropdownItem>
+        <DropdownItem
+          key="httpClients"
+          textValue="httpClients"
+          startContent={
+            <div className="w-6 h-6">
+              <HTTPClientIcon />
+            </div>
+          }
+        >
+          <div className="flex gap-1 items-center">
+            HTTP客户端
+            <Tooltip
+              content="「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。"
+              showArrow
+              className="max-w-64"
+            >
+              <Button
+                isIconOnly
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
+              >
+                <FaRegCircleQuestion />
+              </Button>
+            </Tooltip>
+          </div>
+        </DropdownItem>
+        <DropdownItem
+          key="websocketServers"
+          textValue="websocketServers"
+          startContent={
+            <div className="w-6 h-6">
+              <WebsocketIcon />
+            </div>
+          }
+        >
+          <div className="flex gap-1 items-center">
+            Websocket服务器
+            <Tooltip
+              content="「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。"
+              showArrow
+              className="max-w-64"
+            >
+              <Button
+                isIconOnly
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
+              >
+                <FaRegCircleQuestion />
+              </Button>
+            </Tooltip>
+          </div>
+        </DropdownItem>
+        <DropdownItem
+          key="websocketClients"
+          textValue="websocketClients"
+          startContent={
+            <div className="w-6 h-6">
+              <PCIcon />
+            </div>
+          }
+        >
+          <div className="flex gap-1 items-center">
+            Websocket客户端
+            <Tooltip
+              content="「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。"
+              showArrow
+              className="max-w-64"
+            >
+              <Button
+                isIconOnly
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
+              >
+                <FaRegCircleQuestion />
+              </Button>
+            </Tooltip>
+          </div>
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+
+export default AddButton

napcat.webui/src/components/button/save_buttons.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@heroui/button'
+import toast from 'react-hot-toast'
+import { IoMdRefresh } from 'react-icons/io'
+
+export interface SaveButtonsProps {
+  onSubmit: () => void
+  reset: () => void
+  refresh?: () => void
+  isSubmitting: boolean
+}
+
+const SaveButtons: React.FC<SaveButtonsProps> = ({
+  onSubmit,
+  reset,
+  isSubmitting,
+  refresh
+}) => (
+  <div className="max-w-full mx-3 w-96 flex flex-col justify-center gap-3">
+    <div className="flex items-center justify-center gap-2 mt-5">
+      <Button
+        color="default"
+        onPress={() => {
+          reset()
+          toast.success('重置成功')
+        }}
+      >
+        取消更改
+      </Button>
+      <Button
+        color="danger"
+        isLoading={isSubmitting}
+        onPress={() => onSubmit()}
+      >
+        保存
+      </Button>
+      {refresh && (
+        <Button
+          isIconOnly
+          color="secondary"
+          radius="full"
+          variant="flat"
+          onPress={() => refresh()}
+        >
+          <IoMdRefresh size={24} />
+        </Button>
+      )}
+    </div>
+  </div>
+)
+
+export default SaveButtons

napcat.webui/src/components/chat_input/components/audio_insert.tsx

@@ -0,0 +1,254 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import clsx from 'clsx'
+import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { FaMicrophone } from 'react-icons/fa6'
+import { IoMic } from 'react-icons/io5'
+import { MdEdit, MdUpload } from 'react-icons/md'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const AudioInsert = () => {
+  const [audioUrl, setAudioUrl] = useState<string>('')
+  const audioInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showAudioSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'record',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+
+  const [isRecording, setIsRecording] = useState(false)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const audioChunksRef = useRef<Blob[]>([])
+  const [audioPreview, setAudioPreview] = useState<string | null>(null)
+  const [showPreview, setShowPreview] = useState(false)
+  const streamRef = useRef<MediaStream | null>(null)
+  const [recordingTime, setRecordingTime] = useState(0)
+  const recordingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (isRecording) {
+      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+        streamRef.current = stream
+        const recorder = new MediaRecorder(stream)
+        mediaRecorderRef.current = recorder
+        recorder.start()
+        recorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data)
+          }
+        }
+        recorder.onstop = () => {
+          if (audioChunksRef.current.length > 0) {
+            const audioBlob = new Blob(audioChunksRef.current, {
+              type: 'audio/wav'
+            })
+            const reader = new FileReader()
+            reader.readAsDataURL(audioBlob)
+            reader.onloadend = () => {
+              const base64Audio = reader.result as string
+              setAudioPreview(base64Audio)
+              setShowPreview(true)
+            }
+            audioChunksRef.current = []
+          }
+          stream.getTracks().forEach((track) => track.stop())
+        }
+      })
+      recordingIntervalRef.current = setInterval(() => {
+        setRecordingTime((prevTime) => prevTime + 1)
+      }, 1000)
+    } else {
+      mediaRecorderRef.current?.stop()
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current)
+        recordingIntervalRef.current = null
+      }
+    }
+  }, [isRecording])
+
+  const startRecording = () => {
+    setAudioPreview(null)
+    setShowPreview(false)
+    setRecordingTime(0)
+    setIsRecording(true)
+  }
+
+  const stopRecording = () => {
+    setIsRecording(false)
+  }
+
+  const handleShowPreview = () => {
+    if (audioPreview) {
+      showAudioSegment(audioPreview)
+    }
+  }
+
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60)
+    const seconds = time % 60
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送音频">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <IoMic className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传音频">
+            <Button
+              className="text-lg"
+              color="danger"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                audioInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入音频地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入音频地址">
+                  <Button
+                    className="text-lg"
+                    color="danger"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={audioUrl}
+                onChange={(e) => setAudioUrl(e.target.value)}
+                placeholder="请输入音频地址"
+              />
+              <Button
+                color="danger"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(audioUrl)) {
+                    toast.error('请输入正确的音频地址')
+                    return
+                  }
+                  showAudioSegment(audioUrl)
+                  setAudioUrl('')
+                }}
+              >
+                <FaMicrophone />
+              </Button>
+            </PopoverContent>
+          </Popover>
+          <Popover>
+            <Tooltip content="录制音频">
+              <div className="max-w-fit">
+                <PopoverTrigger>
+                  <Button
+                    className="text-lg"
+                    color="danger"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <IoMic />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-col gap-2 p-4">
+              <div className="flex gap-2">
+                <Button
+                  color={isRecording ? 'danger' : 'danger'}
+                  variant="flat"
+                  onPress={isRecording ? stopRecording : startRecording}
+                >
+                  {isRecording ? '停止录制' : '开始录制'}
+                </Button>
+                {showPreview && audioPreview && (
+                  <Button
+                    color="danger"
+                    variant="flat"
+                    onPress={handleShowPreview}
+                  >
+                    查看消息
+                  </Button>
+                )}
+              </div>
+              {(isRecording || audioPreview) && (
+                <div className="flex gap-1 items-center">
+                  <span
+                    className={clsx(
+                      'w-4 h-4 rounded-full',
+                      isRecording
+                        ? 'animate-pulse bg-danger-400'
+                        : 'bg-success-400'
+                    )}
+                  ></span>
+                  <span>录制时长: {formatTime(recordingTime)}</span>
+                </div>
+              )}
+              {showPreview && audioPreview && (
+                <audio controls src={audioPreview} />
+              )}
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={audioInputRef}
+        hidden
+        accept="audio/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showAudioSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default AudioInsert

napcat.webui/src/components/chat_input/components/dice_insert.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { BsDice3Fill } from 'react-icons/bs'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+const DiceInsert = () => {
+  const showStructuredMessage = useShowStructuredMessage()
+
+  return (
+    <Tooltip content="发送骰子">
+      <Button
+        color="danger"
+        variant="flat"
+        isIconOnly
+        radius="full"
+        onPress={() => {
+          showStructuredMessage([
+            {
+              type: 'dice'
+            }
+          ])
+        }}
+      >
+        <BsDice3Fill className="text-lg" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default DiceInsert

napcat.webui/src/components/chat_input/components/emoji_picker.tsx

@@ -0,0 +1,83 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { data, getUrl } from 'qface'
+import { useEffect, useRef, useState } from 'react'
+import { MdEmojiEmotions } from 'react-icons/md'
+
+import { EmojiValue } from '../formats/emoji_blot'
+
+const emojis = data.map((item) => {
+  return {
+    alt: item.QDes,
+    src: getUrl(item.QSid),
+    id: item.QSid
+  } as EmojiValue
+})
+
+export interface EmojiPickerProps {
+  onInsertEmoji: (emoji: EmojiValue) => void
+  onOpenChange: (open: boolean) => void
+}
+
+const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
+  const [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([])
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (isPopoverOpen) {
+      setVisibleEmojis([]) // Reset visible emojis
+      requestAnimationFrame(() => loadEmojis()) // Start loading emojis
+    }
+  }, [isPopoverOpen])
+
+  const loadEmojis = (index = 0, batchSize = 10) => {
+    if (index < emojis.length) {
+      setVisibleEmojis((prev) => [
+        ...prev,
+        ...emojis.slice(index, index + batchSize)
+      ])
+      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize))
+    }
+  }
+  return (
+    <div ref={containerRef}>
+      <Popover
+        portalContainer={containerRef.current!}
+        shouldCloseOnScroll={false}
+        placement="right-start"
+        onOpenChange={(v) => {
+          onOpenChange(v)
+          setIsPopoverOpen(v)
+        }}
+      >
+        <Tooltip content="插入表情">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <MdEmojiEmotions className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="grid grid-cols-8 gap-1 flex-wrap justify-start items-start overflow-y-auto max-w-full max-h-96 p-2">
+          {visibleEmojis.map((emoji) => (
+            <Button
+              key={emoji.id}
+              color="danger"
+              variant="flat"
+              isIconOnly
+              radius="full"
+              onPress={() => onInsertEmoji(emoji)}
+            >
+              <Image src={emoji.src} alt={emoji.alt} className="w-6 h-6" />
+            </Button>
+          ))}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export default EmojiPicker

napcat.webui/src/components/chat_input/components/file_insert.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { FaFolder } from 'react-icons/fa6'
+import { LuFilePlus2 } from 'react-icons/lu'
+import { MdEdit, MdUpload } from 'react-icons/md'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const FileInsert = () => {
+  const [fileUrl, setFileUrl] = useState<string>('')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showFileSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'file',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送文件">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <FaFolder className="text-lg" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传文件">
+            <Button
+              className="text-lg"
+              color="danger"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                fileInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入文件地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入文件地址">
+                  <Button
+                    className="text-lg"
+                    color="danger"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={fileUrl}
+                onChange={(e) => setFileUrl(e.target.value)}
+                placeholder="请输入文件地址"
+              />
+              <Button
+                color="danger"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(fileUrl)) {
+                    toast.error('请输入正确的文件地址')
+                    return
+                  }
+                  showFileSegment(fileUrl)
+                  setFileUrl('')
+                }}
+              >
+                <LuFilePlus2 />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={fileInputRef}
+        hidden
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showFileSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default FileInsert

napcat.webui/src/components/chat_input/components/image_insert.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { MdAddPhotoAlternate, MdEdit, MdImage, MdUpload } from 'react-icons/md'
+
+import { isURI } from '@/utils/url'
+
+export interface ImageInsertProps {
+  insertImage: (url: string) => void
+  onOpenChange: (open: boolean) => void
+}
+
+const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
+  const [imgUrl, setImgUrl] = useState<string>('')
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <>
+      <Popover onOpenChange={onOpenChange}>
+        <Tooltip content="插入图片">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <MdImage className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传图片">
+            <Button
+              className="text-lg"
+              color="danger"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                imageInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入图片地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入图片地址">
+                  <Button
+                    className="text-lg"
+                    color="danger"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={imgUrl}
+                onChange={(e) => setImgUrl(e.target.value)}
+                placeholder="请输入图片地址"
+              />
+              <Button
+                color="danger"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(imgUrl)) {
+                    toast.error('请输入正确的图片地址')
+                    return
+                  }
+                  insertImage(imgUrl)
+                  setImgUrl('')
+                }}
+              >
+                <MdAddPhotoAlternate />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={imageInputRef}
+        hidden
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            insertImage(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default ImageInsert

napcat.webui/src/components/chat_input/components/music_insert.tsx

@@ -0,0 +1,256 @@
+import { Button } from '@heroui/button'
+import { Form } from '@heroui/form'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Select, SelectItem } from '@heroui/select'
+import type { SharedSelection } from '@heroui/system'
+import { Tab, Tabs } from '@heroui/tabs'
+import { Tooltip } from '@heroui/tooltip'
+import type { Key } from '@react-types/shared'
+import { useRef, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { IoMusicalNotes } from 'react-icons/io5'
+import { TbMusicPlus } from 'react-icons/tb'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type {
+  CustomMusicSegment,
+  MusicSegment,
+  OB11Segment
+} from '@/types/onebot'
+
+type MusicData = CustomMusicSegment['data'] | MusicSegment['data']
+
+const MusicInsert = () => {
+  const [musicId, setMusicId] = useState<string>('')
+  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']))
+  const [mode, setMode] = useState<Key>('default')
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { control, handleSubmit, reset } = useForm<
+    Omit<CustomMusicSegment['data'], 'type'>
+  >({
+    defaultValues: {
+      url: '',
+      audio: '',
+      title: '',
+      image: '',
+      content: ''
+    }
+  })
+  const showStructuredMessage = useShowStructuredMessage()
+
+  const showMusicSegment = (data: MusicData) => {
+    const messages: OB11Segment[] = []
+    if (data.type === 'custom') {
+      messages.push({
+        type: 'music',
+        data: {
+          ...data,
+          type: 'custom'
+        }
+      })
+    } else {
+      messages.push({
+        type: 'music',
+        data
+      })
+    }
+    showStructuredMessage(messages)
+  }
+
+  const onSubmit = (data: Omit<CustomMusicSegment['data'], 'type'>) => {
+    showMusicSegment({
+      type: 'custom',
+      ...data
+    })
+    reset()
+  }
+
+  return (
+    <div ref={containerRef} className="overflow-visible">
+      <Popover
+        placement="right-start"
+        shouldCloseOnScroll={false}
+        portalContainer={containerRef.current!}
+      >
+        <Tooltip content="发送音乐">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <IoMusicalNotes className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="gap-2 p-4">
+          <Tabs
+            placement="top"
+            className="w-96"
+            fullWidth
+            selectedKey={mode}
+            onSelectionChange={setMode}
+          >
+            <Tab title="主流平台" key="default" className="flex flex-col gap-2">
+              <Select
+                onClick={(e) => e.stopPropagation()}
+                aria-label="音乐平台"
+                selectedKeys={musicType}
+                label="音乐平台"
+                placeholder="请选择音乐平台"
+                items={[
+                  {
+                    name: 'QQ音乐',
+                    id: 'qq'
+                  },
+                  {
+                    name: '网易云音乐',
+                    id: '163'
+                  },
+                  {
+                    name: '虾米音乐',
+                    id: 'xm'
+                  }
+                ]}
+                onSelectionChange={setMusicType}
+              >
+                {(item) => (
+                  <SelectItem key={item.id} value={item.id}>
+                    {item.name}
+                  </SelectItem>
+                )}
+              </Select>
+              <Input
+                value={musicId}
+                onChange={(e) => setMusicId(e.target.value)}
+                placeholder="请输入音乐ID"
+                label="音乐ID"
+              />
+              <Button
+                fullWidth
+                size="lg"
+                color="danger"
+                variant="flat"
+                radius="full"
+                onPress={() => {
+                  if (!musicId) {
+                    toast.error('请输入音乐ID')
+                    return
+                  }
+                  showMusicSegment({
+                    type: Array.from(
+                      musicType
+                    )[0] as MusicSegment['data']['type'],
+                    id: musicId
+                  })
+                  setMusicId('')
+                }}
+                startContent={<TbMusicPlus />}
+              >
+                创建{Array.from(musicType)[0] === '163' ? '网易云' : 'QQ'}音乐
+              </Button>
+            </Tab>
+            <Tab
+              title="自定义音乐"
+              key="custom"
+              className="flex flex-col gap-2"
+            >
+              <Form
+                onSubmit={handleSubmit(onSubmit)}
+                className="flex flex-col gap-2"
+                validationBehavior="native"
+              >
+                <Controller
+                  name="url"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      isRequired
+                      validate={(v) => {
+                        return !isURI(v) ? '请输入正确的音乐URL' : null
+                      }}
+                      size="sm"
+                      placeholder="请输入音乐URL"
+                      label="音乐URL"
+                    />
+                  )}
+                />
+                <Controller
+                  name="audio"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      isRequired
+                      validate={(v) => {
+                        return !isURI(v) ? '请输入正确的音频URL' : null
+                      }}
+                      size="sm"
+                      placeholder="请输入音频URL"
+                      label="音频URL"
+                    />
+                  )}
+                />
+                <Controller
+                  name="title"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      isRequired
+                      size="sm"
+                      errorMessage="请输入音乐标题"
+                      placeholder="请输入音乐标题"
+                      label="音乐标题"
+                    />
+                  )}
+                />
+                <Controller
+                  name="image"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      size="sm"
+                      placeholder="请输入封面图片URL"
+                      label="封面图片URL"
+                    />
+                  )}
+                />
+                <Controller
+                  name="content"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      size="sm"
+                      placeholder="请输入音乐描述"
+                      label="音乐描述"
+                    />
+                  )}
+                />
+                <Button
+                  fullWidth
+                  size="lg"
+                  color="danger"
+                  variant="flat"
+                  radius="full"
+                  type="submit"
+                  startContent={<TbMusicPlus />}
+                >
+                  创建自定义音乐
+                </Button>
+              </Form>
+            </Tab>
+          </Tabs>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export default MusicInsert

napcat.webui/src/components/chat_input/components/reply_insert.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useState } from 'react'
+import { BsChatQuoteFill } from 'react-icons/bs'
+import { MdAdd } from 'react-icons/md'
+
+export interface ReplyInsertProps {
+  insertReply: (messageId: string) => void
+}
+
+const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
+  const [replyId, setReplyId] = useState<string>('')
+
+  return (
+    <>
+      <Popover>
+        <Tooltip content="回复消息">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <BsChatQuoteFill className="text-lg" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Input
+            placeholder="输入消息 ID"
+            value={replyId}
+            onChange={(e) => {
+              const value = e.target.value
+              const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+              if (isNumberReg.test(value)) {
+                setReplyId(value)
+              }
+            }}
+          />
+          <Button
+            color="danger"
+            variant="flat"
+            radius="full"
+            isIconOnly
+            onPress={() => {
+              insertReply(replyId)
+              setReplyId('')
+            }}
+          >
+            <MdAdd />
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
+
+export default ReplyInsert

napcat.webui/src/components/chat_input/components/rps_insert.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { LiaHandScissors } from 'react-icons/lia'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+const RPSInsert = () => {
+  const showStructuredMessage = useShowStructuredMessage()
+
+  return (
+    <Tooltip content="发送猜拳">
+      <Button
+        color="danger"
+        variant="flat"
+        isIconOnly
+        radius="full"
+        onPress={() => {
+          showStructuredMessage([
+            {
+              type: 'rps'
+            }
+          ])
+        }}
+      >
+        <LiaHandScissors className="text-2xl" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default RPSInsert

napcat.webui/src/components/chat_input/components/show_structed_message.tsx

@@ -0,0 +1,32 @@
+import { Snippet } from '@heroui/snippet'
+
+import { OB11Segment } from '@/types/onebot'
+
+export interface ShowStructedMessageProps {
+  messages: OB11Segment[]
+}
+
+const ShowStructedMessage = ({ messages }: ShowStructedMessageProps) => {
+  return (
+    <Snippet
+      hideSymbol
+      tooltipProps={{
+        content: '点击复制'
+      }}
+      classNames={{
+        copyButton: 'self-start sticky top-0 right-0'
+      }}
+      className="bg-content1 h-96 overflow-y-scroll items-start"
+    >
+      {JSON.stringify(messages, null, 2)
+        .split('\n')
+        .map((line, i) => (
+          <span key={i} className="whitespace-pre-wrap break-all">
+            {line}
+          </span>
+        ))}
+    </Snippet>
+  )
+}
+
+export default ShowStructedMessage

napcat.webui/src/components/chat_input/components/video_insert.tsx

@@ -0,0 +1,126 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoVideocam } from 'react-icons/io5'
+import { MdEdit, MdUpload } from 'react-icons/md'
+import { TbVideoPlus } from 'react-icons/tb'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const VideoInsert = () => {
+  const [videoUrl, setVideoUrl] = useState<string>('')
+  const videoInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showVideoSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'video',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送视频">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="danger" variant="flat" isIconOnly radius="full">
+                <IoVideocam className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传视频">
+            <Button
+              className="text-lg"
+              color="danger"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                videoInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入视频地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入视频地址">
+                  <Button
+                    className="text-lg"
+                    color="danger"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={videoUrl}
+                onChange={(e) => setVideoUrl(e.target.value)}
+                placeholder="请输入视频地址"
+              />
+              <Button
+                color="danger"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(videoUrl)) {
+                    toast.error('请输入正确的视频地址')
+                    return
+                  }
+                  showVideoSegment(videoUrl)
+                  setVideoUrl('')
+                }}
+              >
+                <TbVideoPlus />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={videoInputRef}
+        hidden
+        accept="video/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showVideoSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default VideoInsert

napcat.webui/src/components/chat_input/formats/emoji_blot.ts

@@ -0,0 +1,41 @@
+import Quill from 'quill'
+
+// eslint-disable-next-line
+const Embed = Quill.import('blots/embed') as any
+export interface EmojiValue {
+  alt: string
+  src: string
+  id: string
+}
+class EmojiBlot extends Embed {
+  static blotName: string = 'emoji'
+  static tagName: string = 'img'
+  static classNames: string[] = ['w-6', 'h-6']
+
+  static create(value: HTMLImageElement) {
+    const node = super.create(value)
+    node.setAttribute('alt', value.alt)
+    node.setAttribute('src', value.src)
+    node.setAttribute('data-id', value.id)
+    node.classList.add(...EmojiBlot.classNames)
+    return node
+  }
+
+  static formats(node: HTMLImageElement): EmojiValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? '',
+      id: node.getAttribute('data-id') ?? ''
+    }
+  }
+
+  static value(node: HTMLImageElement): EmojiValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? '',
+      id: node.getAttribute('data-id') ?? ''
+    }
+  }
+}
+
+export default EmojiBlot

napcat.webui/src/components/chat_input/formats/image_blot.ts

@@ -0,0 +1,30 @@
+import Quill from 'quill'
+
+// eslint-disable-next-line
+const Embed = Quill.import('blots/embed') as any
+export interface ImageValue {
+  alt: string
+  src: string
+}
+class ImageBlot extends Embed {
+  static blotName = 'image'
+  static tagName = 'img'
+  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom']
+
+  static create(value: ImageValue) {
+    let node = super.create()
+    node.setAttribute('alt', value.alt)
+    node.setAttribute('src', value.src)
+    node.classList.add(...ImageBlot.classNames)
+    return node
+  }
+
+  static value(node: HTMLImageElement): ImageValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? ''
+    }
+  }
+}
+
+export default ImageBlot

napcat.webui/src/components/chat_input/formats/reply_blot.ts

@@ -0,0 +1,43 @@
+import Quill from 'quill'
+
+// eslint-disable-next-line
+const BlockEmbed = Quill.import('blots/block/embed') as any
+export interface ReplyBlockValue {
+  messageId: string
+}
+class ReplyBlock extends BlockEmbed {
+  static blotName = 'reply'
+  static tagName = 'div'
+  static classNames = [
+    'p-2',
+    'select-none',
+    'bg-default-100',
+    'rounded-md',
+    'pointer-events-none'
+  ]
+
+  static create(value: ReplyBlockValue) {
+    const node = super.create()
+    node.setAttribute('data-message-id', value.messageId)
+    node.setAttribute('contenteditable', 'false')
+    node.classList.add(...ReplyBlock.classNames)
+    const innerDom = document.createElement('div')
+    innerDom.classList.add('text-sm', 'text-default-500', 'relative')
+    const svgContainer = document.createElement('div')
+    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0')
+    const svg = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.9082 12.3714H20.5982C20.5182 17.0414 19.5982 17.8114 16.7282 19.5114C16.3982 19.7114 16.2882 20.1314 16.4882 20.4714C16.6882 20.8014 17.1082 20.9114 17.4482 20.7114C20.8282 18.7114 22.0082 17.4914 22.0082 11.6714V6.28141C22.0082 4.57141 20.6182 3.19141 18.9182 3.19141H15.9182C14.1582 3.19141 12.8282 4.52141 12.8282 6.28141V9.28141C12.8182 11.0414 14.1482 12.3714 15.9082 12.3714Z" fill="#292D32"></path> <path d="M5.09 12.3714H9.78C9.7 17.0414 8.78 17.8114 5.91 19.5114C5.58 19.7114 5.47 20.1314 5.67 20.4714C5.87 20.8014 6.29 20.9114 6.63 20.7114C10.01 18.7114 11.19 17.4914 11.19 11.6714V6.28141C11.19 4.57141 9.8 3.19141 8.1 3.19141H5.1C3.33 3.19141 2 4.52141 2 6.28141V9.28141C2 11.0414 3.33 12.3714 5.09 12.3714Z" fill="#292D32"></path> </g></svg>`
+    svgContainer.innerHTML = svg
+    innerDom.innerHTML = `消息ID：${value.messageId}`
+    innerDom.appendChild(svgContainer)
+    node.appendChild(innerDom)
+    return node
+  }
+
+  static value(node: HTMLElement): ReplyBlockValue {
+    return {
+      messageId: node.getAttribute('data-message-id') || ''
+    }
+  }
+}
+
+export default ReplyBlock

napcat.webui/src/components/chat_input/index.tsx

@@ -0,0 +1,207 @@
+import { Button } from '@heroui/button'
+import type { Range } from 'quill'
+import 'quill/dist/quill.core.css'
+import { useRef } from 'react'
+import toast from 'react-hot-toast'
+
+import { useCustomQuill } from '@/hooks/use_custom_quill'
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { quillToMessage } from '@/utils/onebot'
+
+import type { OB11Segment } from '@/types/onebot'
+
+import AudioInsert from './components/audio_insert'
+import DiceInsert from './components/dice_insert'
+import EmojiPicker from './components/emoji_picker'
+import FileInsert from './components/file_insert'
+import ImageInsert from './components/image_insert'
+import MusicInsert from './components/music_insert'
+import ReplyInsert from './components/reply_insert'
+import RPSInsert from './components/rps_insert'
+import VideoInsert from './components/video_insert'
+import EmojiBlot from './formats/emoji_blot'
+import type { EmojiValue } from './formats/emoji_blot'
+import ImageBlot from './formats/image_blot'
+import ReplyBlock from './formats/reply_blot'
+
+const ChatInput = () => {
+  const memorizedRange = useRef<Range | null>(null)
+
+  const showStructuredMessage = useShowStructuredMessage()
+  const formats: string[] = ['image', 'emoji', 'reply']
+  const modules = {
+    toolbar: '#toolbar'
+  }
+  const { quillRef, quill, Quill } = useCustomQuill({
+    modules,
+    formats,
+    placeholder: '请输入消息'
+  })
+
+  if (Quill && !quill) {
+    Quill.register('formats/emoji', EmojiBlot)
+    Quill.register('formats/image', ImageBlot, true)
+    Quill.register('formats/reply', ReplyBlock)
+  }
+
+  if (quill) {
+    quill.on('selection-change', (range) => {
+      if (range) {
+        const editorContent = quill.getContents()
+        const firstOp = editorContent.ops[0]
+
+        if (
+          typeof firstOp?.insert !== 'string' &&
+          firstOp?.insert?.reply &&
+          range.index === 0 &&
+          range.length !== quill.getLength()
+        ) {
+          quill.setSelection(1, Quill.sources.SILENT)
+        }
+      }
+    })
+
+    quill.on('text-change', () => {
+      const editorContent = quill.getContents()
+      const firstOp = editorContent.ops[0]
+      if (
+        firstOp &&
+        typeof firstOp.insert !== 'string' &&
+        firstOp.insert?.reply &&
+        quill.getLength() === 1
+      ) {
+        quill.insertText(1, '\n', Quill.sources.SILENT)
+      }
+    })
+
+    quill.on('editor-change', (eventName: string) => {
+      if (eventName === 'text-change') {
+        const editorContent = quill.getContents()
+        const firstOp = editorContent.ops[0]
+        if (
+          firstOp &&
+          typeof firstOp.insert !== 'string' &&
+          firstOp.insert?.reply &&
+          quill.getLength() === 1
+        ) {
+          quill.insertText(1, '\n', Quill.sources.SILENT)
+        }
+      }
+    })
+
+    quill.root.addEventListener('compositionstart', () => {
+      const editorContent = quill.getContents()
+      const firstOp = editorContent.ops[0]
+      if (
+        firstOp &&
+        typeof firstOp.insert !== 'string' &&
+        firstOp.insert?.reply &&
+        quill.getLength() === 1
+      ) {
+        quill.insertText(1, '\n', Quill.sources.SILENT)
+      }
+    })
+  }
+
+  const onOpenChange = (open: boolean) => {
+    if (open) {
+      const selection = quill?.getSelection()
+      if (selection) memorizedRange.current = selection
+    }
+  }
+
+  const insertImage = (url: string) => {
+    const selection = memorizedRange.current || quill?.getSelection()
+    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.insertEmbed(selection?.index || 0, 'image', {
+      src: url,
+      alt: '图片'
+    })
+    quill?.setSelection((selection?.index || 0) + 1, 0)
+  }
+  function insertReplyBlock(messageId: string) {
+    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+    if (!isNumberReg.test(messageId)) {
+      toast.error('请输入正确的消息ID')
+      return
+    }
+    const editorContent = quill?.getContents()
+    const firstOp = editorContent?.ops[0]
+    const currentSelection = quill?.getSelection()
+    if (
+      firstOp &&
+      typeof firstOp.insert !== 'string' &&
+      firstOp.insert?.reply
+    ) {
+      const delta = quill?.getContents()
+      if (delta) {
+        delta.ops[0] = {
+          insert: { reply: { messageId } }
+        }
+        quill?.setContents(delta, Quill.sources.USER)
+      }
+    } else {
+      quill?.insertEmbed(0, 'reply', { messageId }, Quill.sources.USER)
+    }
+    quill?.setSelection((currentSelection?.index || 0) + 1, 0)
+    quill?.blur()
+  }
+  const onInsertEmoji = (emoji: EmojiValue) => {
+    const selection = memorizedRange.current || quill?.getSelection()
+    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.insertEmbed(selection?.index || 0, 'emoji', {
+      alt: emoji.alt,
+      src: emoji.src,
+      id: emoji.id
+    })
+    quill?.setSelection((selection?.index || 0) + 1, 0)
+  }
+
+  const getChatMessage = () => {
+    const delta = quill?.getContents()
+    const ops =
+      delta?.ops?.filter((op) => {
+        return op.insert !== '\n'
+      }) ?? []
+    const messages: OB11Segment[] = ops.map((op) => {
+      return quillToMessage(op)
+    })
+    return messages
+  }
+
+  return (
+    <div>
+      <div
+        ref={quillRef}
+        className="border border-default-200 rounded-md !mb-2 !text-base !h-64"
+      />
+      <div id="toolbar" className="!border-none flex gap-2">
+        <ImageInsert insertImage={insertImage} onOpenChange={onOpenChange} />
+        <EmojiPicker
+          onInsertEmoji={onInsertEmoji}
+          onOpenChange={onOpenChange}
+        />
+        <ReplyInsert insertReply={insertReplyBlock} />
+        <FileInsert />
+        <AudioInsert />
+        <VideoInsert />
+        <MusicInsert />
+        <DiceInsert />
+        <RPSInsert />
+        <Button
+          color="danger"
+          onPress={() => {
+            const messages = getChatMessage()
+            showStructuredMessage(messages)
+          }}
+          className="ml-auto"
+        >
+          获取JSON格式
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ChatInput

napcat.webui/src/components/chat_input/modal.tsx

@@ -0,0 +1,49 @@
+import { Button } from '@heroui/button'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure
+} from '@heroui/modal'
+
+import ChatInput from '.'
+
+export default function ChatInputModal() {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+
+  return (
+    <>
+      <Button onPress={onOpen} color="danger" radius="full" variant="flat">
+        构造聊天消息
+      </Button>
+      <Modal
+        size="4xl"
+        scrollBehavior="inside"
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                构造消息
+              </ModalHeader>
+              <ModalBody className="overflow-y-auto">
+                <div className="overflow-y-auto">
+                  <ChatInput />
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" onPress={onClose} variant="flat">
+                  关闭
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

napcat.webui/src/components/code_editor.tsx

@@ -0,0 +1,55 @@
+import Editor, { OnMount } from '@monaco-editor/react'
+import { loader } from '@monaco-editor/react'
+import React from 'react'
+
+import { useTheme } from '@/hooks/use-theme'
+
+import monaco from '@/monaco'
+
+loader.config({
+  monaco,
+  paths: {
+    vs: '/webui/monaco-editor/min/vs'
+  }
+})
+
+loader.config({
+  'vs/nls': {
+    availableLanguages: { '*': 'zh-cn' }
+  }
+})
+
+export interface CodeEditorProps extends React.ComponentProps<typeof Editor> {
+  test?: string
+}
+
+export type CodeEditorRef = monaco.editor.IStandaloneCodeEditor
+
+const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>(
+  (props, ref) => {
+    const { isDark } = useTheme()
+
+    const handleEditorDidMount: OnMount = (editor, monaco) => {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(editor)
+        } else {
+          ;(ref as React.RefObject<CodeEditorRef>).current = editor
+        }
+      }
+      if (props.onMount) {
+        props.onMount(editor, monaco)
+      }
+    }
+
+    return (
+      <Editor
+        {...props}
+        onMount={handleEditorDidMount}
+        theme={isDark ? 'vs-dark' : 'light'}
+      />
+    )
+  }
+)
+
+export default CodeEditor

napcat.webui/src/components/display_card/common_card.tsx

@@ -0,0 +1,120 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Switch } from '@heroui/switch'
+import { useState } from 'react'
+import { CgDebug } from 'react-icons/cg'
+import { FiEdit3 } from 'react-icons/fi'
+import { MdDeleteForever } from 'react-icons/md'
+
+import DisplayCardContainer from './container'
+
+type NetworkType = OneBotConfig['network']
+
+export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
+  label: string
+  value: NetworkType[T][0][keyof NetworkType[T][0]]
+  render?: (
+    value: NetworkType[T][0][keyof NetworkType[T][0]]
+  ) => React.ReactNode
+}>
+
+export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
+  data: NetworkType[T][0]
+  showType?: boolean
+  typeLabel: string
+  fields: NetworkDisplayCardFields<T>
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const NetworkDisplayCard = <T extends keyof NetworkType>({
+  data,
+  showType,
+  typeLabel,
+  fields,
+  onEdit,
+  onEnable,
+  onDelete,
+  onEnableDebug
+}: NetworkDisplayCardProps<T>) => {
+  const { name, enable, debug } = data
+  const [editing, setEditing] = useState(false)
+
+  const handleEnable = () => {
+    setEditing(true)
+    onEnable().finally(() => setEditing(false))
+  }
+
+  const handleDelete = () => {
+    setEditing(true)
+    onDelete().finally(() => setEditing(false))
+  }
+
+  const handleEnableDebug = () => {
+    setEditing(true)
+    onEnableDebug().finally(() => setEditing(false))
+  }
+
+  return (
+    <DisplayCardContainer
+      action={
+        <ButtonGroup
+          fullWidth
+          isDisabled={editing}
+          radius="full"
+          size="sm"
+          variant="shadow"
+        >
+          <Button color="warning" startContent={<FiEdit3 />} onPress={onEdit}>
+            编辑
+          </Button>
+
+          <Button
+            color={debug ? 'success' : 'default'}
+            startContent={<CgDebug />}
+            onPress={handleEnableDebug}
+          >
+            {debug ? '关闭调试' : '开启调试'}
+          </Button>
+          <Button
+            color="danger"
+            startContent={<MdDeleteForever />}
+            onPress={handleDelete}
+          >
+            删除
+          </Button>
+        </ButtonGroup>
+      }
+      enableSwitch={
+        <Switch
+          isDisabled={editing}
+          isSelected={enable}
+          onChange={handleEnable}
+        />
+      }
+      tag={showType && typeLabel}
+      title={name}
+    >
+      <div className="grid grid-cols-2 gap-1">
+        {fields.map((field, index) => (
+          <div
+            key={index}
+            className={`flex items-center gap-2 ${
+              field.label === 'URL' ? 'col-span-2' : ''
+            }`}
+          >
+            <span className="text-default-400">{field.label}</span>
+            {field.render ? (
+              field.render(field.value)
+            ) : (
+              <span>{field.value}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </DisplayCardContainer>
+  )
+}
+
+export default NetworkDisplayCard

napcat.webui/src/components/display_card/container.tsx

@@ -0,0 +1,57 @@
+import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card'
+import clsx from 'clsx'
+
+import { title } from '../primitives'
+
+export interface ContainerProps {
+  title: string
+  tag?: React.ReactNode
+  action: React.ReactNode
+  enableSwitch: React.ReactNode
+  children: React.ReactNode
+}
+
+export interface DisplayCardProps {
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const DisplayCardContainer: React.FC<ContainerProps> = ({
+  title: _title,
+  action,
+  tag,
+  enableSwitch,
+  children
+}) => {
+  return (
+    <Card className="bg-opacity-50 backdrop-blur-sm">
+      <CardHeader className={'pb-0 flex items-center'}>
+        {tag && (
+          <div className="text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b">
+            {tag}
+          </div>
+        )}
+        <h2
+          className={clsx(
+            title({
+              color: 'foreground',
+              size: 'xs',
+              shadow: true
+            }),
+            'truncate'
+          )}
+        >
+          {_title}
+        </h2>
+        <div className="ml-auto">{enableSwitch}</div>
+      </CardHeader>
+      <CardBody className="text-sm">{children}</CardBody>
+      <CardFooter>{action}</CardFooter>
+    </Card>
+  )
+}
+
+export default DisplayCardContainer

napcat.webui/src/components/display_card/http_client.tsx

@@ -0,0 +1,47 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface HTTPClientDisplayCardProps {
+  data: OneBotConfig['network']['httpClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { url, reportSelfMessage, messagePostFormat } = data
+
+  const fields: NetworkDisplayCardFields<'httpClients'> = [
+    { label: 'URL', value: url },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="HTTP客户端"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default HTTPClientDisplayCard

napcat.webui/src/components/display_card/http_server.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface HTTPServerDisplayCardProps {
+  data: OneBotConfig['network']['httpServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+
+  const fields: NetworkDisplayCardFields<'httpServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: 'CORS',
+      value: enableCors,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    },
+    {
+      label: 'WS',
+      value: enableWebsocket,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="HTTP服务器"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default HTTPServerDisplayCard

napcat.webui/src/components/display_card/http_sse_server.tsx

@@ -0,0 +1,59 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface HTTPSSEServerDisplayCardProps {
+  data: OneBotConfig['network']['httpSseServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+
+  const fields: NetworkDisplayCardFields<'httpServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: 'CORS',
+      value: enableCors,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    },
+    {
+      label: 'WS',
+      value: enableWebsocket,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="HTTP服务器"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default HTTPSSEServerDisplayCard

napcat.webui/src/components/display_card/ws_client.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface WebsocketClientDisplayCardProps {
+  data: OneBotConfig['network']['websocketClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const {
+    url,
+    heartInterval,
+    reconnectInterval,
+    messagePostFormat,
+    reportSelfMessage
+  } = data
+
+  const fields: NetworkDisplayCardFields<'websocketClients'> = [
+    { label: 'URL', value: url },
+    { label: '重连间隔', value: `${reconnectInterval}ms` },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="Websocket客户端"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default WebsocketClientDisplayCard

napcat.webui/src/components/display_card/ws_server.tsx

@@ -0,0 +1,67 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface WebsocketServerDisplayCardProps {
+  data: OneBotConfig['network']['websocketServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const {
+    host,
+    port,
+    heartInterval,
+    messagePostFormat,
+    reportSelfMessage,
+    enableForcePushEvent
+  } = data
+
+  const fields: NetworkDisplayCardFields<'websocketServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    },
+    {
+      label: '强制推送事件',
+      value: enableForcePushEvent,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="Websocket服务器"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default WebsocketServerDisplayCard

napcat.webui/src/components/display_network_item.tsx

@@ -0,0 +1,58 @@
+import { Card, CardBody } from '@heroui/card'
+import clsx from 'clsx'
+
+import { title } from '@/components/primitives'
+
+export interface NetworkItemDisplayProps {
+  count: number
+  label: string
+  size?: 'sm' | 'md'
+}
+
+const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
+  count,
+  label,
+  size = 'md'
+}) => {
+  return (
+    <Card
+      className={clsx(
+        'bg-opacity-60 shadow-sm md:rounded-3xl',
+        size === 'md'
+          ? 'col-span-8 md:col-span-2 bg-danger-50 shadow-danger-100'
+          : 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200'
+      )}
+      shadow="sm"
+    >
+      <CardBody className="items-center md:gap-1 p-1 md:p-2">
+        <div
+          className={clsx(
+            'flex-1',
+            size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl',
+            title({
+              color: size === 'md' ? 'pink' : 'yellow',
+              size
+            })
+          )}
+        >
+          {count}
+        </div>
+        <div
+          className={clsx(
+            'whitespace-nowrap text-nowrap flex-shrink-0',
+            size === 'md' ? 'text-sm md:text-base' : 'text-xs md:text-sm',
+            title({
+              color: size === 'md' ? 'pink' : 'yellow',
+              shadow: true,
+              size: 'xxs'
+            })
+          )}
+        >
+          {label}
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default NetworkItemDisplay

napcat.webui/src/components/effect_card.tsx

@@ -0,0 +1,109 @@
+import { Card, CardProps } from '@heroui/card'
+import clsx from 'clsx'
+import React from 'react'
+
+export interface HoverEffectCardProps extends CardProps {
+  children: React.ReactNode
+  maxXRotation?: number
+  maxYRotation?: number
+  lightClassName?: string
+  lightStyle?: React.CSSProperties
+}
+
+const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
+  const {
+    children,
+    maxXRotation = 5,
+    maxYRotation = 5,
+    className,
+    style,
+    lightClassName,
+    lightStyle
+  } = props
+  const cardRef = React.useRef<HTMLDivElement | null>(null)
+  const lightRef = React.useRef<HTMLDivElement | null>(null)
+  const [isShowLight, setIsShowLight] = React.useState(false)
+  const [pos, setPos] = React.useState({
+    left: 0,
+    top: 0
+  })
+
+  return (
+    <Card
+      {...props}
+      ref={cardRef}
+      className={clsx(
+        'relative overflow-hidden bg-opacity-50 backdrop-blur-lg',
+        className
+      )}
+      style={{
+        willChange: 'transform',
+        transform:
+          'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
+        ...style
+      }}
+      onMouseEnter={() => {
+        if (cardRef.current) {
+          cardRef.current.style.transition = 'transform 0.3s ease-out'
+        }
+      }}
+      onMouseLeave={() => {
+        setIsShowLight(false)
+        if (cardRef.current) {
+          cardRef.current.style.transition = 'transform 0.5s'
+          cardRef.current.style.transform =
+            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'
+        }
+      }}
+      onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
+        if (cardRef.current) {
+          setIsShowLight(true)
+
+          const { x, y } = cardRef.current.getBoundingClientRect()
+          const { clientX, clientY } = e
+
+          const offsetX = clientX - x
+          const offsetY = clientY - y
+
+          const lightWidth = lightStyle?.width?.toString() || '100'
+          const lightHeight = lightStyle?.height?.toString() || '100'
+          const lightWidthNum = parseInt(lightWidth)
+          const lightHeightNum = parseInt(lightHeight)
+
+          const left = offsetX - lightWidthNum / 2
+          const top = offsetY - lightHeightNum / 2
+
+          setPos({
+            left,
+            top
+          })
+
+          cardRef.current.style.transition = 'transform 0.1s'
+
+          const rangeX = 400 / 2
+          const rangeY = 400 / 2
+
+          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation
+          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation
+
+          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+        }
+      }}
+    >
+      <div
+        ref={lightRef}
+        className={clsx(
+          isShowLight ? 'opacity-100' : 'opacity-0',
+          'absolute rounded-full blur-[150px] filter transition-opacity duration-300 dark:bg-[#2850ff] bg-[#ff4132] w-[100px] h-[100px]',
+          lightClassName
+        )}
+        style={{
+          ...pos
+        }}
+      />
+      {children}
+    </Card>
+  )
+}
+
+export default HoverEffectCard

napcat.webui/src/components/error_fallback.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@heroui/button'
+import { Code } from '@heroui/code'
+import { MdError } from 'react-icons/md'
+
+export interface ErrorFallbackProps {
+  error: Error
+  resetErrorBoundary: () => void
+}
+function errorFallbackRender({
+  error,
+  resetErrorBoundary
+}: ErrorFallbackProps) {
+  return (
+    <div className="pt-32 flex flex-col justify-center items-center">
+      <div className="flex items-center">
+        <MdError className="mr-2" color="red" size={30} />
+        <h1 className="text-2xl">出错了</h1>
+      </div>
+      <div className="my-6 flex flex-col justify-center items-center">
+        <p className="mb-2">错误信息</p>
+        <Code>{error.message}</Code>
+      </div>
+      <Button color="primary" size="md" onPress={resetErrorBoundary}>
+        重试
+      </Button>
+    </div>
+  )
+}
+
+export default errorFallbackRender

napcat.webui/src/components/file_icon.tsx

@@ -0,0 +1,166 @@
+import {
+  FaFile,
+  FaFileAudio,
+  FaFileCode,
+  FaFileCsv,
+  FaFileExcel,
+  FaFileImage,
+  FaFileLines,
+  FaFilePdf,
+  FaFilePowerpoint,
+  FaFileVideo,
+  FaFileWord,
+  FaFileZipper,
+  FaFolderClosed
+} from 'react-icons/fa6'
+
+export interface FileIconProps {
+  name?: string
+  isDirectory?: boolean
+}
+
+const FileIcon = (props: FileIconProps) => {
+  const { name, isDirectory = false } = props
+  if (isDirectory) {
+    return <FaFolderClosed className="text-yellow-500" />
+  }
+
+  const ext = name?.split('.').pop() || ''
+  if (ext) {
+    switch (ext.toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'svg':
+      case 'bmp':
+      case 'ico':
+      case 'webp':
+      case 'tiff':
+      case 'tif':
+      case 'heic':
+      case 'heif':
+      case 'avif':
+      case 'apng':
+      case 'flif':
+      case 'ai':
+      case 'psd':
+      case 'xcf':
+      case 'sketch':
+      case 'fig':
+      case 'xd':
+      case 'svgz':
+        return <FaFileImage className="text-green-500" />
+      case 'pdf':
+        return <FaFilePdf className="text-red-500" />
+      case 'doc':
+      case 'docx':
+        return <FaFileWord className="text-blue-500" />
+      case 'xls':
+      case 'xlsx':
+        return <FaFileExcel className="text-green-500" />
+      case 'csv':
+        return <FaFileCsv className="text-green-500" />
+      case 'ppt':
+      case 'pptx':
+        return <FaFilePowerpoint className="text-red-500" />
+      case 'zip':
+      case 'rar':
+      case '7z':
+      case 'tar':
+      case 'gz':
+      case 'bz2':
+      case 'xz':
+      case 'lz':
+      case 'lzma':
+      case 'zst':
+      case 'zstd':
+      case 'z':
+      case 'taz':
+      case 'tz':
+      case 'tzo':
+        return <FaFileZipper className="text-green-500" />
+      case 'txt':
+        return <FaFileLines className="text-gray-500" />
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+        return <FaFileAudio className="text-green-500" />
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'wmv':
+        return <FaFileVideo className="text-red-500" />
+      case 'html':
+      case 'css':
+      case 'js':
+      case 'ts':
+      case 'jsx':
+      case 'tsx':
+      case 'json':
+      case 'xml':
+      case 'yaml':
+      case 'yml':
+      case 'md':
+      case 'sh':
+      case 'py':
+      case 'java':
+      case 'c':
+      case 'cpp':
+      case 'cs':
+      case 'go':
+      case 'php':
+      case 'rb':
+      case 'pl':
+      case 'swift':
+      case 'kt':
+      case 'rs':
+      case 'sql':
+      case 'r':
+      case 'scala':
+      case 'groovy':
+      case 'dart':
+      case 'lua':
+      case 'perl':
+      case 'h':
+      case 'm':
+      case 'mm':
+      case 'makefile':
+      case 'cmake':
+      case 'dockerfile':
+      case 'gradle':
+      case 'properties':
+      case 'ini':
+      case 'conf':
+      case 'env':
+      case 'bat':
+      case 'cmd':
+      case 'ps1':
+      case 'psm1':
+      case 'psd1':
+      case 'ps1xml':
+      case 'psc1':
+      case 'pssc':
+      case 'nuspec':
+      case 'resx':
+      case 'resw':
+      case 'csproj':
+      case 'vbproj':
+      case 'vcxproj':
+      case 'fsproj':
+      case 'sln':
+      case 'suo':
+      case 'user':
+      case 'userosscache':
+      case 'sln.docstates':
+      case 'dll':
+        return <FaFileCode className="text-blue-500" />
+      default:
+        return <FaFile className="text-gray-500" />
+    }
+  }
+
+  return <FaFile className="text-gray-500" />
+}
+
+export default FileIcon

napcat.webui/src/components/file_manage/create_file_modal.tsx

@@ -0,0 +1,64 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Input } from '@heroui/input'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+
+interface CreateFileModalProps {
+  isOpen: boolean
+  fileType: 'file' | 'directory'
+  newFileName: string
+  onTypeChange: (type: 'file' | 'directory') => void
+  onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClose: () => void
+  onCreate: () => void
+}
+
+export default function CreateFileModal({
+  isOpen,
+  fileType,
+  newFileName,
+  onTypeChange,
+  onNameChange,
+  onClose,
+  onCreate
+}: CreateFileModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>新建</ModalHeader>
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <ButtonGroup color="danger">
+              <Button
+                variant={fileType === 'file' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('file')}
+              >
+                文件
+              </Button>
+              <Button
+                variant={fileType === 'directory' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('directory')}
+              >
+                目录
+              </Button>
+            </ButtonGroup>
+            <Input label="名称" value={newFileName} onChange={onNameChange} />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onCreate}>
+            创建
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/file_edit_modal.tsx

@@ -0,0 +1,94 @@
+import { Button } from '@heroui/button'
+import { Code } from '@heroui/code'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+
+import CodeEditor from '@/components/code_editor'
+
+interface FileEditModalProps {
+  isOpen: boolean
+  file: { path: string; content: string } | null
+  onClose: () => void
+  onSave: () => void
+  onContentChange: (newContent?: string) => void
+}
+
+export default function FileEditModal({
+  isOpen,
+  file,
+  onClose,
+  onSave,
+  onContentChange
+}: FileEditModalProps) {
+  // 根据文件后缀返回对应语言
+  const getLanguage = (filePath: string) => {
+    if (filePath.endsWith('.js')) return 'javascript'
+    if (filePath.endsWith('.ts')) return 'typescript'
+    if (filePath.endsWith('.tsx')) return 'tsx'
+    if (filePath.endsWith('.jsx')) return 'jsx'
+    if (filePath.endsWith('.vue')) return 'vue'
+    if (filePath.endsWith('.svelte')) return 'svelte'
+    if (filePath.endsWith('.json')) return 'json'
+    if (filePath.endsWith('.html')) return 'html'
+    if (filePath.endsWith('.css')) return 'css'
+    if (filePath.endsWith('.scss')) return 'scss'
+    if (filePath.endsWith('.less')) return 'less'
+    if (filePath.endsWith('.md')) return 'markdown'
+    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml'
+    if (filePath.endsWith('.xml')) return 'xml'
+    if (filePath.endsWith('.sql')) return 'sql'
+    if (filePath.endsWith('.sh')) return 'shell'
+    if (filePath.endsWith('.bat')) return 'bat'
+    if (filePath.endsWith('.php')) return 'php'
+    if (filePath.endsWith('.java')) return 'java'
+    if (filePath.endsWith('.c')) return 'c'
+    if (filePath.endsWith('.cpp')) return 'cpp'
+    if (filePath.endsWith('.h')) return 'h'
+    if (filePath.endsWith('.hpp')) return 'hpp'
+    if (filePath.endsWith('.go')) return 'go'
+    if (filePath.endsWith('.py')) return 'python'
+    if (filePath.endsWith('.rb')) return 'ruby'
+    if (filePath.endsWith('.cs')) return 'csharp'
+    if (filePath.endsWith('.swift')) return 'swift'
+    if (filePath.endsWith('.vb')) return 'vb'
+    if (filePath.endsWith('.lua')) return 'lua'
+    if (filePath.endsWith('.pl')) return 'perl'
+    if (filePath.endsWith('.r')) return 'r'
+    return 'plaintext'
+  }
+
+  return (
+    <Modal size="full" isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader className="flex items-center gap-2 bg-content2 bg-opacity-50">
+          <span>编辑文件</span>
+          <Code className="text-xs">{file?.path}</Code>
+        </ModalHeader>
+        <ModalBody className="p-0">
+          <div className="h-full">
+            <CodeEditor
+              height="100%"
+              value={file?.content || ''}
+              onChange={onContentChange}
+              options={{ wordWrap: 'on' }}
+              language={file?.path ? getLanguage(file.path) : 'plaintext'}
+            />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onSave}>
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/file_preview_modal.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@heroui/button'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+interface FilePreviewModalProps {
+  isOpen: boolean
+  filePath: string
+  onClose: () => void
+}
+
+export const videoExts = ['.mp4', '.webm']
+export const audioExts = ['.mp3', '.wav']
+
+export const supportedPreviewExts = [...videoExts, ...audioExts]
+
+export default function FilePreviewModal({
+  isOpen,
+  filePath,
+  onClose
+}: FilePreviewModalProps) {
+  const ext = path.extname(filePath).toLowerCase()
+  const { data, loading, error, run } = useRequest(
+    async () => FileManager.downloadToURL(filePath),
+    {
+      refreshDeps: [filePath],
+      manual: true,
+      refreshDepsAction: () => {
+        const ext = path.extname(filePath).toLowerCase()
+        if (!filePath || !supportedPreviewExts.includes(ext)) {
+          return
+        }
+        run()
+      }
+    }
+  )
+
+  useEffect(() => {
+    if (filePath) {
+      run()
+    }
+  }, [filePath])
+
+  let contentElement = null
+  if (!supportedPreviewExts.includes(ext)) {
+    contentElement = <div>暂不支持预览此文件类型</div>
+  } else if (error) {
+    contentElement = <div>读取文件失败</div>
+  } else if (loading || !data) {
+    contentElement = (
+      <div className="flex justify-center items-center h-full">
+        <Spinner />
+      </div>
+    )
+  } else if (videoExts.includes(ext)) {
+    contentElement = <video src={data} controls className="max-w-full" />
+  } else if (audioExts.includes(ext)) {
+    contentElement = <audio src={data} controls className="w-full" />
+  } else {
+    contentElement = (
+      <div className="flex justify-center items-center h-full">
+        <Spinner />
+      </div>
+    )
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="3xl">
+      <ModalContent>
+        <ModalHeader>文件预览</ModalHeader>
+        <ModalBody className="flex justify-center items-center">
+          {contentElement}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            关闭
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/file_table.tsx

@@ -0,0 +1,245 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Pagination } from '@heroui/pagination'
+import { Spinner } from '@heroui/spinner'
+import {
+  type Selection,
+  type SortDescriptor,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow
+} from '@heroui/table'
+import path from 'path-browserify'
+import { useCallback, useEffect, useState } from 'react'
+import { BiRename } from 'react-icons/bi'
+import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { PhotoSlider } from 'react-photo-view'
+
+import FileIcon from '@/components/file_icon'
+
+import type { FileInfo } from '@/controllers/file_manager'
+
+import { supportedPreviewExts } from './file_preview_modal'
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+
+export interface FileTableProps {
+  files: FileInfo[]
+  currentPath: string
+  loading: boolean
+  sortDescriptor: SortDescriptor
+  onSortChange: (descriptor: SortDescriptor) => void
+  selectedFiles: Selection
+  onSelectionChange: (selected: Selection) => void
+  onDirectoryClick: (dirPath: string) => void
+  onEdit: (filePath: string) => void
+  onPreview: (filePath: string) => void
+  onRenameRequest: (name: string) => void
+  onMoveRequest: (name: string) => void
+  onCopyPath: (fileName: string) => void
+  onDelete: (filePath: string) => void
+  onDownload: (filePath: string) => void
+}
+
+const PAGE_SIZE = 20
+
+export default function FileTable({
+  files,
+  currentPath,
+  loading,
+  sortDescriptor,
+  onSortChange,
+  selectedFiles,
+  onSelectionChange,
+  onDirectoryClick,
+  onEdit,
+  onPreview,
+  onRenameRequest,
+  onMoveRequest,
+  onCopyPath,
+  onDelete,
+  onDownload
+}: FileTableProps) {
+  const [page, setPage] = useState(1)
+  const pages = Math.ceil(files.length / PAGE_SIZE) || 1
+  const start = (page - 1) * PAGE_SIZE
+  const end = start + PAGE_SIZE
+  const displayFiles = files.slice(start, end)
+  const [showImage, setShowImage] = useState(false)
+  const [previewIndex, setPreviewIndex] = useState(0)
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
+
+  const addPreviewImage = useCallback((image: PreviewImage) => {
+    setPreviewImages((prev) => {
+      const exists = prev.some((p) => p.key === image.key)
+      if (exists) return prev
+      return [...prev, image]
+    })
+  }, [])
+
+  useEffect(() => {
+    setPreviewImages([])
+    setPreviewIndex(0)
+    setShowImage(false)
+  }, [files])
+
+  const onPreviewImage = (name: string, images: PreviewImage[]) => {
+    const index = images.findIndex((image) => image.key === name)
+    if (index === -1) {
+      return
+    }
+    setPreviewIndex(index)
+    setShowImage(true)
+  }
+
+  return (
+    <>
+      <PhotoSlider
+        images={previewImages}
+        visible={showImage}
+        onClose={() => setShowImage(false)}
+        index={previewIndex}
+        onIndexChange={setPreviewIndex}
+      />
+      <Table
+        aria-label="文件列表"
+        sortDescriptor={sortDescriptor}
+        onSortChange={onSortChange}
+        onSelectionChange={onSelectionChange}
+        defaultSelectedKeys={[]}
+        selectedKeys={selectedFiles}
+        selectionMode="multiple"
+        bottomContent={
+          <div className="flex w-full justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="danger"
+              page={page}
+              total={pages}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
+        }
+      >
+        <TableHeader>
+          <TableColumn key="name" allowsSorting>
+            名称
+          </TableColumn>
+          <TableColumn key="type" allowsSorting>
+            类型
+          </TableColumn>
+          <TableColumn key="size" allowsSorting>
+            大小
+          </TableColumn>
+          <TableColumn key="mtime" allowsSorting>
+            修改时间
+          </TableColumn>
+          <TableColumn key="actions">操作</TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={loading}
+          loadingContent={
+            <div className="flex justify-center items-center h-full">
+              <Spinner />
+            </div>
+          }
+        >
+          {displayFiles.map((file: FileInfo) => {
+            const filePath = path.join(currentPath, file.name)
+            const ext = path.extname(file.name).toLowerCase()
+            const previewable = supportedPreviewExts.includes(ext)
+            const images = previewImages
+            return (
+              <TableRow key={file.name}>
+                <TableCell>
+                  {imageExts.includes(ext) ? (
+                    <ImageNameButton
+                      name={file.name}
+                      filePath={filePath}
+                      onPreview={() => onPreviewImage(file.name, images)}
+                      onAddPreview={addPreviewImage}
+                    />
+                  ) : (
+                    <Button
+                      variant="light"
+                      onPress={() =>
+                        file.isDirectory
+                          ? onDirectoryClick(file.name)
+                          : previewable
+                            ? onPreview(filePath)
+                            : onEdit(filePath)
+                      }
+                      className="text-left justify-start"
+                      startContent={
+                        <FileIcon
+                          name={file.name}
+                          isDirectory={file.isDirectory}
+                        />
+                      }
+                    >
+                      {file.name}
+                    </Button>
+                  )}
+                </TableCell>
+                <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
+                <TableCell>
+                  {isNaN(file.size) || file.isDirectory
+                    ? '-'
+                    : `${file.size} 字节`}
+                </TableCell>
+                <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
+                <TableCell>
+                  <ButtonGroup size="sm">
+                    <Button
+                      isIconOnly
+                      color="danger"
+                      variant="flat"
+                      onPress={() => onRenameRequest(file.name)}
+                    >
+                      <BiRename />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="danger"
+                      variant="flat"
+                      onPress={() => onMoveRequest(file.name)}
+                    >
+                      <FiMove />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="danger"
+                      variant="flat"
+                      onPress={() => onCopyPath(file.name)}
+                    >
+                      <FiCopy />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="danger"
+                      variant="flat"
+                      onPress={() => onDownload(filePath)}
+                    >
+                      <FiDownload />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color="danger"
+                      variant="flat"
+                      onPress={() => onDelete(filePath)}
+                    >
+                      <FiTrash2 />
+                    </Button>
+                  </ButtonGroup>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </>
+  )
+}

napcat.webui/src/components/file_manage/image_name_button.tsx

@@ -0,0 +1,85 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+import FileIcon from '../file_icon'
+
+export interface PreviewImage {
+  key: string
+  src: string
+  alt: string
+}
+export const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+export interface ImageNameButtonProps {
+  name: string
+  filePath: string
+  onPreview: () => void
+  onAddPreview: (image: PreviewImage) => void
+}
+
+export default function ImageNameButton({
+  name,
+  filePath,
+  onPreview,
+  onAddPreview
+}: ImageNameButtonProps) {
+  const { data, loading, error, run } = useRequest(
+    async () => FileManager.downloadToURL(filePath),
+    {
+      refreshDeps: [filePath],
+      manual: true,
+      refreshDepsAction: () => {
+        const ext = path.extname(filePath).toLowerCase()
+        if (!filePath || !imageExts.includes(ext)) {
+          return
+        }
+        run()
+      }
+    }
+  )
+  useEffect(() => {
+    if (data) {
+      onAddPreview({
+        key: name,
+        src: data,
+        alt: name
+      })
+    }
+  }, [data, name, onAddPreview])
+
+  useEffect(() => {
+    if (filePath) {
+      run()
+    }
+  }, [])
+
+  return (
+    <Button
+      variant="light"
+      className="text-left justify-start"
+      onPress={onPreview}
+      startContent={
+        error ? (
+          <FileIcon name={name} isDirectory={false} />
+        ) : loading || !data ? (
+          <Spinner size="sm" />
+        ) : (
+          <Image
+            src={data}
+            alt={name}
+            className="w-8 h-8 flex-shrink-0"
+            radius="sm"
+          />
+        )
+      }
+    >
+      {name}
+    </Button>
+  )
+}

napcat.webui/src/components/file_manage/move_modal.tsx

@@ -0,0 +1,168 @@
+import { Button } from '@heroui/button'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import clsx from 'clsx'
+import path from 'path-browserify'
+import { useState } from 'react'
+import { IoAdd, IoRemove } from 'react-icons/io5'
+
+import FileManager from '@/controllers/file_manager'
+
+interface MoveModalProps {
+  isOpen: boolean
+  moveTargetPath: string
+  selectionInfo: string
+  onClose: () => void
+  onMove: () => void
+  onSelect: (dir: string) => void // 新增回调
+}
+
+// 将 DirectoryTree 改为递归组件
+// 新增 selectedPath 属性，用于标识当前选中的目录
+function DirectoryTree({
+  basePath,
+  onSelect,
+  selectedPath
+}: {
+  basePath: string
+  onSelect: (dir: string) => void
+  selectedPath?: string
+}) {
+  const [dirs, setDirs] = useState<string[]>([])
+  const [expanded, setExpanded] = useState(false)
+  // 新增loading状态
+  const [loading, setLoading] = useState(false)
+
+  const fetchDirectories = async () => {
+    try {
+      // 直接使用 basePath 调用接口，移除 process.platform 判断
+      const list = await FileManager.listDirectories(basePath)
+      setDirs(list.map((item) => item.name))
+    } catch (error) {
+      // ...error handling...
+    }
+  }
+
+  const handleToggle = async () => {
+    if (!expanded) {
+      setExpanded(true)
+      setLoading(true)
+      await fetchDirectories()
+      setLoading(false)
+    } else {
+      setExpanded(false)
+    }
+  }
+
+  const handleClick = () => {
+    onSelect(basePath)
+    handleToggle()
+  }
+
+  // 计算显示的名称
+  const getDisplayName = () => {
+    if (basePath === '/') return '/'
+    if (/^[A-Z]:$/i.test(basePath)) return basePath
+    return path.basename(basePath)
+  }
+
+  // 更新 Button 的 variant 逻辑
+  const isSeleted = selectedPath === basePath
+  const variant = isSeleted
+    ? 'solid'
+    : selectedPath && path.dirname(selectedPath) === basePath
+      ? 'flat'
+      : 'light'
+
+  return (
+    <div className="ml-4">
+      <Button
+        onPress={handleClick}
+        className="py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md"
+        size="sm"
+        color="danger"
+        variant={variant}
+        startContent={
+          <div
+            className={clsx(
+              'rounded-md',
+              isSeleted ? 'bg-danger-600' : 'bg-danger-50'
+            )}
+          >
+            {expanded ? <IoRemove /> : <IoAdd />}
+          </div>
+        }
+      >
+        {getDisplayName()}
+      </Button>
+      {expanded && (
+        <div>
+          {loading ? (
+            <div className="flex py-1 px-8">
+              <Spinner size="sm" color="danger" />
+            </div>
+          ) : (
+            dirs.map((dirName) => {
+              const childPath =
+                basePath === '/' && /^[A-Z]:$/i.test(dirName)
+                  ? dirName
+                  : path.join(basePath, dirName)
+              return (
+                <DirectoryTree
+                  key={childPath}
+                  basePath={childPath}
+                  onSelect={onSelect}
+                  selectedPath={selectedPath}
+                />
+              )
+            })
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function MoveModal({
+  isOpen,
+  moveTargetPath,
+  selectionInfo,
+  onClose,
+  onMove,
+  onSelect
+}: MoveModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>选择目标目录</ModalHeader>
+        <ModalBody>
+          <div className="rounded-md p-2 border border-default-300 overflow-auto max-h-60">
+            <DirectoryTree
+              basePath="/"
+              onSelect={onSelect}
+              selectedPath={moveTargetPath}
+            />
+          </div>
+          <p className="text-sm text-default-500 mt-2">
+            当前选择：{moveTargetPath || '未选择'}
+          </p>
+          <p className="text-sm text-default-500">移动项：{selectionInfo}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onMove}>
+            确定
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/rename_modal.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+
+interface RenameModalProps {
+  isOpen: boolean
+  newFileName: string
+  onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClose: () => void
+  onRename: () => void
+}
+
+export default function RenameModal({
+  isOpen,
+  newFileName,
+  onNameChange,
+  onClose,
+  onRename
+}: RenameModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>重命名</ModalHeader>
+        <ModalBody>
+          <Input label="新名称" value={newFileName} onChange={onNameChange} />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onRename}>
+            确定
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/github_info/icon_wrapper.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+
+export interface IconWrapperProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+const IconWrapper = ({ children, className }: IconWrapperProps) => (
+  <div
+    className={clsx(
+      className,
+      'flex items-center rounded-small justify-center w-7 h-7'
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default IconWrapper

napcat.webui/src/components/github_info/item_counter.tsx

@@ -0,0 +1,10 @@
+import { ChevronRightIcon } from '../icons'
+
+const ItemCounter = ({ number }: { number: number }) => (
+  <div className="flex items-center gap-1 text-default-400">
+    <span className="text-small">{number}</span>
+    <ChevronRightIcon className="text-xl" />
+  </div>
+)
+
+export default ItemCounter

napcat.webui/src/components/github_info/release.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+
+import { getReleaseTime } from '@/utils/time'
+
+import type { GithubRelease as GithubReleaseType } from '@/types/github'
+
+export interface GithubReleaseProps {
+  releaseData: GithubReleaseType
+}
+const GithubRelease: React.FC<GithubReleaseProps> = (props) => {
+  const { releaseData } = props
+  const [releaseTime, setReleaseTime] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (releaseData) {
+      const timer = setInterval(() => {
+        const time = getReleaseTime(releaseData.published_at)
+
+        setReleaseTime(time)
+      }, 1000)
+
+      return () => clearInterval(timer)
+    }
+  }, [releaseData])
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span>Releases</span>
+      <div className="px-2 py-1 rounded-small bg-default-100 bg-opacity-50 backdrop-blur-sm group-data-[hover=true]:bg-default-200">
+        <span className="text-tiny text-default-600">{releaseData.name}</span>
+        <div className="flex gap-2 text-tiny">
+          <span className="text-default-500">{releaseTime}</span>
+          <span className="text-success">Latest</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GithubRelease

napcat.webui/src/components/hitokoto.tsx

@@ -0,0 +1,76 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { useRequest } from 'ahooks'
+import toast from 'react-hot-toast'
+import { IoCopy, IoRefresh } from 'react-icons/io5'
+
+import { request } from '@/utils/request'
+
+import PageLoading from './page_loading'
+
+export default function Hitokoto() {
+  const {
+    data: dataOri,
+    error,
+    loading,
+    run
+  } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
+    pollingInterval: 10000,
+    throttleWait: 1000
+  })
+  const data = dataOri?.data
+  const onCopy = () => {
+    try {
+      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`
+      navigator.clipboard.writeText(text)
+      toast.success('复制成功')
+    } catch (error) {
+      toast.error('复制失败, 请手动复制')
+    }
+  }
+  return (
+    <div>
+      <div className="relative">
+        {loading && <PageLoading />}
+        {error ? (
+          <div className="text-danger-400">一言加载失败：{error.message}</div>
+        ) : (
+          <>
+            <div>{data?.hitokoto}</div>
+            <div className="text-right">
+              —— <span className="text-default-400">{data?.from}</span>{' '}
+              {data?.from_who}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="flex gap-2">
+        <Tooltip content="刷新" placement="top">
+          <Button
+            onPress={run}
+            size="sm"
+            isLoading={loading}
+            isIconOnly
+            radius="full"
+            color="danger"
+            variant="flat"
+          >
+            <IoRefresh />
+          </Button>
+        </Tooltip>
+        <Tooltip content="复制" placement="top">
+          <Button
+            onPress={onCopy}
+            size="sm"
+            isIconOnly
+            radius="full"
+            color="success"
+            variant="flat"
+          >
+            <IoCopy />
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

napcat.webui/src/components/hover_titled_card.tsx

@@ -0,0 +1,146 @@
+import { motion, useMotionValue, useSpring } from 'motion/react'
+import { useRef, useState } from 'react'
+
+const springValues = {
+  damping: 30,
+  stiffness: 100,
+  mass: 2
+}
+
+export interface HoverTiltedCardProps {
+  imageSrc: string
+  altText?: string
+  captionText?: string
+  containerHeight?: string
+  containerWidth?: string
+  imageHeight?: string
+  imageWidth?: string
+  scaleOnHover?: number
+  rotateAmplitude?: number
+  showTooltip?: boolean
+  overlayContent?: React.ReactNode
+  displayOverlayContent?: boolean
+}
+
+export default function HoverTiltedCard({
+  imageSrc,
+  altText = 'NapCat',
+  captionText = 'NapCat',
+  containerHeight = '200px',
+  containerWidth = '100%',
+  imageHeight = '200px',
+  imageWidth = '200px',
+  scaleOnHover = 1.1,
+  rotateAmplitude = 14,
+  showTooltip = false,
+  overlayContent = (
+    <div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-danger-600 text-default-100 bg-opacity-80">
+      NapCat
+    </div>
+  ),
+  displayOverlayContent = true
+}: HoverTiltedCardProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const rotateX = useSpring(useMotionValue(0), springValues)
+  const rotateY = useSpring(useMotionValue(0), springValues)
+  const scale = useSpring(1, springValues)
+  const opacity = useSpring(0)
+  const rotateFigcaption = useSpring(0, {
+    stiffness: 350,
+    damping: 30,
+    mass: 1
+  })
+
+  const [lastY, setLastY] = useState(0)
+
+  function handleMouse(e: React.MouseEvent) {
+    if (!ref.current) return
+
+    const rect = ref.current.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left - rect.width / 2
+    const offsetY = e.clientY - rect.top - rect.height / 2
+
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude
+
+    rotateX.set(rotationX)
+    rotateY.set(rotationY)
+
+    x.set(e.clientX - rect.left)
+    y.set(e.clientY - rect.top)
+
+    const velocityY = offsetY - lastY
+    rotateFigcaption.set(-velocityY * 0.6)
+    setLastY(offsetY)
+  }
+
+  function handleMouseEnter() {
+    scale.set(scaleOnHover)
+    opacity.set(1)
+  }
+
+  function handleMouseLeave() {
+    opacity.set(0)
+    scale.set(1)
+    rotateX.set(0)
+    rotateY.set(0)
+    rotateFigcaption.set(0)
+  }
+
+  return (
+    <figure
+      ref={ref}
+      className="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
+      style={{
+        height: containerHeight,
+        width: containerWidth
+      }}
+      onMouseMove={handleMouse}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <motion.div
+        className="relative [transform-style:preserve-3d]"
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          rotateX,
+          rotateY,
+          scale
+        }}
+      >
+        <motion.img
+          src={imageSrc}
+          alt={altText}
+          className="absolute top-0 left-0 object-cover rounded-md will-change-transform [transform:translateZ(0)] pointer-events-none select-none"
+          style={{
+            width: imageWidth,
+            height: imageHeight
+          }}
+        />
+
+        {displayOverlayContent && overlayContent && (
+          <motion.div className="absolute top-0 left-0 right-0 z-10 flex justify-center will-change-transform [transform:translateZ(30px)]">
+            {overlayContent}
+          </motion.div>
+        )}
+      </motion.div>
+
+      {showTooltip && (
+        <motion.figcaption
+          className="pointer-events-none absolute left-0 top-0 rounded-md bg-white px-2 py-1 text-sm text-default-900 opacity-0 z-10 hidden sm:block"
+          style={{
+            x,
+            y,
+            opacity,
+            rotate: rotateFigcaption
+          }}
+        >
+          {captionText}
+        </motion.figcaption>
+      )}
+    </figure>
+  )
+}

napcat.webui/src/components/input/image_input.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Input } from '@heroui/input'
+import { useRef } from 'react'
+
+export interface ImageInputProps {
+  onChange: (base64: string) => void
+  value: string
+  label?: string
+}
+
+const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  return (
+    <div className="flex items-end gap-2">
+      <div className="w-5 h-5 flex-shrink-0">
+        <Image
+          src={value}
+          alt={label}
+          className="w-5 h-5 flex-shrink-0 rounded-none"
+        />
+      </div>
+      <Input
+        ref={inputRef}
+        label={label}
+        type="file"
+        placeholder="选择图片"
+        accept="image/*"
+        onChange={async (e) => {
+          const file = e.target.files?.[0]
+          if (file) {
+            const reader = new FileReader()
+            reader.onload = async () => {
+              const base64 = reader.result as string
+              onChange(base64)
+            }
+            reader.readAsDataURL(file)
+          }
+        }}
+      />
+      <Button
+        onPress={() => {
+          onChange('')
+          if (inputRef.current) inputRef.current.value = ''
+        }}
+        color="danger"
+        variant="flat"
+        size="sm"
+      >
+        删除
+      </Button>
+    </div>
+  )
+}
+
+export default ImageInput

napcat.webui/src/components/log_com/history.tsx

@@ -0,0 +1,136 @@
+import { Button } from '@heroui/button'
+import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Select, SelectItem } from '@heroui/select'
+import type { Selection } from '@react-types/shared'
+import { useEffect, useRef, useState } from 'react'
+
+import { colorizeLogLevel } from '@/utils/terminal'
+
+import PageLoading from '../page_loading'
+import XTerm from '../xterm'
+import type { XTermRef } from '../xterm'
+import LogLevelSelect from './log_level_select'
+
+export interface HistoryLogsProps {
+  list: string[]
+  onSelect: (name: string) => void
+  selectedLog?: string
+  refreshList: () => void
+  refreshLog: () => void
+  listLoading?: boolean
+  logLoading?: boolean
+  listError?: Error
+  logContent?: string
+}
+const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
+  const {
+    list,
+    onSelect,
+    selectedLog,
+    refreshList,
+    refreshLog,
+    listLoading,
+    logContent,
+    listError,
+    logLoading
+  } = props
+  const Xterm = useRef<XTermRef>(null)
+
+  const [logLevel, setLogLevel] = useState<Selection>(
+    new Set(['info', 'warn', 'error'])
+  )
+
+  const logToColored = (log: string) => {
+    const logs = log
+      .split('\n')
+      .map((line) => {
+        const colored = colorizeLogLevel(line)
+        return colored
+      })
+      .filter((log) => {
+        if (logLevel === 'all') {
+          return true
+        }
+        return logLevel.has(log.level)
+      })
+      .map((log) => log.content)
+      .join('\r\n')
+    return logs
+  }
+
+  const onDownloadLog = () => {
+    if (!logContent) {
+      return
+    }
+    const blob = new Blob([logContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${selectedLog}.log`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  useEffect(() => {
+    if (!Xterm.current || !logContent) {
+      return
+    }
+    Xterm.current.clear()
+    const _logContent = logToColored(logContent)
+    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ')
+  }, [logContent, logLevel])
+
+  return (
+    <>
+      <title>历史日志 - NapCat WebUI</title>
+      <Card className="max-w-full h-full bg-opacity-50 backdrop-blur-sm">
+        <CardHeader className="flex-row justify-start gap-3">
+          <Select
+            label="选择日志"
+            size="sm"
+            isLoading={listLoading}
+            errorMessage={listError?.message}
+            classNames={{
+              trigger:
+                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60'
+            }}
+            placeholder="选择日志"
+            onChange={(e) => {
+              const value = e.target.value
+              if (!value) {
+                return
+              }
+              onSelect(value)
+            }}
+            selectedKeys={[selectedLog || '']}
+            items={list.map((name) => ({
+              value: name,
+              label: name
+            }))}
+          >
+            {(item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            )}
+          </Select>
+          <LogLevelSelect
+            selectedKeys={logLevel}
+            onSelectionChange={setLogLevel}
+          />
+          <Button className="flex-shrink-0" onPress={onDownloadLog}>
+            下载日志
+          </Button>
+          <Button onPress={refreshList}>刷新列表</Button>
+          <Button onPress={refreshLog}>刷新日志</Button>
+        </CardHeader>
+        <CardBody className="relative">
+          <PageLoading loading={logLoading} />
+          <XTerm className="w-full h-full" ref={Xterm} />
+        </CardBody>
+      </Card>
+    </>
+  )
+}
+
+export default HistoryLogs

napcat.webui/src/components/log_com/log_level_select.tsx

@@ -0,0 +1,87 @@
+import { Chip } from '@heroui/chip'
+import { Select, SelectItem } from '@heroui/select'
+import { SharedSelection } from '@heroui/system'
+import type { Selection } from '@react-types/shared'
+
+import { LogLevel } from '@/const/enum'
+
+export interface LogLevelSelectProps {
+  selectedKeys: Selection
+  onSelectionChange: (keys: SharedSelection) => void
+}
+const logLevelColor: {
+  [key in LogLevel]:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+} = {
+  [LogLevel.DEBUG]: 'default',
+  [LogLevel.INFO]: 'primary',
+  [LogLevel.WARN]: 'warning',
+  [LogLevel.ERROR]: 'danger',
+  [LogLevel.FATAL]: 'danger'
+}
+const LogLevelSelect = (props: LogLevelSelectProps) => {
+  const { selectedKeys, onSelectionChange } = props
+  return (
+    <Select
+      selectedKeys={selectedKeys}
+      onSelectionChange={(selectedKeys) => {
+        if (selectedKeys !== 'all' && selectedKeys?.size === 0) {
+          selectedKeys = 'all'
+        }
+        onSelectionChange(selectedKeys)
+      }}
+      label="日志级别"
+      selectionMode="multiple"
+      aria-label="Log Level"
+      classNames={{
+        label: 'mb-2',
+        trigger: 'bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
+        popoverContent: 'bg-opacity-50 backdrop-blur-sm'
+      }}
+      size="sm"
+      items={[
+        { label: 'Debug', value: LogLevel.DEBUG },
+        { label: 'Info', value: LogLevel.INFO },
+        { label: 'Warn', value: LogLevel.WARN },
+        { label: 'Error', value: LogLevel.ERROR },
+        { label: 'Fatal', value: LogLevel.FATAL }
+      ]}
+      renderValue={(value) => {
+        if (value.length === 5) {
+          return (
+            <Chip size="sm" color="primary" variant="flat">
+              全部
+            </Chip>
+          )
+        }
+        return (
+          <div className="flex gap-2">
+            {value.map((v) => (
+              <Chip
+                size="sm"
+                key={v.key}
+                color={logLevelColor[v.data?.value as LogLevel]}
+                variant="flat"
+              >
+                {v.data?.label}
+              </Chip>
+            ))}
+          </div>
+        )
+      }}
+    >
+      {(item) => (
+        <SelectItem key={item.value} value={item.value}>
+          {item.label}
+        </SelectItem>
+      )}
+    </Select>
+  )
+}
+
+export default LogLevelSelect

napcat.webui/src/components/log_com/realtime.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@heroui/button'
+import type { Selection } from '@react-types/shared'
+import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoDownloadOutline } from 'react-icons/io5'
+
+import { colorizeLogLevelWithTag } from '@/utils/terminal'
+
+import WebUIManager, { Log } from '@/controllers/webui_manager'
+
+import type { XTermRef } from '../xterm'
+import XTerm from '../xterm'
+import LogLevelSelect from './log_level_select'
+
+const RealTimeLogs = () => {
+  const Xterm = useRef<XTermRef>(null)
+  const [logLevel, setLogLevel] = useState<Selection>(
+    new Set(['info', 'warn', 'error'])
+  )
+  const [dataArr, setDataArr] = useState<Log[]>([])
+
+  const onDownloadLog = () => {
+    const logContent = dataArr
+      .filter((log) => {
+        if (logLevel === 'all') {
+          return true
+        }
+        return logLevel.has(log.level)
+      })
+      .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+      .join('\r\n')
+    const blob = new Blob([logContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'napcat.log'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const writeStream = () => {
+    try {
+      const _data = dataArr
+        .filter((log) => {
+          if (logLevel === 'all') {
+            return true
+          }
+          return logLevel.has(log.level)
+        })
+        .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+        .join('\r\n')
+      Xterm.current?.clear()
+      Xterm.current?.write(_data)
+    } catch (error) {
+      console.error(error)
+      toast.error('获取实时日志失败')
+    }
+  }
+
+  useEffect(() => {
+    writeStream()
+  }, [logLevel, dataArr])
+
+  useEffect(() => {
+    const subscribeLogs = () => {
+      try {
+        const source = WebUIManager.getRealTimeLogs((data) => {
+          setDataArr((prev) => {
+            const newData = [...prev, ...data]
+            if (newData.length > 1000) {
+              newData.splice(0, newData.length - 1000)
+            }
+            return newData
+          })
+        })
+        return () => {
+          source.close()
+        }
+      } catch (error) {
+        toast.error('获取实时日志失败')
+      }
+    }
+
+    const close = subscribeLogs()
+    return () => {
+      console.log('close')
+      close?.()
+    }
+  }, [])
+
+  return (
+    <>
+      <title>实时日志 - NapCat WebUI</title>
+      <div className="flex items-center gap-2">
+        <LogLevelSelect
+          selectedKeys={logLevel}
+          onSelectionChange={setLogLevel}
+        />
+        <Button
+          className="flex-shrink-0"
+          onPress={onDownloadLog}
+          startContent={<IoDownloadOutline className="text-lg" />}
+        >
+          下载日志
+        </Button>
+      </div>
+      <div className="flex-1 h-full overflow-hidden">
+        <XTerm ref={Xterm} />
+      </div>
+    </>
+  )
+}
+
+export default RealTimeLogs

napcat.webui/src/components/modal.tsx

@@ -0,0 +1,97 @@
+import { Button } from '@heroui/button'
+import {
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Modal as NextUIModal,
+  useDisclosure
+} from '@heroui/modal'
+import React from 'react'
+
+export interface ModalProps {
+  content: React.ReactNode
+  title?: React.ReactNode
+  size?: React.ComponentProps<typeof NextUIModal>['size']
+  scrollBehavior?: React.ComponentProps<typeof NextUIModal>['scrollBehavior']
+  onClose?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+  backdrop?: 'opaque' | 'blur' | 'transparent'
+  showCancel?: boolean
+  dismissible?: boolean
+  confirmText?: string
+  cancelText?: string
+}
+
+const Modal: React.FC<ModalProps> = React.memo((props) => {
+  const {
+    backdrop = 'blur',
+    title,
+    content,
+    showCancel = true,
+    dismissible,
+    confirmText = '确定',
+    cancelText = '取消',
+    onClose,
+    onConfirm,
+    onCancel,
+    ...rest
+  } = props
+  const { onClose: onNativeClose } = useDisclosure()
+
+  return (
+    <NextUIModal
+      defaultOpen
+      backdrop={backdrop}
+      isDismissable={dismissible}
+      onClose={() => {
+        onClose?.()
+        onNativeClose()
+      }}
+      classNames={{
+        backdrop: 'z-[99]',
+        wrapper: 'z-[99]'
+      }}
+      {...rest}
+    >
+      <ModalContent>
+        {(nativeClose) => (
+          <>
+            {title && (
+              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
+            )}
+            <ModalBody className="break-all">{content}</ModalBody>
+            <ModalFooter>
+              {showCancel && (
+                <Button
+                  color="danger"
+                  variant="light"
+                  onPress={() => {
+                    onCancel?.()
+                    nativeClose()
+                  }}
+                >
+                  {cancelText}
+                </Button>
+              )}
+              <Button
+                color="danger"
+                onPress={() => {
+                  onConfirm?.()
+                  nativeClose()
+                }}
+              >
+                {confirmText}
+              </Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </NextUIModal>
+  )
+})
+
+Modal.displayName = 'Modal'
+
+export default Modal

napcat.webui/src/components/napcat_repo_info.tsx

@@ -0,0 +1,241 @@
+import { Listbox, ListboxItem } from '@heroui/listbox'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import { MdError } from 'react-icons/md'
+
+import IconWrapper from '@/components/github_info/icon_wrapper'
+import ItemCounter from '@/components/github_info/item_counter'
+import GithubRelease from '@/components/github_info/release'
+import {
+  BookIcon,
+  BugIcon,
+  PullRequestIcon,
+  StarIcon,
+  TagIcon,
+  UsersIcon,
+  WatchersIcon
+} from '@/components/icons'
+
+import { request } from '@/utils/request'
+import { openUrl } from '@/utils/url'
+
+import type {
+  GirhubRepo,
+  GithubContributor,
+  GithubPullRequest,
+  GithubRelease as GithubReleaseType
+} from '@/types/github'
+
+function displayData(data: number, loading: boolean, error?: Error) {
+  if (error) {
+    return <MdError className="text-danger-400" />
+  }
+
+  if (loading) {
+    return <Spinner size="sm" />
+  }
+
+  return <ItemCounter number={data} />
+}
+
+export default function NapCatRepoInfo() {
+  // repo info
+  const {
+    data: repoOriData,
+    error: repoError,
+    loading: repoLoading
+  } = useRequest(() =>
+    request.get<GirhubRepo>('https://api.github.com/repos/NapNeko/NapCatQQ')
+  )
+
+  // release info
+  const {
+    data: releaseOriData,
+    error: releaseError,
+    loading: releaseLoading
+  } = useRequest(() =>
+    request.get<GithubReleaseType[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
+    )
+  )
+
+  // pr info
+  const {
+    data: prData,
+    error: prError,
+    loading: prLoading
+  } = useRequest(() =>
+    request.get<GithubPullRequest[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/pulls'
+    )
+  )
+
+  // contributors info
+  const {
+    data: contributorsData,
+    error: contributorsError,
+    loading: contributorsLoading
+  } = useRequest(() =>
+    request.get<GithubContributor[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/contributors'
+    )
+  )
+
+  const repoData = repoOriData?.data
+  const releaseData = releaseOriData?.data?.[0]
+  const prCount = prData?.data?.length || 0
+  const contributorsCount = contributorsData?.data?.length || 0
+
+  const releaseCount = releaseOriData?.data?.length || 0
+
+  return (
+    <Listbox
+      aria-label="NapCat Repo Info"
+      className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium bg-opacity-50 backdrop-blur-sm"
+      itemClasses={{
+        base: 'px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80'
+      }}
+      onAction={(key: React.Key) => {
+        switch (key) {
+          case 'releases':
+            openUrl('https://github.com/NapNeko/NapCatQQ/releases', true)
+            break
+          case 'contributors':
+            openUrl(
+              'https://github.com/NapNeko/NapCatQQ/graphs/contributors',
+              true
+            )
+            break
+          case 'license':
+            openUrl(
+              'https://github.com/NapNeko/NapCatQQ/blob/main/LICENSE',
+              true
+            )
+            break
+          case 'watchers':
+            openUrl('https://github.com/NapNeko/NapCatQQ/watchers', true)
+            break
+          case 'star':
+            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true)
+            break
+          case 'issues':
+            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true)
+            break
+          case 'pull_requests':
+            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true)
+            break
+          default:
+            openUrl('https://github.com/NapNeko/NapCatQQ', true)
+        }
+      }}
+    >
+      <ListboxItem
+        key="star"
+        endContent={displayData(
+          repoData?.stargazers_count ?? 0,
+          false,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className="bg-success/10 text-success">
+            <StarIcon className="text-lg" />
+          </IconWrapper>
+        }
+      >
+        Star
+      </ListboxItem>
+      <ListboxItem
+        key="issues"
+        endContent={displayData(
+          repoData?.open_issues_count ?? 0,
+          false,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className="bg-success/10 text-success">
+            <BugIcon className="text-lg" />
+          </IconWrapper>
+        }
+      >
+        Issues
+      </ListboxItem>
+      <ListboxItem
+        key="pull_requests"
+        endContent={displayData(prCount, prLoading, prError)}
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <PullRequestIcon className="text-lg" />
+          </IconWrapper>
+        }
+      >
+        Pull Requests
+      </ListboxItem>
+      <ListboxItem
+        key="releases"
+        className="group h-auto py-3"
+        endContent={
+          releaseError ? (
+            <MdError className="text-danger-400" />
+          ) : releaseLoading ? (
+            <Spinner size="sm" />
+          ) : (
+            <ItemCounter number={releaseCount} />
+          )
+        }
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <TagIcon className="text-lg" />
+          </IconWrapper>
+        }
+        textValue="Releases"
+      >
+        {releaseData && <GithubRelease releaseData={releaseData} />}
+      </ListboxItem>
+      <ListboxItem
+        key="contributors"
+        endContent={displayData(
+          contributorsCount,
+          contributorsLoading,
+          contributorsError
+        )}
+        startContent={
+          <IconWrapper className="bg-warning/10 text-warning">
+            <UsersIcon />
+          </IconWrapper>
+        }
+      >
+        Contributors
+      </ListboxItem>
+      <ListboxItem
+        key="watchers"
+        endContent={displayData(
+          repoData?.watchers_count ?? 0,
+          repoLoading,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className="bg-default/50 text-foreground">
+            <WatchersIcon />
+          </IconWrapper>
+        }
+      >
+        Watchers
+      </ListboxItem>
+      <ListboxItem
+        key="license"
+        endContent={
+          <span className="text-small text-default-400">
+            {repoData?.license?.name ?? 'unknown'}
+          </span>
+        }
+        startContent={
+          <IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
+            <BookIcon />
+          </IconWrapper>
+        }
+      >
+        License
+      </ListboxItem>
+    </Listbox>
+  )
+}

napcat.webui/src/components/network_edit/generic_form.tsx

@@ -0,0 +1,172 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { ModalBody, ModalFooter } from '@heroui/modal'
+import { Select, SelectItem } from '@heroui/select'
+import { ReactElement, useEffect } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import type {
+  DefaultValues,
+  Path,
+  PathValue,
+  SubmitHandler
+} from 'react-hook-form'
+import toast from 'react-hot-toast'
+
+import SwitchCard from '../switch_card'
+
+export type FieldTypes = 'input' | 'select' | 'switch'
+
+type NetworkConfigType = OneBotConfig['network']
+
+export interface Field<T extends keyof OneBotConfig['network']> {
+  name: keyof NetworkConfigType[T][0]
+  label: string
+  type: FieldTypes
+  options?: Array<{ key: string; value: string }>
+  placeholder?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  description?: string
+  colSpan?: 1 | 2
+}
+
+export interface GenericFormProps<T extends keyof NetworkConfigType> {
+  data?: NetworkConfigType[T][0]
+  defaultValues: DefaultValues<NetworkConfigType[T][0]>
+  onClose: () => void
+  onSubmit: (data: NetworkConfigType[T][0]) => Promise<void>
+  fields: Array<Field<T>>
+}
+
+const GenericForm = <T extends keyof NetworkConfigType>({
+  data,
+  defaultValues,
+  onClose,
+  onSubmit,
+  fields
+}: GenericFormProps<T>): ReactElement => {
+  const { control, handleSubmit, formState, setValue, reset } = useForm<
+    NetworkConfigType[T][0]
+  >({
+    defaultValues
+  })
+
+  const submitAction: SubmitHandler<NetworkConfigType[T][0]> = async (data) => {
+    await onSubmit(data)
+    onClose()
+  }
+
+  const _onSubmit = handleSubmit(submitAction, (e) => {
+    for (const error in e) {
+      toast.error(e[error]?.message as string)
+      return
+    }
+  })
+
+  useEffect(() => {
+    if (data) {
+      const keys = Object.keys(data) as Path<NetworkConfig[T][0]>[]
+      for (const key of keys) {
+        const value = data[key] as PathValue<
+          NetworkConfig[T][0],
+          Path<NetworkConfig[T][0]>
+        >
+        setValue(key, value)
+      }
+    } else {
+      reset()
+    }
+  }, [data, reset, setValue])
+
+  return (
+    <>
+      <ModalBody>
+        <div className="grid grid-cols-2 gap-y-4 gap-x-2 w-full">
+          {fields.map((field) => (
+            <div
+              key={field.name as string}
+              className={field.colSpan === 1 ? 'col-span-1' : 'col-span-2'}
+            >
+              <Controller
+                control={control}
+                name={field.name as Path<NetworkConfig[T][0]>}
+                rules={
+                  field.isRequired
+                    ? {
+                        required: `请填写${field.label}`
+                      }
+                    : void 0
+                }
+                render={({ field: controllerField }) => {
+                  switch (field.type) {
+                    case 'input':
+                      return (
+                        <Input
+                          value={controllerField.value as string}
+                          onChange={controllerField.onChange}
+                          onBlur={controllerField.onBlur}
+                          ref={controllerField.ref}
+                          isRequired={field.isRequired}
+                          isDisabled={field.isDisabled}
+                          label={field.label}
+                          placeholder={field.placeholder}
+                        />
+                      )
+                    case 'select':
+                      return (
+                        <Select
+                          {...controllerField}
+                          ref={controllerField.ref}
+                          isRequired={field.isRequired}
+                          label={field.label}
+                          placeholder={field.placeholder}
+                          selectedKeys={[controllerField.value as string]}
+                          value={controllerField.value.toString()}
+                        >
+                          {field.options?.map((option) => (
+                            <SelectItem key={option.key} value={option.value}>
+                              {option.value}
+                            </SelectItem>
+                          )) || <></>}
+                        </Select>
+                      )
+                    case 'switch':
+                      return (
+                        <SwitchCard
+                          {...controllerField}
+                          value={controllerField.value as boolean}
+                          description={field.description}
+                          label={field.label}
+                        />
+                      )
+                    default:
+                      return <></>
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          color="danger"
+          isDisabled={formState.isSubmitting}
+          variant="light"
+          onPress={onClose}
+        >
+          关闭
+        </Button>
+        <Button
+          color="primary"
+          isLoading={formState.isSubmitting}
+          onPress={() => _onSubmit()}
+        >
+          保存
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}
+
+export default GenericForm

napcat.webui/src/components/network_edit/http_client.tsx

@@ -0,0 +1,95 @@
+import GenericForm from './generic_form'
+import type { Field } from './generic_form'
+
+export interface HTTPClientFormProps {
+  data?: OneBotConfig['network']['httpClients'][0]
+  onClose: () => void
+  onSubmit: (data: OneBotConfig['network']['httpClients'][0]) => Promise<void>
+}
+
+type HTTPClientFormType = OneBotConfig['network']['httpClients']
+
+const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
+  data,
+  onClose,
+  onSubmit
+}) => {
+  const defaultValues: HTTPClientFormType[0] = {
+    enable: false,
+    name: '',
+    url: 'http://localhost:8080',
+    reportSelfMessage: false,
+    messagePostFormat: 'array',
+    token: '',
+    debug: false
+  }
+
+  const fields: Field<'httpClients'>[] = [
+    {
+      name: 'enable',
+      label: '启用',
+      type: 'switch',
+      description: '保存后启用此配置',
+      colSpan: 1
+    },
+    {
+      name: 'debug',
+      label: '开启Debug',
+      type: 'switch',
+      description: '是否开启调试模式',
+      colSpan: 1
+    },
+    {
+      name: 'name',
+      label: '名称',
+      type: 'input',
+      placeholder: '请输入名称',
+      isRequired: true,
+      isDisabled: !!data
+    },
+    {
+      name: 'url',
+      label: 'URL',
+      type: 'input',
+      placeholder: '请输入URL',
+      isRequired: true
+    },
+    {
+      name: 'reportSelfMessage',
+      label: '上报自身消息',
+      type: 'switch',
+      description: '是否上报自身消息',
+      colSpan: 1
+    },
+    {
+      name: 'messagePostFormat',
+      label: '消息格式',
+      type: 'select',
+      placeholder: '请选择消息格式',
+      isRequired: true,
+      options: [
+        { key: 'array', value: 'Array' },
+        { key: 'string', value: 'String' }
+      ],
+      colSpan: 1
+    },
+    {
+      name: 'token',
+      label: 'Token',
+      type: 'input',
+      placeholder: '请输入Token'
+    }
+  ]
+
+  return (
+    <GenericForm
+      data={data}
+      defaultValues={defaultValues}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      fields={fields}
+    />
+  )
+}
+
+export default HTTPClientForm

napcat.webui/src/components/network_edit/http_server.tsx

@@ -0,0 +1,110 @@
+import GenericForm from './generic_form'
+import type { Field } from './generic_form'
+
+export interface HTTPServerFormProps {
+  data?: OneBotConfig['network']['httpServers'][0]
+  onClose: () => void
+  onSubmit: (data: OneBotConfig['network']['httpServers'][0]) => Promise<void>
+}
+
+type HTTPServerFormType = OneBotConfig['network']['httpServers']
+
+const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
+  data,
+  onClose,
+  onSubmit
+}) => {
+  const defaultValues: HTTPServerFormType[0] = {
+    enable: false,
+    name: '',
+    host: '0.0.0.0',
+    port: 3000,
+    enableCors: true,
+    enableWebsocket: true,
+    messagePostFormat: 'array',
+    token: '',
+    debug: false
+  }
+
+  const fields: Field<'httpServers'>[] = [
+    {
+      name: 'enable',
+      label: '启用',
+      type: 'switch',
+      description: '保存后启用此配置',
+      colSpan: 1
+    },
+    {
+      name: 'debug',
+      label: '开启Debug',
+      type: 'switch',
+      description: '是否开启调试模式',
+      colSpan: 1
+    },
+    {
+      name: 'name',
+      label: '名称',
+      type: 'input',
+      placeholder: '请输入名称',
+      isRequired: true,
+      isDisabled: !!data
+    },
+    {
+      name: 'host',
+      label: 'Host',
+      type: 'input',
+      placeholder: '请输入主机地址',
+      isRequired: true
+    },
+    {
+      name: 'port',
+      label: 'Port',
+      type: 'input',
+      placeholder: '请输入端口',
+      isRequired: true
+    },
+    {
+      name: 'enableCors',
+      label: '启用CORS',
+      type: 'switch',
+      description: '是否启用CORS跨域',
+      colSpan: 1
+    },
+    {
+      name: 'enableWebsocket',
+      label: '启用Websocket',
+      type: 'switch',
+      description: '是否启用Websocket',
+      colSpan: 1
+    },
+    {
+      name: 'messagePostFormat',
+      label: '消息格式',
+      type: 'select',
+      placeholder: '请选择消息格式',
+      isRequired: true,
+      options: [
+        { key: 'array', value: 'Array' },
+        { key: 'string', value: 'String' }
+      ]
+    },
+    {
+      name: 'token',
+      label: 'Token',
+      type: 'input',
+      placeholder: '请输入Token'
+    }
+  ]
+
+  return (
+    <GenericForm
+      data={data}
+      defaultValues={defaultValues}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      fields={fields}
+    />
+  )
+}
+
+export default HTTPServerForm

napcat.webui/src/components/network_edit/http_sse.tsx

@@ -0,0 +1,120 @@
+import GenericForm from './generic_form'
+import type { Field } from './generic_form'
+
+export interface HTTPServerSSEFormProps {
+  data?: OneBotConfig['network']['httpSseServers'][0]
+  onClose: () => void
+  onSubmit: (
+    data: OneBotConfig['network']['httpSseServers'][0]
+  ) => Promise<void>
+}
+
+type HTTPServerSSEFormType = OneBotConfig['network']['httpSseServers']
+
+const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
+  data,
+  onClose,
+  onSubmit
+}) => {
+  const defaultValues: HTTPServerSSEFormType[0] = {
+    enable: false,
+    name: '',
+    host: '0.0.0.0',
+    port: 3000,
+    enableCors: true,
+    enableWebsocket: true,
+    messagePostFormat: 'array',
+    token: '',
+    debug: false,
+    reportSelfMessage: false
+  }
+
+  const fields: Field<'httpSseServers'>[] = [
+    {
+      name: 'enable',
+      label: '启用',
+      type: 'switch',
+      description: '保存后启用此配置',
+      colSpan: 1
+    },
+    {
+      name: 'debug',
+      label: '开启Debug',
+      type: 'switch',
+      description: '是否开启调试模式',
+      colSpan: 1
+    },
+    {
+      name: 'name',
+      label: '名称',
+      type: 'input',
+      placeholder: '请输入名称',
+      isRequired: true,
+      isDisabled: !!data
+    },
+    {
+      name: 'host',
+      label: 'Host',
+      type: 'input',
+      placeholder: '请输入主机地址',
+      isRequired: true
+    },
+    {
+      name: 'port',
+      label: 'Port',
+      type: 'input',
+      placeholder: '请输入端口',
+      isRequired: true
+    },
+    {
+      name: 'enableCors',
+      label: '启用CORS',
+      type: 'switch',
+      description: '是否启用CORS跨域',
+      colSpan: 1
+    },
+    {
+      name: 'enableWebsocket',
+      label: '启用Websocket',
+      type: 'switch',
+      description: '是否启用Websocket',
+      colSpan: 1
+    },
+    {
+      name: 'messagePostFormat',
+      label: '消息格式',
+      type: 'select',
+      placeholder: '请选择消息格式',
+      isRequired: true,
+      options: [
+        { key: 'array', value: 'Array' },
+        { key: 'string', value: 'String' }
+      ]
+    },
+    {
+      name: 'token',
+      label: 'Token',
+      type: 'input',
+      placeholder: '请输入Token'
+    },
+    {
+      name: 'reportSelfMessage',
+      label: '上报自身消息',
+      type: 'switch',
+      description: '是否上报自身消息',
+      colSpan: 1
+    }
+  ]
+
+  return (
+    <GenericForm
+      data={data}
+      defaultValues={defaultValues}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      fields={fields}
+    />
+  )
+}
+
+export default HTTPServerSSEForm

napcat.webui/src/components/network_edit/modal.tsx

@@ -0,0 +1,123 @@
+import { Modal, ModalContent, ModalHeader } from '@heroui/modal'
+import toast from 'react-hot-toast'
+
+import useConfig from '@/hooks/use-config'
+
+import HTTPClientForm from './http_client'
+import HTTPServerForm from './http_server'
+import HTTPServerSSEForm from './http_sse'
+import WebsocketClientForm from './ws_client'
+import WebsocketServerForm from './ws_server'
+
+const modalTitle = {
+  httpServers: 'HTTP Server',
+  httpClients: 'HTTP Client',
+  httpSseServers: 'HTTP SSE Server',
+  websocketServers: 'Websocket Server',
+  websocketClients: 'Websocket Client'
+}
+
+export interface NetworkFormModalProps<
+  T extends keyof OneBotConfig['network']
+> {
+  isOpen: boolean
+  field: T
+  data?: OneBotConfig['network'][T][0]
+  onOpenChange: (isOpen: boolean) => void
+}
+
+const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
+  props: NetworkFormModalProps<T>
+) => {
+  const { isOpen, onOpenChange, field, data } = props
+  const { createNetworkConfig, updateNetworkConfig } = useConfig()
+  const isCreate = !data
+
+  const onSubmit = async (data: OneBotConfig['network'][typeof field][0]) => {
+    try {
+      if (isCreate) {
+        await createNetworkConfig(field, data)
+      } else {
+        await updateNetworkConfig(field, data)
+      }
+      toast.success('保存配置成功')
+    } catch (error) {
+      const msg = (error as Error).message
+
+      toast.error(`保存配置失败: ${msg}`)
+
+      throw error
+    }
+  }
+
+  const renderFormComponent = (onClose: () => void) => {
+    switch (field) {
+      case 'httpServers':
+        return (
+          <HTTPServerForm
+            data={data as OneBotConfig['network']['httpServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        )
+      case 'httpClients':
+        return (
+          <HTTPClientForm
+            data={data as OneBotConfig['network']['httpClients'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        )
+      case 'websocketServers':
+        return (
+          <WebsocketServerForm
+            data={data as OneBotConfig['network']['websocketServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        )
+      case 'websocketClients':
+        return (
+          <WebsocketClientForm
+            data={data as OneBotConfig['network']['websocketClients'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        )
+      case 'httpSseServers':
+        return (
+          <HTTPServerSSEForm
+            data={data as OneBotConfig['network']['httpSseServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Modal
+      backdrop="blur"
+      isDismissable={false}
+      isOpen={isOpen}
+      size="lg"
+      scrollBehavior="outside"
+      onOpenChange={onOpenChange}
+    >
+      <ModalContent>
+        {(onClose) => (
+          <>
+            <ModalHeader className="flex flex-col gap-1">
+              {modalTitle[field]}
+            </ModalHeader>
+            {renderFormComponent(onClose)}
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default NetworkFormModal