代码如下：

```html
<script setup lang="ts">
const { image } = defineProps<{ image?: string }>();
const loading = ref(true);

onMounted(() => {
  loading.value = false;
});
</script>

<template>
  <div class="m-2 w-40 h-40 border border-[#f6467c] rounded-sm">
    <div
      class="relative image bg-[rgba(242,197,211,0.5)] p-2 rounded-sm cursor-pointer overflow-hidden"
    >
      <img
        v-if="!loading"
        :src="image"
        alt="image card"
        class="aspect-square w-full h-full object-contain rounded-sm"
      />
      <div
        v-if="loading"
        class="absolute inset-0 w-full h-full flex justify-center items-center rounded-sm bg-gray-100"
      >
        <div
          class="w-12 h-12 h-12 border-b-2 border-gray-300 border-opacity-50 rounded-full animate-spin"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
```

一个Vue3的图片展示组件，带加载动画（tailwindcss）

## 模型信息

- V12版本已发布！Civitai链接：https://civitai.com/models/827184/wai-nsfw-illustrious-sdxl

> 提示：本文翻译自官方文档！请以Civitai模型页面最新说明文档为准！

## 使用说明

### ComfyUI 使用问题

如果用户在使用 ComfyUI 时遇到问题，请尝试使用以下图像读取工作流程。此方法或可帮助解决问题。
![workflow (3).png](https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/5ed11b68-ae32-42d3-a8e6-995b9c22bc96/original=true,quality=90/workflow%20(3).jpeg)


<div class="article-ads"></div>



### WEBUI 插件

如果用户正在使用 WEBUI，请务必使用此插件，它可以方便地生成角色和动作的组合。

