使用Flutter开发移动端应用，如果使用 `image-cropper` 插件开发图片裁剪功能，裁剪页面得页头在Android新版本上，大概率会与系统通知栏重合，在一些机型上可能导致无法点击确定等按钮得情况。

由于在老板Android上没有该问题，所以可以直到大概率是由于Android新版本适配问题。

> 前排提示，本文参考： https://github.com/hnvn/flutter_image_cropper/issues/570 内容



## 临时解决办法

现在有一个解决方案，不过需要自行进行一些配置；

1. 更新 `image-cropper` 版本到 `9.1.0+`；
2. 在 `android/app/src/main/res/values/style.xml` 文件得 `<resources>` 中添加如下配置
```xml
 <style name="Ucrop.CropTheme" parent="Theme.AppCompat.Light.NoActionBar"/>
```
3. 在 `android/app/src/main/res/values-v35/styles.xml` 中添加如下配置（*如果没有这个文件夹和文件，自行新建即可*）:

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="Ucrop.CropTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
  </style>
</resources> 
```
4. 最后更新 `AndroidManifest.xml` 文件，将原来的裁剪主题配置值从 `@style/Theme.AppCompat.Light.NoActionBar` 替换为 `@style/Ucrop.CropTheme`，结果如下：

```xml
<activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Ucrop.CropTheme"/>
```

通过上述配置后，重启项目即可修复通知栏与页头重合问题，但经过老狗的实际使用，发现虽然问题解决了，但在裁剪页面通知栏得背景是白色，文字也是白色，这就有点不和谐了，目前还不知道如何进一步修复通知栏颜色的问题，如果你知道更多，欢迎评论交流啊！

Flutter-image-cropper 图片裁剪组件，在Android上与通知栏重合问题解决方案

## 起因

老狗有一个使用 `nuxt3` 开发的全站项目，起初一切都是正常的，直到老狗为其增加了博客功能。

增加博客，老狗采用的是 `@nuxt/content` + `markdown文件` 的方式，因为其简单通用，直接从原有项目中拿一套代码过来既可开始使用。

但这次的使用，不知道为什么提示 使用 `@nuxt/content` 必须安装 `better-sqlite3`，老狗看了原有项目，是没有安装该依赖的，但不知为什么，这次提示必须安装，好吧那就安装（虽然不知道是不是安装这个依赖的问题，但是这缺失是一个反常点，所以记录一下）。

安装调试一切正常，开始打包，然后就出现问题了。



## 异常现象

由于老狗习惯使用docker构建镜像部署，所以一如往常开始构建，但这测构建异常的慢，刚开始老狗以为这只是国内网络环境的正常现象（懂得都懂），但经过各种尝试后，发现事情不对劲！

每次都会在执行 `npm run build` 时卡住！且有一次甚至等待超过半小时，还是没完成！！！！！！！！！！

查看构建日志，发现其实 `build` 已经成功了才对！因为已经输出了下面的日志，但不知道为什么，也是每次都在输出这段日志后，就“**永远**”地卡住了！！！

```log
✔ You can preview this build using node .output/server/index.mjs 
```

后续我尝试本地开发环境运行 `npm run build` ，也是出现了一样的问题！去网上查资料，没有找到任何相关资料。。。

没办法，只能自己排查解决了。

## 草草了事（解决不了问题，就解决提出问题的人👻）

但无论如何查看日志，也都一切正常，所以这看起来并不是什么简单的问题了，没办法，老狗只能思考最近对项目做了什么（因为这次开发工作前，打包还是正常的），思来想去，也只有可能是因为博客功能相关的改动，而涉及项目底层的，也可能是 `@nuxt/content` `better-sqlite3` 这两个依赖了。

排除掉所有不可能，那剩下的唯一选项就是真相！

**删掉 `@nuxt/content` `better-sqlite3`，重新打包，果然成功了！！！！！！！！（气死）**

## 后记

本次问题，目前看来只能是 `@nuxt/content` `better-sqlite3` 中的其中一个影响了构建过程的正确退出，至于底层原因，有懂得大佬欢迎科普！

如果你也遇到这个问题，并且有空的话，可以考虑给 `@nuxt/content` 提交 Issue 吧，老狗最近是没有这个闲工夫，为了项目的正常运行，那就现委屈博客功能晚点再上线吧（毕竟还有其他功能改动需要升级）。。。

记一次坑爹的Nuxt build持续running，成功后无法正确退出的错误（很可能是@nuxt/content干得好事）

偶然发现 `v2rayA` 持续运行时，会导致内存占用持续升高！我的一个小服务器，发现时，`v2rayA` 已经占用到 **4G** 左右的内存！

重启 `v2rayA` 后发现占用恢复！

不知道是怎么回事，欢迎讨论！

慎用v2rayA！发现其内存占用超高！

## 前言

本文用于记录用过的 `Nuxt3` 相关插件（modules），这些插件有的是专为Nuxt研发的各种功能支持的库，有些是通用库，为了适配Nuxt而开发的相关插件，按需选用即可！

PS：只记录个人认为好用的~ 不喜欢的请绕道~ 欢迎推荐好用的插件


## UI类

### nuxtjs/tailwindcss

> 伟大无需多盐

- 作用：集成 tailwindcss 框架，轻松使用tailwindcss编写前端css
- 分类：UI类库
- Nuxt Modules链接：https://tailwindcss.nuxtjs.org/
- nuxtjs/tailwindcss官网：https://tailwindcss.nuxtjs.org/

### vuetify-nuxt-module

- 作用：集成vuetify，轻松使用相关UI组件。
- 分类：UI库
- Nuxt Modules链接：https://nuxt.com/modules/vuetify-nuxt-module
- vuetify-nuxt官网：https://nuxt.vuetifyjs.com/


### element-plus/nuxt

- 作用：集成elementplus，轻松使用相关UI组件。
- 分类：算是文档工具库
- Nuxt Modules链接：https://nuxt.com/modules/element-plus
- ElementPlus官网：https://element-plus.org/


### nuxt-echarts

- 作用：集成Echarts，轻松使用相关图表
- 分类：图表类UI库
- Nuxt Modules链接：https://nuxt.com/modules/echarts
- nuxt-echarts官网：https://echarts.nuxt.dev/


## 文档类

### scalar

- 作用：集成scalar，一键生成API文档
- 分类：文档类工具库
- Nuxt Modules链接：https://nuxt.com/modules/scalar
- Scalar官网（nuxt相关）：https://guides.scalar.com/scalar/scalar-api-references/integrations/nuxt

### nuxt/content

- 作用：集成nuxt/content，轻松实现文档渲染为网页，支持markdown等各类文件。
- 分类：算是文档工具库
- Nuxt Modules链接：https://nuxt.com/modules/content
- Nuxt Content官网：https://content.nuxt.com/

## 数据库类

### prisma/nuxt

- 作用：集成prisma，统一管理数据库模型，并提供ORM API
- 分类：ORM数据库类库
- Nuxt Modules链接：https://nuxt.com/modules/prisma
- prisma官网（nuxt相关）：https://www.prisma.io/docs/orm/more/help-and-troubleshooting/prisma-nuxt-module

## 登录授权类

### sidebase/nuxt-auth

- 作用：集成NuxtAuth，轻松实现各类第三方授权登录
- 分类：第三方登录授权集成工具库（Google、Github登录等）
- Nuxt Modules链接：https://nuxt.com/modules/sidebase-auth
- NuxtAuth官网：https://auth.sidebase.io/guide/getting-started/introduction

## 网站基础类

### nuxtjs/i18n

- 作用：集成vue-i18n，轻松实现网站多语言管理
- 分类：网站多语言管理与配置库
- Nuxt Modules链接：https://nuxt.com/modules/i18n
- Nuxt I18n官网：https://i18n.nuxtjs.org/

好用的Nuxt全家桶 | 插件记录

## 起因

想要实现一个开源记账软件的多数据切换，但由于 prisma 不提供线上环境的数据库切换功能，因为该框架构建时会基于不同的数据库构建不同的底层支持，所以打包时必须明确一种数据库。

为了适配 prisma 同时实现多数据库，决定采用多个分支管理代码的方式，每一个分支对应一种数据库方案，这样就可以实现多数据库同步维护，但每次修改代码，每个分支都要同步合并代码，手动管理太过麻烦，因此决定通过 Github Actions 的方式，每次主分支提交代码，通过工作流自动将代码合并到其他分支，大大降低了手动维护成本！

## 示例

下面是老狗的一个 [开源软件](https://github.com/dingdangdog/cashbook) 中正在使用的 `Github Acitons` 配置文件：



```yaml
name: Auto Sync Branches

