npm - koishi-plugin-rocom - Versions diffs - 1.0.1 - Mend

koishi-plugin-rocom 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/lib/render-templates/package/index.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1320, initial-scale=1">
+  <title>{{pageTitle}}</title>
+  <link rel="stylesheet" href="{{_res_path}}render/package/style.css">
+</head>
+<body class="page-out-client">
+  <div class="package-cont page-section-main">
+    <div class="package-page">
+      <div class="spirits-page-header">
+        <div class="header-user-info">
+          <img
+            class="header-avatar"
+            src="{{userAvatar}}"
+            alt="Avatar"
+            onerror="this.onerror=null;this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'%23333\'%3E%3Ccircle cx=\'12\' cy=\'12\' r=\'12\'/%3E%3C/svg%3E'">
+          <div class="header-user-details">
+            <div class="header-user-name-row">
+              <span class="header-user-name">{{userName}}</span>
+              <span class="header-user-level">Lv. {{userLevel}}</span>
+            </div>
+            <span class="header-user-uid">ID:{{userUid}}</span>
+          </div>
+        </div>
+        <div class="header-center">
+          <div class="page-title">{{pageTitle}}</div>
+          <ul class="tab-nav">
+            {{each tabs tab}}
+            <li class="tab-item{{if tab.active}} cur{{/if}}">{{tab.text}}</li>
+            {{/each}}
+          </ul>
+        </div>
+        <div class="header-right">
+          <span class="view-status">当前查看：{{currentTab}}</span>
+          <span class="search-text">总计持有：{{totalCount}}</span>
+          <span class="search-text">当前账号：{{accountLabel}}</span>
+        </div>
+      </div>
+      <main class="spirits-content">
+        <div class="spirits-grid{{if !pets || pets.length === 0}} is-empty{{/if}}">
+          {{if pets && pets.length > 0}}
+          {{each pets pet}}
+          <div class="spirit-card">
+            <div class="spirit-card-header">
+              <div class="element-icons">
+                {{if pet.elementIcons && pet.elementIcons.length > 0}}
+                {{each pet.elementIcons icon}}
+                <div class="element-icon">
+                  <img src="{{icon.src}}" alt="{{icon.name}}" onerror="this.style.display='none'">
+                </div>
+                {{/each}}
+                {{else}}
+                <div class="element-icon element-icon-empty">?</div>
+                {{/if}}
+              </div>
+              <div class="spirit-level"><span>LV.{{pet.level}}</span></div>
+            </div>
+            <div class="spirit-image">
+              {{if pet.badgeImage}}
+              <img class="spirit-subset-badge" src="{{pet.badgeImage}}" alt="{{currentTab}}" onerror="this.style.display='none'">
+              {{/if}}
+              <div class="helper-image">
+                <img
+                  alt="{{pet.name}}"
+                  class="helper-image-pic"
+                  src="{{pet.pet_img_url || pet.imageUrl || fallbackPetImage}}"
+                  loading="eager"
+                  onerror="this.onerror=null;this.src='{{fallbackPetImage}}'">
+              </div>
+            </div>
+            <div class="stats-spirit-name">
+              <span>{{pet.name}}</span>
+              {{if pet.custom_name}}
+              <span class="custom-name">{{pet.custom_name}}</span>
+              {{/if}}
+            </div>
+          </div>
+          {{/each}}
+          {{each emptySlots slot}}
+          <div class="spirit-card is-empty">
+            <div class="spirit-card-header">
+              <div class="element-icons"></div>
+              <div class="spirit-level"><span>--</span></div>
+            </div>
+            <div class="spirit-image spirit-image-empty">
+              <div class="spirit-empty-copy">空位</div>
+            </div>
+            <div class="stats-spirit-name"><span>待补位</span></div>
+          </div>
+          {{/each}}
+          {{else}}
+          <div class="empty-card">
+            <div class="empty-card-title">这一页暂时没有精灵</div>
+            <div class="empty-card-desc">试试切换分类或页码重新查询</div>
+          </div>
+          {{/if}}
+        </div>
+      </main>
+      <div class="pagination-footer">
+        <span class="pagination-text">第 {{currentPage}} 页，共 {{totalPages}} 页，每页 {{pageSize}} 只精灵</span>
+        <span class="pagination-hint">{{commandHint}}</span>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/lib/render-templates/package/style.css ADDED Viewed

