feat: 自定义面板图功能

model/avatar.js

@@ -1,8 +1,11 @@
 import { element } from '../lib/convert.js';
 import { getRoleImage, getSquareAvatar } from '../lib/download.js';
+import { imageResourcesPath } from '../lib/path.js';
 import { Equip, Weapon } from './equip.js';
 import { Property } from './property.js';
 import { Skill } from './skill.js';
+import fs from 'fs';
+import path from 'path';
 
 /**
  * @class
@@ -292,7 +295,24 @@ export class ZZZAvatarInfo {
   }
 
   async get_detail_assets() {
-    const role_icon = await getRoleImage(this.id);
+    const custom_panel_images = path.join(
+      imageResourcesPath,
+      `panel/${this.id}`
+    );
+    let role_icon = '';
+    if (fs.existsSync(custom_panel_images)) {
+      const panel_images = fs
+        .readdirSync(custom_panel_images)
+        .map(file => path.join(custom_panel_images, file));
+      if (panel_images.length > 0) {
+        role_icon =
+          panel_images[Math.floor(Math.random() * panel_images.length)];
+      }
+    }
+    if (!role_icon) {
+      role_icon = await getRoleImage(this.id);
+    }
+
     this.role_icon = role_icon;
     await this?.weapon?.get_assets?.();
     for (const equip of this.equip) {

resources/panel/card.css

@@ -7,17 +7,19 @@
   font-size: 0.6em;
   text-align: center;
   position: absolute;
-  border-image-source: url("./images/GroceryActivityBtnBg.png");
+  border-image-source: url("./images/CurseBG08.png");
-  border-image-slice: 30 90 30 90 fill;
+  border-image-slice: 30 60 30 60 fill;
-  border-image-width: 0.4em 1.2em 0.4em 1.2em;
+  border-image-width: 0.5em 1em 0.5em 1em;
   border-image-outset: 0em 0em 0em 0em;
   border-image-repeat: stretch stretch;
   padding: 0.5em 1.2em;
   font-size: 1em;
-  top: 0.1em;
+  top: 0.5em;
+  left: 0.5em;
   color: rgb(255, 255, 255);
   stroke: 0.05em rgba(0, 0, 0, 0.6);
   -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6);
+  z-index: 1;
 }
 .card .star {
   width: 5.5em;

resources/panel/card.scss

@@ -6,17 +6,19 @@
     font-size: 0.6em;
     text-align: center;
     position: absolute;
-    border-image-source: url('./images/GroceryActivityBtnBg.png');
+    border-image-source: url('./images/CurseBG08.png');
-    border-image-slice: 30 90 30 90 fill;
+    border-image-slice: 30 60 30 60 fill;
-    border-image-width: 0.4em 1.2em 0.4em 1.2em;
+    border-image-width: 0.5em 1em 0.5em 1em;
     border-image-outset: 0em 0em 0em 0em;
     border-image-repeat: stretch stretch;
     padding: 0.5em 1.2em;
     font-size: 1em;
-    top: 0.1em;
+    top: 0.5em;
+    left: 0.5em;
     color: rgb(255, 255, 255);
     stroke: 0.05em rgba(0, 0, 0, 0.6);
     -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6);
+    z-index: 1;
   }
   .star {
     width: 5.5em;