on:
  push:
    branches:
      - main

# 添加必要的权限
permissions:
  contents: write
  actions: read

jobs:
  sync-branches:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout main branch
        uses: actions/checkout@v4
        with:
          ref: main
          fetch-depth: 0 # 获取完整历史记录
          token: ${{ secrets.MERGE_TOKEN }}

      - name: Configure Git
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"

      - name: Sync to main-mysql branch
        run: |
          echo "Syncing to main-mysql branch..."
          git checkout main-mysql || git checkout -b main-mysql
          git merge main --no-edit || {
            echo "Merge conflict detected for main-mysql, manual intervention required"
            exit 1
          }
          git push origin main-mysql

      - name: Sync to main-pgsql branch
        run: |
          echo "Syncing to main-pgsql branch..."
          git checkout main-pgsql || git checkout -b main-pgsql
          git merge main --no-edit || {
            echo "Merge conflict detected for main-pgsql, manual intervention required"
            exit 1
          }
          git push origin main-pgsql

      - name: Sync to main-sqlite branch
        run: |
          echo "Syncing to main-sqlite branch..."
          git checkout main-sqlite || git checkout -b main-sqlite
          git merge main --no-edit || {
            echo "Merge conflict detected for main-sqlite, manual intervention required"
            exit 1
          }
          git push origin main-sqlite

      - name: Sync to main-sqlserver branch
        run: |
          echo "Syncing to main-sqlserver branch..."
          git checkout main-sqlserver || git checkout -b main-sqlserver
          git merge main --no-edit || {
            echo "Merge conflict detected for main-sqlserver, manual intervention required"
            exit 1
          }
          git push origin main-sqlserver

      - name: Summary
        run: |
          echo "✅ Successfully synced main branch to all database branches:"
          echo "   - main-mysql"
          echo "   - main-pgsql" 
          echo "   - main-sqlite"
          echo "   - main-sqlserver"
```

基于GithubActions，实现分支代码自动拉取合并

twitter:card

twitter:title

twitter:site

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description

程序员,笔记,Bug记录,编程技术,AI,Java,Node,Golang,个人博客,资源分享,月上老狗,dingdangdog