♻️ refactor: 统一图片渲染架构并引入通用UI组件系统 (#2019)

* ♻️ refactor: 统一图片渲染架构并引入通用UI组件系统

🎨 **渲染服务重构**
- 统一图片渲染入口，引入主题系统支持
- 优化Jinja2环境管理，支持主题覆盖和插件命名空间
- 新增UI缓存机制和主题重载功能

✨ **通用UI组件系统**
- 新增 zhenxun.ui 模块，提供数据模型和构建器
- 引入BaseBuilder基类，支持链式调用
- 新增多种UI构建器：InfoCard, Markdown, Table, Chart, Layout等
- 新增通用组件：Divider, Badge, ProgressBar, UserInfoBlock

🔄 **插件迁移**
- 迁移9个内置插件至新渲染系统
- 移除各插件中分散的图片生成工具
- 优化数据处理和渲染逻辑

💥 **Breaking Changes**
- 移除旧的图片渲染接口和模板路径
- TEMPLATE_PATH 更名为 THEMES_PATH
- 插件需适配新的RendererService和zhenxun.ui模块

* ✅ test(check): 更新自检插件测试中的渲染服务模拟

* ♻️ refactor(renderer): 将缓存文件名哈希算法切换到 SHA256

* ♻️ refactor(shop): 移除商店HTML图片生成模块

* 🚨 auto fix by pre-commit hooks

---------

Co-authored-by: webjoin111 <455457521@qq.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

zhenxun/builtin_plugins/sign_in/utils.py

@@ -1,28 +1,22 @@
 from datetime import datetime
-from io import BytesIO
 import os
 from pathlib import Path
 import random
 
+import aiofiles
 import nonebot
 from nonebot.drivers import Driver
-from nonebot_plugin_htmlrender import template_to_pic
 from nonebot_plugin_uninfo import Uninfo
 import pytz
 
 from zhenxun.configs.config import BotConfig, Config
-from zhenxun.configs.path_config import IMAGE_PATH, TEMPLATE_PATH
 from zhenxun.models.sign_log import SignLog
 from zhenxun.models.sign_user import SignUser
-from zhenxun.utils.http_utils import AsyncHttpx
-from zhenxun.utils.image_utils import BuildImage
+from zhenxun.services import renderer_service
 from zhenxun.utils.manager.priority_manager import PriorityLifecycle
 from zhenxun.utils.platform import PlatformUtils
 
 from .config import (
-    SIGN_BACKGROUND_PATH,
-    SIGN_BORDER_PATH,
-    SIGN_RESOURCE_PATH,
     SIGN_TODAY_CARD_PATH,
     level2attitude,
     lik2level,
@@ -57,9 +51,7 @@ LG_MESSAGE = [
 
 @PriorityLifecycle.on_startup(priority=5)
 async def init_image():
-    SIGN_RESOURCE_PATH.mkdir(parents=True, exist_ok=True)
     SIGN_TODAY_CARD_PATH.mkdir(exist_ok=True, parents=True)
-    # await generate_progress_bar_pic()
     clear_sign_data_pic()
 
 
@@ -88,290 +80,54 @@ async def get_card(
     返回:
         Path: 卡片路径
     """
-    await generate_progress_bar_pic()
     user_id = user.user_id
     date = datetime.now().date()
     _type = "view" if is_card_view else "sign"
     file_name = f"{user_id}_{_type}_{date}.png"
-    view_name = f"{user_id}_view_{date}.png"
-    card_file = Path(SIGN_TODAY_CARD_PATH) / file_name
+    card_file = SIGN_TODAY_CARD_PATH / file_name
+
     if card_file.exists():
-        return IMAGE_PATH / "sign" / "today_card" / file_name
+        return card_file
+
     if add_impression == -1:
-        card_file = Path(SIGN_TODAY_CARD_PATH) / view_name
-        if card_file.exists():
-            return card_file
+        view_name = f"{user_id}_view_{date}.png"
+        view_card_file = SIGN_TODAY_CARD_PATH / view_name
+        if view_card_file.exists():
+            return view_card_file
         is_card_view = True
-    return (
-        await _generate_html_card(
-            user, session, nickname, add_impression, gold, gift, is_double, is_card_view
-        )
-        if base_config.get("IMAGE_STYLE") == "zhenxun"
-        else await _generate_card(
-            user, session, nickname, add_impression, gold, gift, is_double, is_card_view
-        )
+
+    return await _generate_html_card(
+        user, session, nickname, add_impression, gold, gift, is_double, is_card_view
     )
 
 
-async def _generate_card(
-    user: SignUser,
-    session: Uninfo,
-    nickname: str,
-    add_impression: float,
-    gold: int | None,
-    gift: str,
-    is_double: bool = False,
-    is_card_view: bool = False,
-) -> Path:
-    """生成签到卡片
-
-    参数:
-        user: SignUser
-        session: Uninfo
-        nickname: 用户昵称
-        add_impression: 新增的好感度
-        gold: 金币
-        gift: 礼物
-        is_double: 是否触发双倍.
-        is_card_view: 是否展示好感度卡片.
-
-    返回:
-        Path: 卡片路径
-    """
-    ava_bk = BuildImage(140, 140, (255, 255, 255, 0))
-    ava_border = BuildImage(
-        140,
-        140,
-        background=SIGN_BORDER_PATH / "ava_border_01.png",
-    )
-    if session.user.avatar and (
-        byt := await AsyncHttpx.get_content(session.user.avatar)
-    ):
-        ava = BuildImage(107, 107, background=BytesIO(byt))
-    else:
-        ava = BuildImage(107, 107, (0, 0, 0))
-    await ava.circle()
-    await ava_bk.paste(ava, (19, 18))
-    await ava_bk.paste(ava_border, center_type="center")
-    impression = float(user.impression)
-    info_img = BuildImage(250, 150, color=(255, 255, 255, 0), font_size=15)
-    level, next_impression, previous_impression = get_level_and_next_impression(
-        impression
-    )
-    interpolation = next_impression - impression
-    await info_img.text((0, 0), f"· 好感度等级：{level} [{lik2relation[level]}]")
-    await info_img.text(
-        (0, 20), f"· {BotConfig.self_nickname}对你的态度：{level2attitude[level]}"
-    )
-    await info_img.text((0, 40), f"· 距离升级还差 {interpolation:.2f} 好感度")
-
-    bar_bk = BuildImage(220, 20, background=SIGN_RESOURCE_PATH / "bar_white.png")
-    bar = BuildImage(220, 20, background=SIGN_RESOURCE_PATH / "bar.png")
-    ratio = 1 - (next_impression - impression) / (next_impression - previous_impression)
-    if next_impression == 0:
-        ratio = 0
-    await bar.resize(width=int(bar.width * ratio) or 1, height=bar.height)
-    await bar_bk.paste(bar)
-    font_size = 20 if "好感度双倍加持卡" in gift else 30
-    gift_border = BuildImage(
-        270,
-        100,
-        background=SIGN_BORDER_PATH / "gift_border_02.png",
-        font_size=font_size,
-    )
-    await gift_border.text((0, 0), gift, center_type="center")
-
-    bk = BuildImage(
-        876,
-        424,
-        background=SIGN_BACKGROUND_PATH
-        / random.choice(os.listdir(SIGN_BACKGROUND_PATH)),
-        font_size=25,
-    )
-    A = BuildImage(876, 274, background=SIGN_RESOURCE_PATH / "white.png")
-    line = BuildImage(2, 180, color="black")
-    await A.transparent(2)
-    await A.paste(ava_bk, (25, 80))
-    await A.paste(line, (200, 70))
-    nickname_img = await BuildImage.build_text_image(
-        nickname, size=50, font_color=(255, 255, 255)
-    )
-    user_console = await user.user_console
-    if user_console and user_console.uid is not None:
-        uid = f"{user_console.uid}".rjust(12, "0")
-        uid = f"{uid[:4]} {uid[4:8]} {uid[8:]}"
-    else:
-        uid = "XXXX XXXX XXXX"
-    uid_img = await BuildImage.build_text_image(
-        f"UID: {uid}", size=30, font_color=(255, 255, 255)
-    )
-    image1 = await bk.build_text_image("Accumulative check-in for", bk.font, size=30)
-    image2 = await bk.build_text_image("days", bk.font, size=30)
-    sign_day_img = await BuildImage.build_text_image(
-        f"{user.sign_count}", size=40, font_color=(211, 64, 33)
-    )
-    tip_width = image1.width + image2.width + sign_day_img.width + 60
-    tip_height = max([image1.height, image2.height, sign_day_img.height])
-    tip_image = BuildImage(tip_width, tip_height, (255, 255, 255, 0))
-    await tip_image.paste(image1, (0, 7))
-    await tip_image.paste(sign_day_img, (image1.width + 7, 0))
-    await tip_image.paste(image2, (image1.width + sign_day_img.width + 15, 7))
-
-    lik_text1_img = await BuildImage.build_text_image("当前", size=20)
-    lik_text2_img = await BuildImage.build_text_image(
-        f"好感度：{user.impression:.2f}", size=30
-    )
-    watermark = await BuildImage.build_text_image(
-        f"{BotConfig.self_nickname}@{datetime.now().year}",
-        size=15,
-        font_color=(155, 155, 155),
-    )
-    today_data = BuildImage(300, 300, color=(255, 255, 255, 0), font_size=20)
-    if is_card_view:
-        today_sign_text_img = await BuildImage.build_text_image("", size=30)
-        value_list = (
-            await SignUser.annotate()
-            .order_by("-impression")
-            .values_list("user_id", flat=True)
-        )
-        index = value_list.index(user.user_id) + 1  # type: ignore
-        rank_img = await BuildImage.build_text_image(
-            f"* 好感度排名第 {index} 位", size=30
-        )
-        await A.paste(rank_img, ((A.width - rank_img.width - 32), 20))
-        last_log = (
-            await SignLog.filter(user_id=user.user_id).order_by("create_time").first()
-        )
-        last_date = "从未"
-        if last_log:
-            last_date = last_log.create_time.astimezone(
-                pytz.timezone("Asia/Shanghai")
-            ).date()
-        await today_data.text(
-            (0, 0),
-            f"上次签到日期：{last_date}",
-        )
-        await today_data.text((0, 25), f"总金币：{gold}")
-        default_setu_prob = (
-            Config.get_config("send_setu", "INITIAL_SETU_PROBABILITY") * 100  # type: ignore
-        )
-        setu_prob = (
-            default_setu_prob + float(user.impression) if user.impression < 100 else 100
-        )
-        await today_data.text(
-            (0, 50),
-            f"色图概率：{setu_prob:.2f}%",
-        )
-        await today_data.text((0, 75), f"开箱次数：{(20 + int(user.impression / 3))}")
-        _type = "view"
-    else:
-        await A.paste(gift_border, (570, 140))
-        today_sign_text_img = await BuildImage.build_text_image("今日签到", size=30)
-        if is_double:
-            await today_data.text((0, 0), f"好感度 + {add_impression / 2:.2f} × 2")
-        else:
-            await today_data.text((0, 0), f"好感度 + {add_impression:.2f}")
-        await today_data.text((0, 25), f"金币 + {gold}")
-        _type = "sign"
-    current_date = datetime.now()
-    current_datetime_str = current_date.strftime("%Y-%m-%d %a %H:%M:%S")
-    date = current_date.date()
-    date_img = await BuildImage.build_text_image(
-        f"时间：{current_datetime_str}", size=20
-    )
-    await bk.paste(nickname_img, (30, 15))
-    await bk.paste(uid_img, (30, 85))
-    await bk.paste(A, (0, 150))
-    await bk.paste(tip_image, (10, 167))
-    await bk.paste(date_img, (220, 370))
-    await bk.paste(lik_text1_img, (220, 240))
-    await bk.paste(lik_text2_img, (262, 234))
-    await bk.paste(bar_bk, (225, 275))
-    await bk.paste(info_img, (220, 305))
-    await bk.paste(today_sign_text_img, (550, 180))
-    await bk.paste(today_data, (580, 220))
-    await bk.paste(watermark, (15, 400))
-    await bk.save(SIGN_TODAY_CARD_PATH / f"{user.user_id}_{_type}_{date}.png")
-    return IMAGE_PATH / "sign" / "today_card" / f"{user.user_id}_{_type}_{date}.png"
-
-
-async def generate_progress_bar_pic():
-    """
-    初始化进度条图片
-    """
-    bar_white_file = SIGN_RESOURCE_PATH / "bar_white.png"
-    if bar_white_file.exists():
-        return
-
-    bg_2 = (254, 1, 254)
-    bg_1 = (0, 245, 246)
-
-    bk = BuildImage(1000, 50)
-    img_x = BuildImage(50, 50, color=bg_2)
-    await img_x.circle()
-    await img_x.crop((25, 0, 50, 50))
-    img_y = BuildImage(50, 50, color=bg_1)
-    await img_y.circle()
-    await img_y.crop((0, 0, 25, 50))
-    A = BuildImage(950, 50)
-    width, height = A.size
-
-    step_r = (bg_2[0] - bg_1[0]) / width
-    step_g = (bg_2[1] - bg_1[1]) / width
-    step_b = (bg_2[2] - bg_1[2]) / width
-
-    for y in range(width):
-        bg_r = round(bg_1[0] + step_r * y)
-        bg_g = round(bg_1[1] + step_g * y)
-        bg_b = round(bg_1[2] + step_b * y)
-        for x in range(height):
-            await A.point((y, x), fill=(bg_r, bg_g, bg_b))
-    await bk.paste(img_y, (0, 0))
-    await bk.paste(A, (25, 0))
-    await bk.paste(img_x, (975, 0))
-    await bk.save(SIGN_RESOURCE_PATH / "bar.png")
-
-    A = BuildImage(950, 50)
-    bk = BuildImage(1000, 50)
-    img_x = BuildImage(50, 50)
-    await img_x.circle()
-    await img_x.crop((25, 0, 50, 50))
-    img_y = BuildImage(50, 50)
-    await img_y.circle()
-    await img_y.crop((0, 0, 25, 50))
-    await bk.paste(img_y, (0, 0))
-    await bk.paste(A, (25, 0))
-    await bk.paste(img_x, (975, 0))
-    await bk.save(bar_white_file)
-
-
-def get_level_and_next_impression(impression: float) -> tuple[str, int | float, int]:
+def get_level_and_next_impression(impression: float) -> tuple[int, int | float, int]:
     """获取当前好感等级与下一等级的差距
 
     参数:
         impression: 好感度
 
     返回:
-        tuple[str, int, int]: 好感度等级，下一等级好感度要求，已达到的好感度要求
+        tuple[int, int, int]: 好感度等级，下一等级好感度要求，已达到的好感度要求
     """
 
     keys = list(lik2level.keys())
-    level, next_impression, previous_impression = (
-        lik2level[keys[-1]],
+    level_int, next_impression, previous_impression = (
+        int(lik2level[keys[-1]]),
         keys[-2],
         keys[-1],
     )
     for i in range(len(keys)):
         if impression >= keys[i]:
-            level, next_impression, previous_impression = (
-                lik2level[keys[i]],
+            level_int, next_impression, previous_impression = (
+                int(lik2level[keys[i]]),
                 keys[i - 1],
                 keys[i],
             )
             if i == 0:
                 next_impression = impression
             break
-    return level, next_impression, previous_impression
+    return level_int, next_impression, previous_impression
 
 
 def clear_sign_data_pic():
@@ -394,7 +150,7 @@ async def _generate_html_card(
     is_double: bool = False,
     is_card_view: bool = False,
 ) -> Path:
-    """生成签到卡片
+    """使用渲染服务生成签到卡片
 
     参数:
         user: SignUser
@@ -404,79 +160,130 @@ async def _generate_html_card(
         gold: 金币
         gift: 礼物
         is_double: 是否触发双倍.
-        is_card_view: 是否展示好感度卡片.
+        is_card_view: 是否为卡片视图.
 
     返回:
         Path: 卡片路径
     """
+    now = datetime.now()
+    date = now.date()
+    _type = "view" if is_card_view else "sign"
+    file_name = f"{user.user_id}_{_type}_{date}.png"
+    card_file = SIGN_TODAY_CARD_PATH / file_name
+
+    if card_file.exists():
+        return card_file
+
     impression = float(user.impression)
     user_console = await user.user_console
-    if user_console and user_console.uid is not None:
-        uid = f"{user_console.uid}".rjust(12, "0")
-        uid = f"{uid[:4]} {uid[4:8]} {uid[8:]}"
-    else:
-        uid = "XXXX XXXX XXXX"
+    uid_str = (
+        f"{user_console.uid:08}"
+        if user_console and user_console.uid is not None
+        else "XXXXXXXX"
+    )
+    uid_formatted = f"{uid_str[:4]} {uid_str[4:]}"
+
     level, next_impression, previous_impression = get_level_and_next_impression(
         impression
     )
-    interpolation = next_impression - impression
-    message = f"{BotConfig.self_nickname}希望你开心！"
-    hour = datetime.now().hour
-    if hour > 6 and hour < 10:
-        message = random.choice(MORNING_MESSAGE)
-    elif hour >= 0 and hour < 6:
-        message = random.choice(LG_MESSAGE)
-    _impression = f"{add_impression}(×2)" if is_double else add_impression
-    process = 1 - (next_impression - impression) / (
-        next_impression - previous_impression
+
+    attitude = level2attitude.get(str(level), "未知")
+    interpolation_val = max(0, next_impression - impression)
+    interpolation = f"{interpolation_val:.2f}"
+
+    denominator = next_impression - previous_impression
+    progress = (
+        100.0
+        if denominator == 0
+        else min(100.0, ((impression - previous_impression) / denominator) * 100)
     )
-    now = datetime.now()
-    data = {
-        "ava_url": PlatformUtils.get_user_avatar_url(
+
+    hour = now.hour
+    if 6 < hour < 10:
+        bot_message = random.choice(MORNING_MESSAGE)
+    elif 0 <= hour < 6:
+        bot_message = random.choice(LG_MESSAGE)
+    else:
+        bot_message = f"{BotConfig.self_nickname}希望你开心！"
+
+    temperature = random.randint(1, 40)
+    weather_icon_name = f"{random.randint(0, 11)}.png"
+    tag_icon_name = f"{random.randint(0, 5)}.png"
+
+    user_info = {
+        "nickname": nickname,
+        "uid_str": uid_formatted,
+        "avatar_url": PlatformUtils.get_user_avatar_url(
             user.user_id, PlatformUtils.get_platform(session), session.self_id
-        ),
-        "name": nickname,
-        "uid": uid,
-        "sign_count": f"{user.sign_count}",
-        "message": f"{BotConfig.self_nickname}说: {message}",
-        "cur_impression": f"{impression:.2f}",
-        "impression": f"好感度+{_impression}",
-        "gold": f"金币+{gold}",
-        "gift": gift,
-        "level": f"{level} [{lik2relation[level]}]",
-        "attitude": f"对你的态度: {level2attitude[level]}",
-        "interpolation": f"{interpolation:.2f}",
-        "heart2": [1 for _ in range(int(level))],
-        "heart1": [1 for _ in range(len(lik2level) - int(level) - 1)],
-        "process": process * 100,
-        "date": str(now.replace(microsecond=0)),
-        "font_size": 45,
+        )
+        or "",
+        "sign_count": user.sign_count,
     }
-    if len(nickname) > 6:
-        data["font_size"] = 27
-    _type = "sign"
+
+    favorability_info = {
+        "current": impression,
+        "level": level,
+        "next_level_at": next_impression,
+        "previous_level_at": previous_impression,
+    }
+
+    reward_info = None
+    rank = None
+    total_gold = None
+    last_sign_date_str = None
+
     if is_card_view:
-        _type = "view"
         value_list = (
             await SignUser.annotate()
             .order_by("-impression")
             .values_list("user_id", flat=True)
         )
-        index = value_list.index(user.user_id) + 1  # type: ignore
-        data["impression"] = f"好感度排名第 {index} 位"
-        data["gold"] = f"总金币：{gold}"
-        data["gift"] = ""
-    pic = await template_to_pic(
-        template_path=str((TEMPLATE_PATH / "sign").absolute()),
-        template_name="main.html",
-        templates={"data": data},
-        pages={
-            "viewport": {"width": 465, "height": 926},
-            "base_url": f"file://{TEMPLATE_PATH}",
-        },
-        wait=2,
-    )
-    image = BuildImage.open(pic)
-    date = now.date()
-    await image.save(SIGN_TODAY_CARD_PATH / f"{user.user_id}_{_type}_{date}.png")
-    return IMAGE_PATH / "sign" / "today_card" / f"{user.user_id}_{_type}_{date}.png"
+        rank = value_list.index(user.user_id) + 1 if user.user_id in value_list else 0
+        total_gold = user_console.gold if user_console else 0
+
+        last_log = (
+            await SignLog.filter(user_id=user.user_id).order_by("-create_time").first()
+        )
+        last_date = "从未"
+        if last_log:
+            last_date = str(
+                last_log.create_time.astimezone(pytz.timezone("Asia/Shanghai")).date()
+            )
+        last_sign_date_str = f"上次签到：{last_date}"
+
+    else:
+        reward_info = {
+            "impression_added": add_impression,
+            "gold_added": gold or 0,
+            "gift_received": gift,
+            "is_double": is_double,
+        }
+
+    page_info = {
+        "date_str": str(now.replace(microsecond=0)),
+        "weather_icon_name": weather_icon_name,
+        "temperature": temperature,
+        "tag_icon_name": tag_icon_name,
+    }
+
+    card_data = {
+        "is_card_view": is_card_view,
+        "user": user_info,
+        "favorability": favorability_info,
+        "reward": reward_info,
+        "page": page_info,
+        "bot_message": bot_message,
+        "attitude": attitude,
+        "interpolation": interpolation,
+        "progress": progress,
+        "rank": rank,
+        "total_gold": total_gold,
+        "last_sign_date_str": last_sign_date_str,
+    }
+
+    image_bytes = await renderer_service.render("pages/builtin/sign", data=card_data)
+
+    async with aiofiles.open(card_file, "wb") as f:
+        await f.write(image_bytes)
+
+    return card_file