koishi-plugin-rocom 1.0.19 → 1.0.24

package/lib/render-templates/home-pets/style.css

@@ -0,0 +1,338 @@
+@font-face {
+    font-family: "rocom-home";
+    src: url("../../ttf/HYWenHei-85W-1.ttf") format("truetype");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "rocom-skill";
+    src: url("../../ttf/fzlant.D5FI9Et0.ttf") format("truetype");
+    font-display: swap;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    width: fit-content;
+    min-width: 0;
+    height: auto;
+    min-height: 0;
+    background: transparent;
+    color: #ffffff;
+    font-family: "rocom-home", "Microsoft YaHei", "PingFang SC", sans-serif;
+}
+
+.home-pets-page {
+    position: relative;
+    width: 1000px;
+    min-height: 760px;
+    overflow: hidden;
+    padding-bottom: 24px;
+    background: #efe6d2;
+}
+
+.page-bg-img {
+    position: absolute;
+    inset: 0 auto auto 0;
+    z-index: 0;
+    width: 1000px;
+    /* height 而非 min-height：背景图按容器高度裁切，避免大图溢出被算进 scrollHeight 导致截图尾部大片空白 */
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    pointer-events: none;
+}
+
+.home-top {
+    position: relative;
+    z-index: 1;
+    height: 228px;
+}
+
+.top-bg,
+.title-fg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1000px;
+    pointer-events: none;
+}
+
+.top-bg {
+    height: 250px;
+    object-fit: cover;
+}
+
+.title-fg {
+    height: 210px;
+    object-fit: contain;
+}
+
+.avatar-wrap {
+    position: absolute;
+    left: 31px;
+    top: 14px;
+    width: 152px;
+    height: 152px;
+    overflow: hidden;
+    border-radius: 50%;
+    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
+}
+
+.avatar-img {
+    width: 152px;
+    height: 152px;
+    object-fit: cover;
+}
+
+.home-profile {
+    position: absolute;
+    left: 200px;
+    top: 70px;
+    right: 130px;
+    text-shadow: none;
+}
+
+.home-owner {
+    overflow: hidden;
+    color: #ffffff;
+    font-family: "rocom-skill", "rocom-home", "Microsoft YaHei", sans-serif;
+    font-size: 46px;
+    font-weight: 400;
+    line-height: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.home-uid {
+    margin-top: 11px;
+    color: #ffffff;
+    font-family: "rocom-skill", "rocom-home", "Microsoft YaHei", sans-serif;
+    font-size: 38px;
+    font-weight: 400;
+    line-height: 1;
+}
+
+.update-time {
+    position: absolute;
+    right: 28px;
+    top: 18px;
+    padding: 7px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.23);
+    color: #ffffff;
+    font-size: 15px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
+}
+
+.pets-summary {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 28px;
+    margin: 18px 46px 0;
+    padding: 14px 22px;
+    border-radius: 18px;
+    background: rgba(42, 93, 16, 0.62);
+    font-size: 26px;
+}
+
+.pets-summary strong {
+    color: #ffff00;
+    font-weight: 400;
+    font-size: 30px;
+    padding: 0 4px;
+}
+
+.egg-summary strong {
+    color: #ffd24d;
+}
+
+.pets-content {
+    position: relative;
+    z-index: 1;
+    padding-top: 14px;
+}
+
+.pet-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 486px);
+    justify-content: center;
+    gap: 6px 0;
+    margin-top: 12px;
+}
+
+.pet-card {
+    position: relative;
+    width: 486px;
+    height: 206px;
+}
+
+.card-bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.pet-avatar-box {
+    position: absolute;
+    left: 24px;
+    top: 28px;
+    width: 150px;
+    height: 150px;
+}
+
+.pet-avatar {
+    width: 150px;
+    height: 150px;
+    object-fit: contain;
+}
+
+.pet-star {
+    position: absolute;
+    left: -3px;
+    top: -30px;
+    width: 70px;
+    height: 70px;
+    object-fit: contain;
+}
+
+.pet-empty {
+    display: grid;
+    place-items: center;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.18);
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 22px;
+}
+
+.level-badge {
+    position: absolute;
+    left: 38px;
+    top: 97px;
+    width: 82px;
+    height: 48px;
+    transform: rotate(10deg);
+}
+
+.level-badge img {
+    width: 74px;
+    height: 39px;
+}
+
+.level-badge span {
+    position: absolute;
+    left: 0;
+    top: 9px;
+    width: 74px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 22px;
+    line-height: 1;
+}
+
+.pet-info {
+    position: absolute;
+    left: 186px;
+    top: 30px;
+    width: 282px;
+}
+
+.pet-name {
+    overflow: hidden;
+    color: #ffff00;
+    font-family: "rocom-skill", "rocom-home", "Microsoft YaHei", sans-serif;
+    font-size: 28px;
+    line-height: 1.1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.pet-name-text {
+    display: inline-block;
+    max-width: 190px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+}
+
+.egg-badge {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #d84315;
+    color: #ffffff;
+    font-size: 17px;
+    font-style: normal;
+    line-height: 1.2;
+    vertical-align: middle;
+}
+
+.pet-attrs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 10px;
+    margin-top: 12px;
+}
+
+.attr {
+    color: #ffffff;
+    font-size: 20px;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+.attr i {
+    margin-right: 6px;
+    color: #ffe9a8;
+    font-style: normal;
+}
+
+.pet-variant {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 3px 12px;
+    border-radius: 999px;
+    background: rgba(103, 58, 183, 0.85);
+    color: #ffffff;
+    font-size: 19px;
+    line-height: 1.2;
+}
+
+.pet-egg {
+    margin-top: 8px;
+    color: #ffe9a8;
+    font-size: 20px;
+    line-height: 1.2;
+}
+
+.empty-state {
+    margin: 40px 60px;
+    padding: 40px 24px;
+    border-radius: 20px;
+    background: rgba(42, 93, 16, 0.5);
+    color: #ffffff;
+    font-size: 26px;
+    text-align: center;
+}
+
+.pets-footer {
+    position: relative;
+    z-index: 1;
+    margin-top: 26px;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 18px;
+    text-align: center;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
+}

package/lib/render-templates/pet-detail-classic/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1200, initial-scale=1">
+  <title>精灵状态</title>
+  <link rel="stylesheet" href="{{_res_path}}render/pet-detail-classic/style.css">
+</head>
+<body>
+  <main class="pet-page">
+    <header class="page-header">
+      <img class="title-img" src="{{_res_path}}render/pet-detail-classic/texture2D/title.png" alt="">
+      <div class="page-title">精灵状态</div>
+      <div class="page-subtitle">UID{{uid}} · {{pets ? pets.length : 0}} 只</div>
+    </header>
+
+    {{if pets && pets.length > 0}}
+    <section class="pet-grid">
+      {{each pets pet}}
+      <article class="pet-card" style="--type-color: {{pet.typeColor}};">
+        <section class="pet-card-head">
+          <div class="pet-portrait">
+            <div class="pet-blob"></div>
+            <img class="pet-image" src="{{pet.iconUrl}}" alt="{{pet.name}}" data-fallback="{{pet.fallbackIconUrl}}" data-fallback2="{{pet.fallbackIconUrl2}}" onerror="if(this.dataset.fallback){this.src=this.dataset.fallback;this.dataset.fallback=''}else if(this.dataset.fallback2){this.src=this.dataset.fallback2;this.dataset.fallback2=''}else{this.onerror=null;this.src='{{_res_path}}render/pet-detail-classic/texture2D/img_head.png'}">
+            {{if pet.variantIcon}}
+            <img class="rare-star" src="{{_res_path}}{{pet.variantIcon}}" alt="">
+            {{/if}}
+          </div>
+
+          <div class="pet-summary">
+            <h2>{{pet.name}}</h2>
+            <div class="pet-meta">
+              <span>Lv.{{pet.level}}</span>
+              <span>{{pet.genderText}}</span>
+              {{if pet.natureText}}<span>{{pet.natureText}}</span>{{/if}}
+              {{if pet.voiceText}}<span>分贝 {{pet.voiceText}}{{if pet.voiceLabel}} {{pet.voiceLabel}}{{/if}}</span>{{/if}}
+            </div>
+            <div class="type-tags">
+              {{each pet.typeTags tag}}
+              <span class="type-tag" style="--tag-color: {{tag.color}};">
+                <img src="{{_res_path}}render/pet-detail-classic/texture2D/属性/{{tag.icon}}.png" alt="">
+                {{tag.name}}
+              </span>
+              {{/each}}
+              {{if pet.bloodTag}}
+              <span class="type-tag" style="--tag-color: {{pet.bloodTag.color}};">
+                <img src="{{_res_path}}render/pet-detail-classic/texture2D/血脉/{{pet.bloodTag.icon}}.png" alt="">
+                {{pet.bloodTag.name}}
+              </span>
+              {{/if}}
+            </div>
+          </div>
+        </section>
+
+        <div class="pet-info-column">
+          <section class="compact-section attr-section">
+            <div class="section-title">
+              <img src="{{_res_path}}render/pet-detail-classic/texture2D/a_title.png" alt="">
+              <span>精灵属性</span>
+            </div>
+            <div class="attr-table">
+              <div class="attr-head">属性</div>
+              <div class="attr-head">数值</div>
+              <div class="attr-head">个体</div>
+              <div class="attr-head">成长</div>
+              {{each pet.attributes attr}}
+              <div class="attr-name">{{attr.label}}</div>
+              <div class="attr-value">{{attr.value}}</div>
+              <div class="attr-value">{{attr.talent}}</div>
+              <div class="attr-value">{{attr.effort}}</div>
+              {{/each}}
+            </div>
+          </section>
+
+          <section class="compact-section feature-section">
+            <div class="section-title">
+              <img src="{{_res_path}}render/pet-detail-classic/texture2D/a_title.png" alt="">
+              <span>精灵特性</span>
+            </div>
+            {{if pet.feature}}
+            <div class="feature-row">
+              <img class="feature-icon" src="{{pet.featureIcon}}" alt="" data-fallback="{{pet.fallbackFeatureIcon}}" onerror="if(this.dataset.fallback){this.src=this.dataset.fallback;this.dataset.fallback=''}else{this.style.display='none'}">
+              <div class="feature-copy">
+                <div class="feature-name">{{pet.feature.name}}</div>
+                <div class="feature-desc">{{pet.feature.desc}}</div>
+              </div>
+            </div>
+            {{else}}
+            <div class="empty-text">暂无特性数据</div>
+            {{/if}}
+          </section>
+        </div>
+
+        <div class="pet-skill-column">
+        {{if pet.equipSkills && pet.equipSkills.length > 0}}
+        <section class="compact-section skill-section equip-section">
+          <div class="section-title">
+            <img src="{{_res_path}}render/pet-detail-classic/texture2D/a_title.png" alt="">
+            <span>装备技能</span>
+            <em>{{pet.equipSkills.length}}</em>
+          </div>
+          <div class="skill-grid equip-grid">
+            {{each pet.equipSkills skill}}
+            <div class="skill-chip" style="--skill-color: {{skill.typeColor}};">
+              <img class="skill-icon" src="{{skill.iconUrl}}" alt="{{skill.name}}" data-fallback="{{skill.fallbackIconUrl}}" data-placeholder="{{skill.placeholderIconUrl}}" onerror="if(this.dataset.fallback){this.src=this.dataset.fallback;this.dataset.fallback=''}else if(this.dataset.placeholder){this.src=this.dataset.placeholder;this.dataset.placeholder=''}else{this.onerror=null;this.src='{{_res_path}}render/pet-detail-classic/texture2D/icon.png'}">
+              <img class="skill-type" src="{{_res_path}}render/pet-detail-classic/texture2D/属性/{{skill.typeIcon}}.png" alt="{{skill.families}}" onerror="this.src='{{_res_path}}render/pet-detail-classic/texture2D/属性/无.png';this.onerror=null">
+              <div class="skill-name">{{skill.name}}</div>
+              <div class="skill-cost">{{skill.cost}}<img src="{{_res_path}}render/pet-detail-classic/texture2D/star.png" alt=""></div>
+            </div>
+            {{/each}}
+          </div>
+        </section>
+        {{/if}}
+
+        {{if pet.learnedSkills && pet.learnedSkills.length > 0}}
+        <section class="compact-section skill-section learned-section">
+          <div class="section-title">
+            <img src="{{_res_path}}render/pet-detail-classic/texture2D/a_title.png" alt="">
+            <span>已学技能</span>
+            <em>{{pet.learnedSkills.length}}</em>
+          </div>
+          <div class="skill-grid learned-grid">
+            {{each pet.learnedSkills skill}}
+            <div class="skill-chip learned-skill" style="--skill-color: {{skill.typeColor}};">
+              <img class="skill-icon" src="{{skill.iconUrl}}" alt="{{skill.name}}" data-fallback="{{skill.fallbackIconUrl}}" data-placeholder="{{skill.placeholderIconUrl}}" onerror="if(this.dataset.fallback){this.src=this.dataset.fallback;this.dataset.fallback=''}else if(this.dataset.placeholder){this.src=this.dataset.placeholder;this.dataset.placeholder=''}else{this.onerror=null;this.src='{{_res_path}}render/pet-detail-classic/texture2D/icon.png'}">
+              <img class="skill-type" src="{{_res_path}}render/pet-detail-classic/texture2D/属性/{{skill.typeIcon}}.png" alt="{{skill.families}}" onerror="this.src='{{_res_path}}render/pet-detail-classic/texture2D/属性/无.png';this.onerror=null">
+              <div class="skill-name">{{skill.name}}</div>
+              <div class="skill-cost">{{skill.cost}}<img src="{{_res_path}}render/pet-detail-classic/texture2D/star.png" alt=""></div>
+            </div>
+            {{/each}}
+          </div>
+        </section>
+        {{/if}}
+        </div>
+
+        {{if pet.errorText}}
+        <div class="panel-error">{{pet.errorText}}</div>
+        {{/if}}
+      </article>
+      {{/each}}
+    </section>
+    {{else}}
+    <section class="empty-panel">{{emptyText}}</section>
+    {{/if}}
+
+    <footer class="page-footer">
+      <img src="{{_res_path}}render/pet-detail-classic/texture2D/footer.png" alt="">
+    </footer>
+  </main>
+</body>
+</html>