@@ -0,0 +1,352 @@
+@font-face {
+    font-family: 'mianfeiziti';
+    src: url('../../ttf/dundun.xHd_Ee5-.woff2') format('woff2'),
+         url('../../ttf/dundun.BCbg_KoL.ttf') format('truetype');
+    font-display: swap;
+}
+:root {
+    --helper-font-family-mianfeiziti: 'mianfeiziti', sans-serif;
+}
+html, body {
+    margin: 0;
+    padding: 30px;
+    background: url("../../img/bg.C8CUoi7I.jpg") no-repeat center top;
+    background-size: cover;
+    font-size: 100px; /* 1rem = 100px */
+}
+body {
+    font-size: 14px;
+    min-height: 100vh;
+}
+.package-cont {
+    width: auto;
+    min-width: 9rem;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0.2rem;
+    padding: 0.15rem 0.2rem 0.45rem;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
+.package-page {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+.spirits-page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0.05rem;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+}
+.header-user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem; /* Need slightly more gap for this layout */
+    flex: 1;
+}
+.header-avatar {
+    width: 0.6rem; /* A bit larger to match the personal card proportion */
+    height: 0.6rem;
+    object-fit: contain;
+    /* Removed the border-radius and solid border as the original avatar has its own background/shape */
+}
+.header-user-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.04rem;
+}
+.header-user-name-row {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+}
+.header-user-name {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #f4eee1; /* Light text since background is dark */
+    font-size: 0.22rem;
+    font-weight: bold;
+}
+.header-user-level {
+    font-family: var(--helper-font-family-mianfeiziti);
+    background-color: #ffc966; /* Pill color from screenshot */
+    color: #272624; /* Dark grey text inside pill */
+    font-size: 0.14rem;
+    font-weight: bold;
+    padding: 0.02rem 0.08rem;
+    border-radius: 0.1rem;
+    line-height: 1.2;
+}
+.header-user-uid {
+    font-family: Arial, sans-serif;
+    color: #a8a69f;
+    font-size: 0.14rem;
+}
+.header-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.04rem;
+}
+.page-title {
+    color: #f4eee1;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.24rem;
+    font-weight: normal;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    line-height: 1;
+}
+.tab-nav {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0.15rem;
+}
+.tab-item {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #a8a69f;
+    font-size: 0.16rem;
+    cursor: pointer;
+    padding: 0.02rem 0;
+}
+.tab-item.cur {
+    color: #f4eee1;
+    border-bottom: 2px solid #ffc65f;
+}
+.header-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 0.02rem;
+    flex: 1;
+}
+.view-status {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #f1b958;
+    font-size: 0.16rem;
+}
+.search-text {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #f4eee1;
+    font-size: 0.14rem;
+}
+.spirits-content {
+    margin-top: 0.05rem;
+}
+.spirits-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1.9rem);
+    grid-template-rows: auto;
+    gap: 0.2rem 0.25rem;
+    justify-content: center;
+}
+/* Card Styling */
+.spirit-card {
+    width: 1.9rem;
+    height: 2.6rem;
+    background: url("../../img/精灵pg.png") no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: transform 0.2s;
+}
+.spirit-card:hover {
+    transform: translateY(-2px);
+}
+.spirit-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0.15rem 0.2rem 0; /* Scaled inside bounds */
+    z-index: 2;
+}
+.element-icons {
+    display: flex;
+    gap: 0.05rem;
+}
+.element-icon img {
+    width: 0.28rem;
+    height: 0.28rem;
+    object-fit: contain;
+}
+.element-icon-empty {
+    width: 0.28rem;
+    height: 0.28rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.14);
+    color: #f4eee1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.14rem;
+}
+.spirit-level {
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.22rem;
+    color: #555350; /* Dark grey for level text based on image */
+}
+.spirit-image {
+    flex: 1;
+    display: flex;
+    align-items: flex-start; /* move up */
+    justify-content: center;
+    position: relative;
+    padding-top: 0.1rem; /* slight offset to position it perfectly */
+}
+.helper-image {
+    width: 1.7rem;
+    height: 1.45rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.helper-image-pic {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 0.06rem 0.12rem rgba(0, 0, 0, 0.18));
+}
+.stats-spirit-name {
+    width: 100%;
+    height: 0.55rem; /* Increased height to fit two lines */
+    display: flex;
+    flex-direction: column; /* Vertical stack */
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: -0.01rem; /* 下移 5px（1rem=100px） */
+}
+.stats-spirit-name span {
+    color: #272624;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.2rem; /* Slightly smaller to fit */
+    line-height: 1.1;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 0.06rem;
+}
+.stats-spirit-name .custom-name {
+    font-size: 0.14rem;
+    color: #555; /* Slightly darker/neutral for custom name */
+    font-weight: normal;
+    margin-top: 0.02rem;
+}
+.spirit-subset-badge {
+    position: absolute;
+    top: 0.02rem;
+    right: 0.12rem;
+    width: 0.8rem;
+    z-index: 2;
+}
+.spirit-card.is-empty {
+    opacity: 0.42;
+}
+.spirit-image-empty {
+    align-items: center;
+    padding-top: 0;
+}
+.spirit-empty-copy {
+    color: #7d7568;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.2rem;
+}
+.spirits-grid.is-empty {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+}
+.empty-card {
+    min-height: 5.4rem;
+    border-radius: 0.24rem;
+    border: 1px dashed rgba(255, 255, 255, 0.18);
+    background: rgba(0, 0, 0, 0.14);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.12rem;
+}
+.empty-card-title {
+    color: #f4eee1;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.24rem;
+}
+.empty-card-desc {
+    color: #b9b1a2;
+    font-family: var(--helper-font-family-mianfeiziti);
+    font-size: 0.15rem;
+}
+.pagination-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    padding-top: 0.15rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    gap: 0.05rem;
+}
+.pagination-text {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #f4eee1;
+    font-size: 0.18rem;
+}
+.pagination-hint {
+    font-family: var(--helper-font-family-mianfeiziti);
+    color: #a8a69f;
+    font-size: 0.14rem;
+}