koishi-plugin-rocom 1.0.1

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

@@ -0,0 +1,537 @@
+@font-face {
+    font-family: "rocom-home";
+    src: url("../../ttf/HYWenHei-85W-1.ttf") format("truetype");
+    font-display: swap;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 28px;
+    display: inline-block;
+    background: #f4ecdc;
+    color: #33271a;
+    font-family: "rocom-home", "Microsoft YaHei", "PingFang SC", sans-serif;
+}
+
+.home-page {
+    position: relative;
+    width: 1280px;
+    min-height: 860px;
+    overflow: hidden;
+    border-radius: 28px;
+    background:
+        linear-gradient(rgba(38, 29, 18, 0.10), rgba(38, 29, 18, 0.10)),
+        url("../../img/ercode-bg.D1ccSQKH.png") center / cover no-repeat;
+    box-shadow: 0 26px 58px rgba(76, 55, 32, 0.18);
+}
+
+.page-bg {
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(circle at 10% 12%, rgba(255, 231, 177, 0.52), transparent 28%),
+        radial-gradient(circle at 96% 18%, rgba(255, 188, 85, 0.24), transparent 30%);
+    pointer-events: none;
+}
+
+.home-header,
+.profile-strip,
+.summary-strip,
+.content-grid {
+    position: relative;
+    z-index: 1;
+}
+
+.home-header {
+    position: relative;
+    min-height: 112px;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background: linear-gradient(90deg, #ffc95f, #f5b64c);
+}
+
+.home-title {
+    position: relative;
+    z-index: 2;
+    color: #10100e;
+    font-size: 46px;
+    line-height: 1;
+    letter-spacing: 4px;
+    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.22);
+}
+
+.home-title-ghost {
+    position: absolute;
+    inset: -18px 0 auto;
+    z-index: 1;
+    text-align: center;
+    color: rgba(255, 228, 152, 0.24);
+    font-size: 120px;
+    line-height: 1.1;
+    letter-spacing: 8px;
+    white-space: nowrap;
+}
+
+.update-badge {
+    position: absolute;
+    top: 18px;
+    right: 28px;
+    z-index: 3;
+    padding: 8px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.52);
+    color: #79521b;
+    font-size: 15px;
+    line-height: 1;
+    box-shadow: inset 0 -2px 0 rgba(141, 94, 30, 0.08);
+}
+
+.profile-strip {
+    display: flex;
+    align-items: center;
+    gap: 22px;
+    margin: 28px 44px 0;
+    padding: 24px 30px;
+    border-radius: 24px;
+    background: rgba(250, 247, 238, 0.78);
+    border: 1px solid rgba(143, 113, 73, 0.16);
+    box-shadow: 0 12px 26px rgba(88, 64, 38, 0.08);
+}
+
+.home-icon {
+    flex: none;
+    width: 86px;
+    height: 86px;
+    object-fit: contain;
+    filter: drop-shadow(0 8px 10px rgba(88, 67, 38, 0.16));
+}
+
+.profile-main {
+    min-width: 0;
+}
+
+.home-name-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px;
+}
+
+.home-owner {
+    max-width: 620px;
+    overflow: hidden;
+    color: #171411;
+    font-size: 38px;
+    line-height: 1.12;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.uid-pill {
+    padding: 8px 16px;
+    border-radius: 999px;
+    background: #ffc65f;
+    color: #3c2a12;
+    font-size: 20px;
+    line-height: 1;
+    box-shadow: inset 0 -2px 0 rgba(141, 94, 30, 0.12);
+}
+
+.profile-subtitle {
+    margin-top: 8px;
+    color: #7f6e57;
+    font-size: 20px;
+}
+
+.summary-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 16px;
+    margin: 20px 44px 0;
+}
+
+.summary-item,
+.panel {
+    border: 1px solid rgba(143, 113, 73, 0.14);
+    background: rgba(250, 247, 238, 0.82);
+    box-shadow: 0 12px 26px rgba(88, 64, 38, 0.08);
+}
+
+.summary-item {
+    min-height: 84px;
+    padding: 15px 18px;
+    border-radius: 999px;
+}
+
+.summary-label {
+    color: #7e6a50;
+    font-size: 17px;
+}
+
+.summary-value {
+    margin-top: 6px;
+    color: #33271a;
+    font-size: 28px;
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
+    gap: 22px;
+    align-items: start;
+    margin: 22px 44px 0;
+}
+
+.left-column {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 14px;
+    align-items: start;
+}
+
+.panel {
+    border-radius: 24px;
+    padding: 22px;
+}
+
+.panel-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+    margin-bottom: 16px;
+}
+
+.panel-label {
+    color: #907b5e;
+    font-size: 14px;
+}
+
+h2 {
+    margin: 3px 0 0;
+    color: #171411;
+    font-size: 30px;
+    line-height: 1.1;
+}
+
+.garden-title-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin-top: 3px;
+}
+
+.garden-title-row h2 {
+    margin: 0;
+}
+
+.guard-inline {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 7px;
+    min-height: 34px;
+    padding: 5px 8px 5px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid rgba(143, 113, 73, 0.12);
+}
+
+.guard-inline-label {
+    color: #8c7354;
+    font-size: 15px;
+}
+
+.guard-inline-name {
+    max-width: 160px;
+    overflow: hidden;
+    color: #33271a;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.guard-inline-empty {
+    color: #9a876d;
+    font-size: 15px;
+}
+
+.panel-count {
+    min-width: 46px;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: #ffc65f;
+    color: #4a2d0b;
+    text-align: center;
+    font-size: 19px;
+    box-shadow: inset 0 -2px 0 rgba(141, 94, 30, 0.14);
+}
+
+.garden-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.plot-card,
+.pet-card {
+    border-radius: 19px;
+    border: 1px solid rgba(143, 113, 73, 0.12);
+    background: rgba(255, 255, 255, 0.62);
+}
+
+.plot-card {
+    min-height: 138px;
+    padding: 13px 14px;
+}
+
+.plot-index {
+    display: inline-flex;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(255, 198, 95, 0.28);
+    color: #9a5f0f;
+    font-size: 15px;
+}
+
+.plot-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 10px;
+}
+
+.plant-icon,
+.empty-icon {
+    flex: none;
+    width: 62px;
+    height: 62px;
+    object-fit: contain;
+}
+
+.empty-icon {
+    display: grid;
+    place-items: center;
+    border-radius: 16px;
+    background: rgba(143, 113, 73, 0.10);
+    color: rgba(93, 75, 50, 0.52);
+    font-size: 17px;
+}
+
+.plot-info {
+    min-width: 0;
+}
+
+.plant-name,
+.pet-name {
+    overflow: hidden;
+    color: #33271a;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.plant-name {
+    font-size: 21px;
+}
+
+.plant-state {
+    margin-top: 3px;
+    font-size: 16px;
+    color: #639055;
+}
+
+.state-warning {
+    color: #c47a24;
+}
+
+.state-ready {
+    color: #3e9c60;
+}
+
+.time-text {
+    margin-top: 3px;
+    color: #806f58;
+    font-size: 15px;
+}
+
+.plot-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 6px;
+}
+
+.plot-tags span,
+.pet-meta span {
+    padding: 3px 8px;
+    border-radius: 999px;
+    background: rgba(255, 198, 95, 0.22);
+    color: #795f3f;
+    font-size: 13px;
+}
+
+.progress-track {
+    height: 9px;
+    margin-top: 10px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(143, 113, 73, 0.12);
+}
+
+.progress-fill {
+    height: 100%;
+    min-width: 4%;
+    max-width: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #83c665, #ffc65f);
+}
+
+.pet-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.indoor-panel {
+    min-height: 100%;
+}
+
+.pet-grid {
+    grid-template-columns: 1fr;
+}
+
+.pet-card {
+    display: flex;
+    align-items: center;
+    min-height: 122px;
+    gap: 14px;
+    padding: 13px 14px;
+}
+
+.pet-card.status-ready {
+    border-color: rgba(65, 162, 83, 0.30);
+    background:
+        linear-gradient(90deg, rgba(101, 196, 101, 0.20), rgba(255, 255, 255, 0.70)),
+        rgba(255, 255, 255, 0.62);
+}
+
+.pet-card.status-idle {
+    border-color: rgba(177, 112, 42, 0.24);
+    background:
+        linear-gradient(90deg, rgba(255, 180, 78, 0.20), rgba(255, 255, 255, 0.68)),
+        rgba(255, 255, 255, 0.62);
+}
+
+.pet-card.status-progress {
+    border-color: rgba(87, 157, 138, 0.24);
+    background:
+        linear-gradient(90deg, rgba(110, 191, 154, 0.18), rgba(255, 245, 221, 0.72)),
+        rgba(255, 255, 255, 0.62);
+}
+
+.pet-card.status-guard {
+    border-color: rgba(76, 136, 181, 0.26);
+    background:
+        linear-gradient(90deg, rgba(105, 174, 210, 0.18), rgba(255, 255, 255, 0.70)),
+        rgba(255, 255, 255, 0.62);
+}
+
+.pet-avatar-wrap {
+    position: relative;
+    flex: none;
+    width: 82px;
+    height: 82px;
+}
+
+.pet-avatar {
+    width: 82px;
+    height: 82px;
+    object-fit: contain;
+    border-radius: 20px;
+    background: #fff7e6;
+    border: 2px solid rgba(255, 198, 95, 0.32);
+}
+
+.pet-badge {
+    position: absolute;
+    left: -4px;
+    top: -5px;
+    min-width: 32px;
+    padding: 3px 8px;
+    border-radius: 999px;
+    background: #f1b84d;
+    color: #ffffff;
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0 3px 8px rgba(124, 86, 27, 0.18);
+}
+
+.pet-info {
+    min-width: 0;
+    flex: 1;
+}
+
+.pet-name {
+    font-size: 24px;
+}
+
+.pet-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px;
+    margin-top: 8px;
+}
+
+.status-pill {
+    padding: 3px 8px;
+    border-radius: 999px;
+    background: rgba(255, 198, 95, 0.22);
+    color: #fff;
+    font-size: 15px;
+    box-shadow: 0 3px 8px rgba(111, 80, 42, 0.14);
+}
+
+.status-ready {
+    background: linear-gradient(135deg, #39a75b, #82cf55);
+}
+
+.status-progress {
+    background: linear-gradient(135deg, #55a876, #e0b857);
+}
+
+.status-idle {
+    background: linear-gradient(135deg, #d7772d, #f4b24e);
+}
+
+.status-guard {
+    background: linear-gradient(135deg, #387fae, #72b5d5);
+}
+
+.pet-note {
+    margin-top: 8px;
+    color: #806f58;
+    font-size: 16px;
+    line-height: 1.32;
+}
+
+.empty-state {
+    min-height: 108px;
+    display: grid;
+    place-items: center;
+    padding: 16px;
+    border-radius: 18px;
+    border: 1px dashed rgba(143, 113, 73, 0.28);
+    background: rgba(255, 255, 255, 0.44);
+    color: #8b7a62;
+    text-align: center;
+    font-size: 19px;
+    line-height: 1.35;
+}

package/lib/render-templates/ingame-shop/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1280, initial-scale=1">
+  <link rel="stylesheet" href="{{_res_path}}render/ingame-shop/style.css">
+</head>
+<body>
+  <div class="ingame-shop-page shop-page">
+    <div class="page-header">
+      <div class="page-title">{{title}}</div>
+      <div class="page-subtitle">{{subtitle}}</div>
+    </div>
+
+    <div class="hero-card">
+      <div class="hero-title">{{heroTitle}}</div>
+      <div class="hero-value">{{heroValue}}</div>
+      <div class="hero-subvalue">{{heroSubvalue}}</div>
+    </div>
+
+    <div class="summary-grid">
+      {{each summaryCards item}}
+      <div class="summary-card">
+        <div class="summary-label">{{item.label}}</div>
+        <div class="summary-value">{{item.value}}</div>
+      </div>
+      {{/each}}
+    </div>
+
+    {{if sections && sections.length}}
+    {{each sections section}}
+    <div class="panel-card">
+      <div class="section-title">{{section.title}}</div>
+      <div class="shop-grid">
+        {{each section.cards card}}
+        <div class="shop-card">
+          <div class="shop-top">
+            <div class="shop-icon-wrap">
+              {{if card.image}}
+              <img src="{{card.image}}" class="shop-icon" alt="{{card.title}}">
+              {{else}}
+              <div class="shop-icon shop-icon-fallback">?</div>
+              {{/if}}
+            </div>
+            <div class="shop-main">
+              <div class="shop-name">{{card.title}}</div>
+            </div>
+          </div>
+          {{if card.meta && card.meta.length}}
+          <div class="meta-list">
+            {{each card.meta meta}}
+            <div class="meta-row">
+              <span class="meta-label">{{meta.label}}</span>
+              <span class="meta-value">{{meta.value}}</span>
+            </div>
+            {{/each}}
+          </div>
+          {{/if}}
+        </div>
+        {{/each}}
+      </div>
+    </div>
+    {{/each}}
+    {{/if}}
+
+    {{if detailItems && detailItems.length}}
+    <div class="panel-card">
+      <div class="section-title">补充信息</div>
+      <div class="detail-card">
+        {{each detailItems item}}
+        <div class="detail-row">
+          <div class="detail-label">{{item.label}}</div>
+          <div class="detail-value">{{item.value}}</div>
+        </div>
+        {{/each}}
+      </div>
+    </div>
+    {{/if}}
+
+    {{if commandHint}}
+    <div class="command-hint">{{commandHint}}</div>
+    {{/if}}
+
+    <div class="footer">{{copyright}}</div>
+  </div>
+</body>
+</html>