koishi-plugin-adapter-iirose/data/usage.html

[IIROSE-蔷薇花园](https://iirose.com/)适配器

<!--
ZhuZiAWan-2.ttc

完整字体：
- https://github.com/iirose-plugins/koishi-plugin-adapter-iirose/releases/download/v1.0.0/ZhuZiAWan-2.ttc
- https://www.fonts.net.cn/font-34569394773.html

精简字体：https://github.com/iirose-plugins/koishi-plugin-adapter-iirose/tree/docs/docs/public/fonts

更改此HTML文件，并且推送至github仓库的main分支，工作流会自动剪裁字体到docs分支的docs/public/fonts/ZhuZiAWan-2.ttc

---

关于hmr热重载：

由于此文件是单独的HTML文件，在koishi开发时，如需在koishi前端热重载此文件

需要先触发`src\index.ts`的热重载（保存一下），才会让此usage部分显示内容重载。
-->
<style>
    @font-face {
        font-family: 'ZhuZiAWan';
        src:
            url('https://cdn.jsdmirror.com/gh/iirose-plugins/koishi-plugin-adapter-iirose@docs/docs/public/fonts/ZhuZiAWan-2.ttc') format('truetype'),
            url('https://cdn.jsdelivr.net/gh/iirose-plugins/koishi-plugin-adapter-iirose@docs/docs/public/fonts/ZhuZiAWan-2.ttc') format('truetype'),
            url('https://raw.githubusercontent.com/iirose-plugins/koishi-plugin-adapter-iirose/refs/heads/docs/docs/public/fonts/ZhuZiAWan-2.ttc') format('truetype'),
        ;
        font-display: swap;
        font-weight: 900;
        font-style: normal;
        unicode-range: U+0000-FFFF;
    }

    @supports (font-display: swap) {
        .iirose-container {
            font-synthesis: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }

    .iirose-container,
    .iirose-container *,
    .iirose-container *:before,
    .iirose-container *:after {
        font-family: 'ZhuZiAWan', sans-serif !important;
        font-weight: 900 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-shadow: 0.5px 0.5px 0.5px currentColor;
    }

    .iirose-container {
        font-family: 'ZhuZiAWan', sans-serif !important;
        line-height: 1.4;
        padding: 16px;
        max-width: 800px;
        margin: 0;
        background: rgba(128, 128, 128, 0.15);
        border-radius: 4px;
        backdrop-filter: blur(10px);
        font-weight: 900 !important;
        text-shadow: 0.8px 0.8px 0.8px currentColor;
        font-size: 1.05em;
    }

    .iirose-header {
        text-align: left;
        margin-bottom: 20px;
        padding: 16px;
        background: rgba(128, 128, 128, 0.12);
        border-radius: 4px;
        border: 1px solid rgba(128, 128, 128, 0.18);
        font-weight: 900 !important;
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-title {
        font-size: 1.5em;
        font-weight: 900 !important;
        margin: 0 0 6px 0;
        letter-spacing: 0.5px;
        text-shadow: 1px 1px 1px currentColor;
    }

    .iirose-subtitle {
        font-size: 1.1em;
        margin: 0 0 14px 0;
        opacity: 0.8;
        font-weight: 900 !important;
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-link {
        display: inline-block;
        padding: 8px 18px;
        background: rgba(128, 128, 128, 0.18);
        border: 1px solid rgba(128, 128, 128, 0.25);
        border-radius: 4px;
        text-decoration: none;
        color: inherit;
        font-weight: 900 !important;
        font-size: 1.05em;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        text-shadow: 0.5px 0.5px 0.5px currentColor;
    }

    .iirose-link:hover {
        background: rgba(128, 128, 128, 0.25);
        border-color: rgba(128, 128, 128, 0.35);
        transform: translateY(-1px);
    }

    .iirose-card {
        background: rgba(128, 128, 128, 0.12);
        border: 1px solid rgba(128, 128, 128, 0.15);
        border-radius: 4px;
        padding: 14px;
        margin-bottom: 12px;
        backdrop-filter: blur(8px);
        font-weight: 900 !important;
        text-shadow: 0.5px 0.5px 0.5px currentColor;
    }

    .iirose-warning {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: rgba(255, 193, 7, 0.1);
        border: 1px solid rgba(255, 193, 7, 0.2);
        border-radius: 4px;
        font-size: 1.05em;
        font-weight: 900 !important;
        text-shadow: 0.5px 0.5px 0.5px currentColor;
    }

    .iirose-warning-icon {
        font-size: 1.15em;
        filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.3));
        font-weight: 900 !important;
    }

    .iirose-section-title {
        font-size: 1.2em;
        font-weight: 900 !important;
        margin: 0 0 12px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-dep-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .iirose-dep-item {
        padding: 8px 14px;
        background: rgba(128, 128, 128, 0.15);
        border: 1px solid rgba(128, 128, 128, 0.18);
        border-radius: 4px;
        text-align: left;
        font-size: 1.05em;
        font-weight: 900 !important;
        transition: all 0.2s ease;
        text-shadow: 0.5px 0.5px 0.5px currentColor;
    }

    .iirose-dep-item:hover {
        background: rgba(128, 128, 128, 0.2);
        transform: translateY(-1px);
    }

    .iirose-dep-item a {
        text-decoration: none;
        color: inherit;
        display: block;
        font-weight: 900 !important;
    }

    .iirose-community {
        text-align: left;
        margin-top: 20px;
        padding: 16px;
        background: rgba(128, 128, 128, 0.12);
        border: 1px solid rgba(128, 128, 128, 0.18);
        border-radius: 4px;
        font-weight: 900 !important;
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-community-title {
        font-size: 1.2em;
        font-weight: 900 !important;
        margin: 0 0 12px 0;
        display: flex;
        align-items: center;
        gap: 6px;
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-qq-group {
        font-size: 0.9em;
        padding: 10px 18px;
        background: rgba(128, 128, 128, 0.15);
        border: 1px solid rgba(128, 128, 128, 0.22);
        border-radius: 4px;
        display: inline-block;
        font-weight: 900 !important;
        letter-spacing: 0.3px;
        text-shadow: 0.6px 0.6px 0.6px currentColor;
    }

    .iirose-qq-number {
        font-weight: 900 !important;
        text-shadow: 0.7px 0.7px 0.7px currentColor;
    }

    @media (max-width: 640px) {
        .iirose-container {
            padding: 12px;
            margin: 4px;
        }

        .iirose-header {
            padding: 12px;
        }

        .iirose-title {
            font-size: 1.7em;
        }

        .iirose-dep-list {
            grid-template-columns: 1fr;
        }

        .iirose-community {
            padding: 12px;
        }

        .iirose-card {
            padding: 10px;
        }
    }

    .iirose-container * {
        box-shadow: none !important;
    }

    .iirose-container * {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .english-text {
        font-family: 'ZhuZiAWan', sans-serif !important;
        font-weight: 900 !important;
    }
</style>

<div class="iirose-container">
    <div class="iirose-header">
        <h2 class="iirose-title"><span class="english-text">IIROSE</span> 适配器</h2>
        <p class="iirose-subtitle">连接 <span class="english-text">Koishi</span> 与蔷薇花园</p>
        <a href="https://iirose-plugins.github.io/koishi-plugin-adapter-iirose/" target="_blank" class="iirose-link">
            查看完整配置教程
        </a>
    </div>

    <div class="iirose-card">
        <div class="iirose-warning">
            <span class="iirose-warning-icon">⚠️</span>
            <span>需要<a href="/market?keyword=assets-"
                    style="color: inherit; text-decoration: underline; font-weight: 900;">依赖 <span
                        class="english-text">assets</span> 服务</a>才能发送图片等富媒体消息</span>
        </div>
    </div>

    <div class="iirose-card">
        <div class="iirose-dependencies">
            <h3 class="iirose-section-title">服务依赖</h3>
            <ul class="iirose-dep-list">
                <li class="iirose-dep-item english-text">http</li>
                <li class="iirose-dep-item english-text">logger</li>
                <li class="iirose-dep-item english-text">database</li>
                <li class="iirose-dep-item">
                    <a href="/market?keyword=assets-" style="text-decoration: none; color: inherit; font-weight: 900;"
                        class="english-text">assets</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="iirose-community">
        <h3 class="iirose-community-title">
            💬 反馈与交流
        </h3>
        <div class="iirose-qq-group">
            <span class="english-text">QQ</span>群: <a href="https://qm.qq.com/q/Z7QQVjOFO2" target="_blank"
                class="iirose-qq-number">1059933235</a>
        </div>
    </div>
</div>