- **插件名称:** [WAI-NSFW-illustrious-SDXL V8.0 模型人物提示器 / Built-in Character Prompt Generator (對應V8以上版本) | Civitai](https://civitai.com/articles/10754/wai-nsfw-illustrious-sdxl-v80-built-in-character-prompt-generator-v8)
- 此插件可以直接建议数千个现有的人物模型，并具有随机选择人物的功能。
- V8-V11 版本均良好兼容。

### 独立应用程序

开发团队基于 V8-V12 版本开发了一款独立应用程序。

- 此应用程序支持 AI 提示和 ComfyUI/WebUI API。
- **应用程序 GitHub 链接:** [character_select_stand_alone_app](https://github.com/mirabarukaso/character_select_stand_alone_app)

### 一键嵌入式软件包：

如果用户不熟悉如何构建 Python 环境，建议尝试使用嵌入式环境软件包 **embeded_env_for_SAA**。

- 下载并解压到用户的电脑。
- 双击 **##quick_start_download_and_force_update_SAA.bat**，等待下载。
- 双击 **#run_XX.bat**。
- **软件包 Hugging Face 链接:** [embeded_env_for_SAA.zip](https://huggingface.co/datasets/flagrantia/character_select_stand_alone_app/resolve/main/embeded_env_for_SAA.zip)


<div class="article-ads"></div>

#### 使用说明

下载解压到任意目录，首次启动请先运行 **##quick_start_download_and_force_update_SAA**。

- **“##quick_start_download_and_force_update_SAA”**  显示以下信息后即可关闭： “Done! Now click #run_CN or #run_EN  Press any key to continue . . .”

### Civitai 在线生成功能

Civitai 即将推出完整的在线生成功能，本次更新不会调整在线功能。

### 提示词建议：

请勿添加过多的质量和美学相关的标签，亦不建议使用过长的负面提示词，因为这实际上会降低图像质量并使其更加模糊。

## v12 版本更新：

- 本模型修改了默认风格并调整了整体权重。

### 推荐设置

- **Steps (步数):** 15-30
- **CFG scale (CFG 尺度):** 5-7
- **Sampler (采样器):** Euler a
- VAE 已集成，请勿再就此提问。
- 原始尺寸请使用大于 1024x1024 的尺寸。
- **Hires upscale (高分辨率放大):** 1.5, **Hires steps (高分辨率步数):** 20, **Hires upscaler (高分辨率放大算法):** R-ESRGAN 4x+ Anime6B, **Denoising strength (降噪强度):** 0.35~0.5


<div class="article-ads"></div>

### 安全评级标签

共有四个安全评级标签：general, sensitive, nsfw, explicit。 建议用户自觉在负面提示词中添加 "nsfw" 以过滤不适当的内容。

### 正面提示词 (Positive Prompt)

```
masterpiece,best quality,amazing quality,
```

### 负面提示词 (Negative Prompt)

```
bad quality,worst quality,worst detail,sketch,censor,
```

## V5-V11 用户手册

V1-V4 版本已过时，请勿再下载。

### V11 版本可用角色列表

[sieecc/WAI-NSFW-illustrious-SDXL at main](https://huggingface.co/datasets/sieecc/WAI-NSFW-illustrious-SDXL/tree/main)

- 此处列出的角色仅为临时测试结果，并非所有测试均已完成；后续将添加更多角色。

### 推荐设置

- **Steps (步数):** 25-40
- **CFG scale (CFG 尺度):** 5-7
- **Sampler (采样器):** Euler a
- VAE 已集成，请勿再就此提问。
- 原始尺寸请使用大于 1024x1024 的尺寸。
- **Hires upscale (高分辨率放大):** 1.5, **Hires steps (高分辨率步数):** 20, **Hires upscaler (高分辨率放大算法):** R-ESRGAN 4x+ Anime6B, **Denoising strength (降噪强度):** 0.35~0.5


<div class="article-ads"></div>

### 安全评级标签

共有四个安全评级标签：general, sensitive, nsfw, explicit。 建议用户自觉在负面提示词中添加 "nsfw" 以过滤不适当的内容。

### 正面提示词 (Positive Prompt)

```
masterpiece,best quality,amazing quality,
```

### 负面提示词 (Negative Prompt)

```
bad quality,worst quality,worst detail,sketch,censor,
```

希望本文对用户有所帮助！

WAI-NSFW-illustrious-SDXL 模型使用指南(一个优秀的动漫角色文生图模型)

## Vuetify 日历组件的使用教程

本文以自身使用场景为主题介绍 Vuetify 日历组件的用法，展示如何结合该组件处理日历上的事件、按钮、以及如何管理和显示支出和收入的流水数据。更多信息请查阅 [Vuetify 官网资料](https://vuetifyjs.com/)。

在本文中，将重点介绍如何使用 Vuetify 日历组件及相关的插槽和功能，来展示一个日历页面，其中包括跨天显示事件、日期点击事件和动态按钮添加功能。

> 本文代码示例来自老狗开源的账本软件：【[cashbook](https://github.com/dingdangdog/cashbook)】



## 一、准备工作

在本教程中，使用的是 Vuetify 3.x 或更高版本，并且假设您已经在项目中正确安装和配置了 Vuetify。

> 由于该日历组件还在实验室阶段，是一个较新的组件，所以需要使用比较新的版本，如果你不知道哪个版本之后可以用该日历，建议查阅官网资料！

首先确保您已经引入了必要的 Vuetify 组件：

```typescript
import { VCalendar } from "vuetify/labs/VCalendar";  // 引入 Vuetify 日历组件
```

接着，我们会通过 `v-calendar` 组件显示一个日历，并展示一些自定义的事件和按钮。

## 二、日历组件的基本用法

```vue
<v-calendar
  ref="calendar"
  :month="nowMonth"
  :year="nowYear"
  :events="events"
>
  
  <template v-slot:header="{ title }">
    <div class="calendar-header">
      <div>
        总收入：<b>{{ getInMonth() }}</b> &nbsp;
        总支出：<b>{{ getOutMonth() }}</b>
      </div>
      <div>
        <v-btn icon @click="changeDate('prev-month')">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <h3>{{ dayToMonth(nowDate) }}</h3>
        <v-btn icon @click="changeDate('next-month')">
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </div>
      <div>
        <v-btn color="primary" @click="showMonthAnalysis(dayToMonth(nowDate))">
          当月分析
        </v-btn>
      </div>
    </div>
  </template>

  
  <template v-slot:event="{ day, allDay, event }">
    <div v-if="event.type === 'button'" class="event-button">
      <v-btn size="small" color="rgba(3, 150, 200, 0.5)" icon="mdi-plus" @click="addFlow(day)">
      </v-btn>
    </div>
    <p v-if="event.type === 'data'" class="event-data">
      <v-chip class="event-chip" :class="event.out ? outMoneyClass(event.money) : inMoneyClass(event.money)">
        {{ event.title }}: {{ event.money.toFixed(2) }}
      </v-chip>
    </p>
  </template>
</v-calendar>
```

- **`v-slot:header`** 插槽用于自定义日历头部显示内容。在这里，我们展示了总收入和总支出。
- **`v-slot:event`** 插槽用于自定义事件显示。根据事件类型（例如按钮或数据事件），我们在日历上添加按钮或数据记录。

## 三、日历事件的管理

在该示例中，我们动态管理事件，首先为每一天添加一个“按钮”类型的事件，然后根据当天的流水数据，更新或新增收入与支出事件。

### 1. 初始化事件数据

```javascript
const events = reactive<CalendarDate[]>([]);

const initDailyButton = () => {
  const daysInMonth = new Date(nowYear.value, nowMonth.value + 1, 0).getDate(); // 获取本月的天数

  for (let day = 1; day <= daysInMonth; day++) {
    const buttonTitle = `button-${nowYear.value}-${nowMonth.value}-${day}`;
    const existingEvent = events.find(e => e.title === buttonTitle);
    if (!existingEvent) {
      events.unshift({
        type: "button",
        title: buttonTitle,
        day: `${nowYear.value}-${nowMonth.value + 1}-${day}`,
        start: new Date(`${nowYear.value}-${nowMonth.value + 1}-${day}`),
        end: new Date(`${nowYear.value}-${nowMonth.value + 1}-${day}`),
        color: "",
        allDay: true,
        out: false,
        money: 0,
      });
    }
  }
};
```

在 `initDailyButton` 函数中，我们为每个月的每一天添加一个“按钮”事件。这个事件的类型为 `"button"`，并为每一天设置了 `start` 和 `end` 时间，都是当天。

### 2. 添加收入与支出数据事件

通过 `addFlow` 方法，您可以动态为日历中的特定日期添加流水事件。根据流水类型（收入或支出），在相应的日期事件上添加或更新数据。

```javascript
const addFlow = (day: any) => {
  addFlowItem.value.day = day.isoDate;
  showFlowEditDialog.value = true;
};

const addFlowSuccess = (flow: Flow) => {
  const dayEvents = events.filter((e) => e.day === flow.day);
  const isOutFlow = flow.flowType === "支出";
  const matchingEvent = dayEvents.find((e) => e.out === isOutFlow);

  if (matchingEvent) {
    matchingEvent.money += flow.money;
  } else {
    events.push({
      start: new Date(flow.day),
      end: new Date(flow.day),
      allDay: true,
      out: isOutFlow,
      money: flow.money,
      title: isOutFlow ? "支出" : "收入",
      type: "data",
      day: flow.day,
    });
  }
};
```

- **`addFlow`**：用来弹出编辑流水的对话框，并将选择的日期传递给它。
- **`addFlowSuccess`**：处理用户编辑或新增的收入或支出，更新或添加事件。

## 四、日期与事件交互

在本示例中，日历上的日期和事件进行了深度交互。当用户点击某个日期时，会触发 `clickDay` 事件，该事件将根据点击的日期查询并展示该日期的收入或支出数据。

```javascript
const clickDay = (day: string | any, flowType?: string) => {
  if (day == "") {
    query.value.startDay = dateFormater("YYYY-MM-dd", new Date(nowDate.value.getFullYear(), nowDate.value.getMonth(), 1));
    query.value.endDay = dateFormater("YYYY-MM-dd", new Date(nowDate.value.getFullYear(), nowDate.value.getMonth() + 1, 0));
  } else {
    query.value.startDay = day;
    query.value.endDay = day;
  }
  if (flowType) {
    query.value.flowType = flowType;
  } else {
    query.value.flowType = "";
  }
  showFlowTable.value = true;
};
```

通过这种方式，您可以动态查询并显示每个日期的流水数据。

## 五、结尾

本文展示了如何在 Vuetify 的日历组件中，结合事件和按钮来实现一个收入支出的流水管理系统。通过使用 `v-calendar` 的插槽功能，我们能够灵活地展示日期、事件和操作按钮，以满足特定的使用场景需求。更多关于 Vuetify 日历组件的详细资料，请查阅 [Vuetify 官网](https://vuetifyjs.com/)。

Vuetify日历组件（v-calendar）的使用实践案例讲解

## Flutter嵌套滚动问题

使用Flutter开发APP时，一般都会遇到的一个问题：是嵌套滚动视图（nested scrollable views）。比如有两个可滚动区域：外部的 `CustomScrollView` 和内部 `TabBarView` 中的 `SingleChildScrollView`。这导致了滚动手势被内部的滚动区域"吞噬"，无法传递到外部。

下面是 `Claude3.7` 给出的几种解决方案可以考虑（`有些不靠谱，慎用！`）：



### 解决方案 1：使用 NeverScrollableScrollPhysics

- ***实测有问题(白屏)，请谨慎使用！！！***

在内部滚动视图上使用 `NeverScrollableScrollPhysics()`，让内容展开到其完整高度：

```java
Widget _buildDescriptionTab() {
  return Card(
    color: Colors.white,
    margin: const EdgeInsets.all(8),
    elevation: 1,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Container(
      child: SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(), // 禁用内部滚动
        padding: const EdgeInsets.all(8),
        child: HtmlWidget(
          _work.content ?? "",
          textStyle: const TextStyle(fontSize: 16),
        ),
      ),
    ),
  );
}
```

然后移除 SizedBox 的固定高度，让内容决定其高度：

```java
SliverToBoxAdapter _buildTabContent() {
  return SliverToBoxAdapter(
    child: TabBarView(
      controller: _tabController,
      children: [
        _buildDescriptionTab(),
        _buildPaidContentTab(),
        if (_work.fileList != null && _work.fileList!.isNotEmpty)
          _buildAttachmentsTab(),
      ],
    ),
  );
}
```

### 解决方案 2：使用 NestedScrollView

更好的解决方案是重构代码，使用专为处理嵌套滚动而设计的 `NestedScrollView`：

```java
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          _buildAppBar(),
          _buildWorkInfo(),
          _buildTabBar(),
        ];
      },
      body: TabBarView(
        controller: _tabController,
        children: [
          _buildScrollableDescriptionTab(),
          _buildScrollablePaidContentTab(),
          if (_work.fileList != null && _work.fileList!.isNotEmpty)
            _buildScrollableAttachmentsTab(),
        ],
      ),
    ),
  );
}

Widget _buildScrollableDescriptionTab() {
  return ListView(
    padding: const EdgeInsets.all(8),
    children: [
      Card(
        color: Colors.white,
        elevation: 1,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: HtmlWidget(
            _work.content ?? "",
            textStyle: const TextStyle(fontSize: 16),
          ),
        ),
      ),
      // 这里可以添加集合列表和相关作品
      if (_work.collectionList != null && _work.collectionList!.isNotEmpty)
        _buildCollectionListContent(),
      if (_relatedWorks.isNotEmpty) 
        _buildRelatedWorksContent(),
    ],
  );
}
```

### 解决方案 3：使用 SliverFillRemaining 和动态高度

```java
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
        _buildAppBar(),
        _buildWorkInfo(),
        _buildTabBar(),
        SliverFillRemaining(
          child: TabBarView(
            controller: _tabController,
            children: [
              _buildScrollableDescriptionTab(),
              _buildScrollablePaidContentTab(),
              if (_work.fileList != null && _work.fileList!.isNotEmpty)
                _buildScrollableAttachmentsTab(),
            ],
          ),
        ),
      ],
    ),
  );
}
```

### 最佳建议

考虑到你的需求，我建议使用*解决方案 2*（`NestedScrollView`），因为：

1. 它专门为解决嵌套滚动问题而设计
2. 它能保持整体页面的滚动连续性
3. 它能更好地处理 TabBarView 和滚动内容的集成

这将需要重构部分代码，但能提供最佳的用户体验，避免滚动中断的问题。如果重构成本太高，可以先尝试解决方案 1 作为临时解决方法。

Flutter嵌套滚动问题（Claude3.7给出解决方案）

## 问题简介

最近使用AI写Flutter代码，写的很顺利，也没有报错，但就是页面白屏，不知道是什么原因，最终排查好久发现时如下代码导致的。



## 问题代码

```java
Widget _buildDescriptionTab() {
  return Card(
    color: Colors.white,
    margin: const EdgeInsets.all(8),
    elevation: 1,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Container(
      child: SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(), // 禁用内部滚动
        padding: const EdgeInsets.all(8),
        child: HtmlWidget(
          _work.content ?? "",
          textStyle: const TextStyle(fontSize: 16),
        ),
      ),
    ),
  );
}
```

### 问题点

貌似出现在禁止内部滚动上！但具体原因还不确定，总之，去除禁止滚动看看是否恢复吧~

PS：具体白屏场景：自组件禁止滚动后，父容器又没有设置固定高度，不知道是不是这个原因~

```
physics: NeverScrollableScrollPhysics(),
```

记一次Flutter白屏事件（还不知道根本原因，但直到是什么导致的，先记上）

twitter:card

twitter:title

twitter:site

twitter:image

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

twitter:description

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