* #喵喵设置 支持设置 面板查询 的功能开关

* `#喵喵版本` 使用图片展示更新信息
* 页面版权信息展示Yunzai及喵喵版本号
* `#角色面板` 伤害计算增加 迪奥娜ⁿᵉʷ、安柏ⁿᵉʷ、凯亚ⁿᵉʷ

CHANGELOG.md

@@ -1,16 +1,20 @@
-# 1.5.6
+# 1.6.0
 
+* `#喵喵设置` 支持设置 面板查询 的功能开关
+* `#喵喵版本` 使用图片展示更新信息
 * `#喵喵日历` 升级
     * 增加 `#喵喵日历列表`命令，以列表形式展示活动信息
     * 增加从活动详情信息中解析活动日期的逻辑，使一些活动日期更加准确
-* `#深渊出场率`、`#角色持有率` 等功能样式及字体微调
 * 增加鹿野院平藏的角色信息，可通过`#平藏天赋`、`#平藏命座`查看信息
-* `#角色面板` 伤害计算增加双手剑计算逻辑，增加物伤计算逻辑
+* 其他升级调整
+    * `#深渊出场率`、`#角色持有率` 等页面功能及样式微调
+    * `#角色面板` 伤害计算增加双手剑计算逻辑，增加物伤计算逻辑
+    * 页面版权信息展示Yunzai及喵喵版本号
 * `#角色面板` 伤害计算增加部分角色，目前支持
     * 长柄武器：雷神、胡桃、魈、钟离、香菱
     * 法器：神子、心海、可莉ⁿᵉʷ、凝光ⁿᵉʷ、芭芭拉ⁿᵉʷ
-    * 弓：甘雨、宵宫、公子，九条ⁿᵉʷ
+    * 弓：甘雨、宵宫、公子，九条ⁿᵉʷ，迪奥娜ⁿᵉʷ、安柏ⁿᵉʷ
-    * 单手剑：绫人、绫华、刻晴、阿贝多、行秋、班尼特、七七ⁿᵉʷ
+    * 单手剑：绫人、绫华、刻晴、阿贝多、行秋、班尼特、七七ⁿᵉʷ、凯亚ⁿᵉʷ
     * 双手剑：一斗ⁿᵉʷ、优菈ⁿᵉʷ、迪卢克ⁿᵉʷ、诺艾尔ⁿᵉʷ、重云ⁿᵉʷ
 
 # 1.5.0

apps/admin.js

@@ -4,16 +4,17 @@ import lodash from "lodash";
 import { createRequire } from "module";
 import { exec } from "child_process";
 import { Cfg } from "../components/index.js";
+import Common from "../components/Common.js";
 
 
 const require = createRequire(import.meta.url);
 
 let cfgMap = {
   "角色": "char.char",
+  "面板": "char.profile",
   "老婆": "char.wife",
   "查他人": "char.queryOther",
-  "天赋": "wiki.talent",
+  "图鉴": "wiki.wiki",
-  "命座": "wiki.cons",
   "图片": "wiki.pic",
   "深渊": "wiki.abyss",
   "渲染": "sys.scale",
@@ -81,10 +82,10 @@ export async function sysCfg(e, { render }) {
 
   let cfg = {
     chars: getStatus("char.char"),
+    profile: getStatus("char.profile"),
     wife: getStatus("char.wife"),
     other: getStatus("char.queryOther"),
-    talent: getStatus("wiki.talent"),
+    wiki: getStatus("wiki.wiki"),
-    cons: getStatus("wiki.cons"),
     pic: getStatus("wiki.pic"),
     abyss: getStatus("wiki.abyss"),
     imgPlus: fs.existsSync(plusPath),
@@ -92,14 +93,10 @@ export async function sysCfg(e, { render }) {
     scale: Cfg.get("sys.scale", 100)
   }
 
-  let base64 = await render("admin", "index", {
+  //渲染图像
+  return await Common.render("admin/index", {
     ...cfg,
-    cfgScale: Cfg.scale(1.4)
+  }, { e, render, scale: 1.4 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 }
 
 const getStatus = function (rote, def = true) {
@@ -167,17 +164,17 @@ export async function updateMiaoPlugin(e) {
   exec(command, { cwd: `${_path}/plugins/miao-plugin/` }, function (error, stdout, stderr) {
     //console.log(stdout);
     if (/Already up to date/.test(stdout)) {
-      e.reply("目前已经是最新版了~");
+      e.reply("目前已经是最新版喵喵了~");
       return true;
     }
     if (error) {
-      e.reply("更新失败！\nError code: " + error.code + "\n" + error.stack + "\n 请稍后重试。");
+      e.reply("喵喵更新失败！\nError code: " + error.code + "\n" + error.stack + "\n 请稍后重试。");
       return true;
     }
-    e.reply("更新成功，尝试重新启动Yunzai以应用更新...");
+    e.reply("喵喵更新成功，尝试重新启动Yunzai以应用更新...");
     timer && clearTimeout(timer);
     redis.set("miao:restart-msg", JSON.stringify({
-      msg: "重启成功，新版喵喵Plugin已经生效",
+      msg: "重启成功，新版喵喵已经生效",
       qq: e.user_id
     }), { EX: 30 });
     timer = setTimeout(function () {

apps/character.js

@@ -7,6 +7,7 @@ import Format from "../components/Format.js"
 import Reliquaries from "../components/models/Reliquaries.js";
 import Calc from "../components/Calc.js";
 import fs from "fs";
+import Common from "../components/Common.js";
 
 
 //角色昵称
@@ -58,9 +59,6 @@ export async function character(e, { render, User }) {
   if (!msg) {
     return;
   }
-  if (Cfg.isDisable(e, "char.char")) {
-    return;
-  }
 
   let mode = 'card';
   let name = msg.replace(/#|老婆|老公|[1|2|5][0-9]{8}/g, "").trim();
@@ -80,6 +78,12 @@ export async function character(e, { render, User }) {
     name = name.replace(/详情|详细|面板|面版|更新/g, "").trim();
   }
 
+  if (
+    (mode === "card" && Common.isDisable(e, "char.char")) ||
+    (mode !== "card" && Common.isDisable(e, "char.profile"))) {
+    return;
+  }
+
   let char = Character.get(name);
 
   if (!char) {
@@ -353,23 +357,19 @@ async function renderCard(e, avatar, render, renderType = "card") {
     e.reply(segment.image(process.cwd() + "/plugins/miao-plugin/resources/" + bg.img));
   } else {
     //渲染图像
-    let base64 = await render("character", "card", {
+    return await Common.render("character/card", {
       save_id: uid,
       uid: uid,
       talent,
       crownNum,
       talentMap: { a: "普攻", e: "战技", q: "爆发" },
-      //bg: getCharacterImg(avatar.name),
       bg,
       ...getCharacterData(avatar),
       ds: char.getData("name,id,title,desc"),
-      cfgScale: Cfg.scale(1.6)
+    }, { e, render, scale: 1.6 });
-    });
-    if (base64) {
-      e.reply(segment.image(`base64://${base64}`));
-    }
   }
 
+
   return true;
 }
 
@@ -698,8 +698,8 @@ export async function renderProfile(e, char, render, mode = "profile", params =
     basic.dmg = Format.comma(basic.dmg);
     basic.avg = Format.comma(basic.avg);
   }
-
+  //渲染图像
-  let base64 = await render("character", "detail", {
+  return await Common.render("character/detail", {
     save_id: uid,
     uid: uid,
     data: profile,
@@ -723,13 +723,9 @@ export async function renderProfile(e, char, render, mode = "profile", params =
     usefulTitles,
     usefulMark,
     talentMap: { a: "普攻", e: "战技", q: "爆发" },
+    bodyClass: `char-${char.name}`,
     mode,
-    cfgScale: Cfg.scale(1.8)
+  }, { e, render, scale: 1.6 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 }
 
 /* #敌人等级 */
@@ -811,17 +807,12 @@ export async function getArtis(e, { render }) {
   artis = artis.reverse();
   artis = artis.slice(0, 20);
 
-
+  //渲染图像
-  let base64 = await render("character", "artis", {
+  return await Common.render("character/artis", {
     save_id: uid,
     uid: uid,
     artis,
-    cfgScale: Cfg.scale(1.4)
+  }, { e, render, scale: 1.4 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 }
 
 export async function getProfileAll(e) {

apps/help.js

@@ -2,7 +2,7 @@ import { Cfg } from "../components/index.js";
 import { segment } from "oicq";
 import lodash from "lodash";
 import { currentVersion, changelogs } from "../components/Changelog.js";
-import common from "../../../lib/common.js";
+import Common from "../components/Common.js";
 
 const _path = process.cwd();
 const helpFilePath = `${_path}/plugins/miao-plugin/resources/help/help-list.js`;
@@ -39,18 +39,15 @@ export async function help(e, { render }) {
     helpGroup.push(group);
   });
 
-  let base64 = await render("help", "index", {
+  return await Common.render("help/index", {
     helpCfg: helpGroup,
-    cfgScale: Cfg.scale(1.2)
+    element: 'default'
-  });
+  }, { e, render, scale: 1.2 })
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 }
 
-export async function versionInfo(e) {
+export async function versionInfo(e, { render }) {
-  let msgs = [`当前喵喵版本: ${currentVersion}`, ...changelogs];
+  return await Common.render("help/version-info", {
-  e.reply(msgs.join("\n"));
+    currentVersion,
-  return true;
+    changelogs,
+  }, { e, render, scale: 1.2 })
 }

apps/stat.js

@@ -7,6 +7,7 @@ import { Cfg } from "../components/index.js";
 import lodash from "lodash";
 import { segment } from "oicq";
 import fs from "fs";
+import Common from "../components/Common.js";
 
 export async function consStat(e, { render }) {
   if (Cfg.isDisable(e, "wiki.abyss")) {
@@ -68,8 +69,8 @@ export async function consStat(e, { render }) {
   } else {
     ret = lodash.sortBy(ret, ['hold']);
   }
-
+  //渲染图像
-  let base64 = await render("stat", "character", {
+  return await Common.render("stat/character", {
     chars: ret,
     abbr: Character.getAbbr(),
     mode: mode,
@@ -78,12 +79,7 @@ export async function consStat(e, { render }) {
     pct: function (num) {
       return (num * 100).toFixed(2);
     },
-    cfgScale: Cfg.scale(1.5)
+  }, { e, render, scale: 1.5 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 }
 
 export async function abyssPct(e, { render }) {
@@ -144,8 +140,7 @@ export async function abyssPct(e, { render }) {
     });
   })
 
-
+  return await Common.render("stat/abyss-pct", {
-  let base64 = await render("stat", "abyss-pct", {
     abyss: ret,
     floorName,
     chooseFloor,
@@ -153,12 +148,7 @@ export async function abyssPct(e, { render }) {
     pct: function (num) {
       return (num * 100).toFixed(2);
     },
-    cfgScale: Cfg.scale(1.5)
+  }, { e, render, scale: 1.5 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true;
 
 }
 
@@ -381,15 +371,8 @@ export async function abyssTeam(e, { render }) {
     }
   })
 
-
+  return await Common.render("stat/abyss-team", {
-  let base64 = await render("stat", "abyss-team", {
     teams: ret,
     avatars: avatarMap,
-    cfgScale: Cfg.scale(1.5)
+  }, { e, render, scale: 1.5 });
-  });
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-
-  return true;
 }

apps/wiki.js

@@ -1,12 +1,9 @@
 import { segment } from "oicq";
-import fs from "fs";
 import { Character } from "../components/models.js";
 import lodash from "lodash";
-import { Cfg } from "../components/index.js";
+import Calendar from "../components/Calendar.js";
-import Cal from "../components/Calcendar.js";
+import Common from "../components/Common.js";
-import Calcendar from "../components/Calcendar.js";
 
-//import {wikiCharacter} from "../modules/wiki.js";
 
 let action = {
   wiki: {
@@ -35,11 +32,11 @@ export async function wiki(e, { render }) {
     mode = "pic";
   }
 
-  if (Cfg.isDisable(e, `wiki.${mode}`)) {
+  if ((mode === "pic" && Common.isDisable(e, "wiki.pic"))
+    || (mode !== "pic" && Common.isDisable("wiki.wiki"))) {
     return;
   }
 
-
   let char = Character.get(ret[1]);
   if (!char) {
     return false;
@@ -55,19 +52,13 @@ export async function wiki(e, { render }) {
     return true;
   }
 
-  let base64 = await render("wiki", "character", {
+  return await Common.render("wiki/character", {
     save_id: "天赋" + char.name,
     ...char,
     mode,
     line: getLineData(char),
     _char: `/meta/character/${char.name}/`,
-    cfgScale: Cfg.scale(1)
+  }, { e, render, scale: 1 });
-  });
-
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true; //事件结束不再往下
 }
 
 const getLineData = function (data) {
@@ -82,37 +73,15 @@ const getLineData = function (data) {
   return ret;
 }
 
-// 更新图像缓存
-async function wikiCache(e) {
-  const meta = JSON.parse(fs.readFileSync("./data/meta/characters.json", "utf8"));
-  let count = 0;
-  let data;
-  console.log("开始生成角色资料缓存...")
-  for (let idx in meta) {
-    let base64 = await genWikiImg(meta[idx].Name);
-    if (base64) {
-      count++;
-      console.log(`角色资料缓存: ${meta[idx].Name}，count：${count}`)
-    }
-  }
-  e.reply(`生成Wiki缓存${count}个`)
-}
-
 export async function calendar(e, { render }) {
-  let calData = await Calcendar.get();
+  let calData = await Calendar.get();
   let mode = "calendar";
   if (/(日历列表|活动)$/.test(e.msg)) {
     mode = "list";
   }
 
-  let base64 = await render("wiki", "calendar", {
+  return await Common.render("wiki/calendar", {
     ...calData,
     displayMode: mode,
-    cfgScale: Cfg.scale(1.1)
+  }, { e, render, scale: 1.1 });
-  });
-
-  if (base64) {
-    e.reply(segment.image(`base64://${base64}`));
-  }
-  return true; //事件结束不再往下
 }

components/Changelog.js

@@ -7,33 +7,58 @@ const _logPath = `${_path}/plugins/miao-plugin/CHANGELOG.md`;
 let logs = {};
 let changelogs = [];
 let currentVersion;
-let versionCount = 2;
+let versionCount = 4;
+
+let packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
+
+const getLine = function (line) {
+  line = line.replace(/(^\s*\*|\r)/g, '');
+  line = line.replace(/\s*`([^`]+`)/g, '<span class="cmd">$1');
+  line = line.replace(/`\s*/g, '</span>');
+  line = line.replace(/ⁿᵉʷ/g, '<span class="new"></span>');
+  return line;
+}
+
 try {
   if (fs.existsSync(_logPath)) {
     logs = fs.readFileSync(_logPath, "utf8") || "";
     logs = logs.split("\n");
+
+    let temp = {}, lastLine = {};
     lodash.forEach(logs, (line) => {
-      if (versionCount === -1) {
+      if (versionCount <= -1) {
         return false;
       }
-      let versionRet = /^#\s*([0-9\\.]+)\s*$/.exec(line);
+      let versionRet = /^#\s*([0-9\\.~\s]+?)\s*$/.exec(line);
       if (versionRet && versionRet[1]) {
-        let v = versionRet[1];
+        let v = versionRet[1].trim();
-
-
         if (!currentVersion) {
           currentVersion = v;
+        } else {
+          changelogs.push(temp);
+          if (/0\s*$/.test(v) && versionCount > 0) {
+            versionCount = 0;
+          } else {
+            versionCount--;
+          }
         }
-        versionCount--;
-        versionCount === 0 && changelogs.push(" ");
-        versionCount > -1 && changelogs.push(`【 版本: ${v} 】`)
 
-        return;
+        temp = {
-      }
+          version: v,
-      if (versionCount > -1) {
+          logs: []
-        line = line.replace(/`/g, "");
+        }
-        if (line.trim()) {
+      } else {
-          changelogs.push(line);
+        if (!line.trim()) {
+          return;
+        }
+        if (/^\*/.test(line)) {
+          lastLine = {
+            title: getLine(line),
+            logs: []
+          }
+          temp.logs.push(lastLine);
+        } else if (/^\s{3,}\*/.test(line)) {
+          lastLine.logs.push(getLine(line));
         }
       }
     });
@@ -42,4 +67,6 @@ try {
   // do nth
 }
 
-export { currentVersion, changelogs };
+const yunzaiVersion = packageJson.version;
+
+export { currentVersion, yunzaiVersion, changelogs };

components/Common.js

@@ -0,0 +1,32 @@
+import { Cfg } from "./index.js";
+import { segment } from "oicq";
+import { currentVersion, yunzaiVersion } from "./Changelog.js";
+
+export const render = async function (path, params, cfg) {
+  let paths = path.split("/");
+  let { render, e } = cfg;
+  let _layout_path = process.cwd() + "/plugins/miao-plugin/resources/common/layout/";
+  let base64 = await render(paths[0], paths[1], {
+    ...params,
+    _layout_path,
+    defaultLayout: _layout_path + "default.html",
+    elemLayout: _layout_path + "elem.html",
+    sys: {
+      scale: Cfg.scale(cfg.scale || 1),
+      copyright: `Created By Yunzai-Bot<span class="version">${yunzaiVersion}</span> & Miao-Plugin<span class="version">${currentVersion}</span>`
+    }
+  });
+
+  if (base64) {
+    e.reply(segment.image(`base64://${base64}`));
+  }
+
+  return true;
+}
+
+
+export default {
+  render,
+  cfg: Cfg.get,
+  isDisable: Cfg.isDisable
+};

index.js

@@ -14,7 +14,7 @@ import { help, versionInfo } from "./apps/help.js";
 import lodash from "lodash";
 import common from "../../lib/common.js";
 import { rule as adminRule, updateRes, sysCfg, updateMiaoPlugin } from "./apps/admin.js";
-import { currentVersion, changelogs } from "./components/Changelog.js";
+import { currentVersion } from "./components/Changelog.js";
 
 export {
   character,
@@ -114,7 +114,7 @@ setTimeout(async function () {
     let msg = JSON.parse(msgStr);
     await common.relpyPrivate(msg.qq, msg.msg);
     await redis.del("miao:restart-msg");
-    let msgs = [`当前喵喵版本: ${currentVersion}`, ...changelogs];
+    let msgs = [`当前喵喵版本: ${currentVersion}`, `您可使用 #喵喵版本 命令查看更新信息`];
     await common.relpyPrivate(msg.qq, msgs.join("\n"));
   }
 }, 1000);

resources/admin/index.css

@@ -2,17 +2,14 @@ body {
   transform: scale(1);
   width: 520px;
 }
-
 .container {
-  background: url("bg.png") #000144 left top no-repeat;
+  background: url("./imgs/bg.png") #000144 left top no-repeat;
   background-size: 520px auto;
-  width:520px;
+  width: 520px;
 }
-
 .head-box {
   margin: 0 0 80px 0;
 }
-
 .cfg-box {
   border-radius: 15px;
   margin-top: 20px;
@@ -20,23 +17,16 @@ body {
   padding: 5px 15px;
   overflow: hidden;
   background: #f5f5f5;
-  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
   position: relative;
-  background: rgba(35, 38, 57, .8);
+  background: rgba(35, 38, 57, 0.8);
 }
-
-
 .cfg-group {
   color: #ceb78b;
   font-size: 18px;
   font-weight: bold;
   padding: 10px 20px;
 }
-
-.cfg-ul {
-
-}
-
 .cfg-li {
   border-radius: 18px;
   min-height: 36px;
@@ -45,7 +35,6 @@ body {
   margin-bottom: 10px;
   background: rgba(203, 196, 190, 0);
 }
-
 .cfg-line {
   color: #4e5769;
   line-height: 36px;
@@ -53,17 +42,15 @@ body {
   font-weight: bold;
   border-radius: 16px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  background: url("./cfg-right.jpg") right top #cbc4be no-repeat;
+  background: url("./imgs/cfg-right.jpg") right top #cbc4be no-repeat;
   background-size: auto 36px;
 }
-
 .cfg-hint {
   font-size: 12px;
   font-weight: normal;
   margin-top: 3px;
   margin-bottom: -3px;
 }
-
 .cfg-status {
   position: absolute;
   top: 0;
@@ -78,13 +65,12 @@ body {
   border-radius: 0 16px 16px 0;
   font-family: Number, "微软雅黑", sans-serif;
 }
-
 .cfg-status.status-off {
   color: #a95151;
 }
-
 .cfg-desc {
   font-size: 12px;
   color: #cbc4be;
   margin: 5px 0 5px 20px;
-}
+}
+/*# sourceMappingURL=index.css.map */

resources/admin/index.html

@@ -1,123 +1,119 @@
-<!DOCTYPE html>
+{{extend defaultLayout}}
-<html>
+{{block 'css'}}
-  <head>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/admin/index.css"/>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+{{/block}}
-    <link rel="shortcut icon" href="#"/>
+{{block 'main'}}
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/admin/index.css"/>
-  </head>
-  <body class="body_box" {{cfgScale}}>
-    <div id="container" class="container">
-      <div class="info_box">
-        <div class="head-box type{{bgType}}">
-          <div class="label">#喵喵设置</div>
-          <div class="title">喵喵管理面板</div>
-        </div>
-      </div>
-      <div class="cfg-box">
-        <div class="cfg-group">玩家&老婆卡片展示</div>
-        <ul class="cfg-ul">
-          <li class="cfg-li">
-            <div class="cfg-line">
-              角色查询
-              <span class="cfg-hint"> #喵喵设置角色 + 开启/关闭</span>
-              {{@chars}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              老婆查询
-              <span class="cfg-hint"> #喵喵设置老婆 + 开启/关闭</span>
-              {{@wife}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              允许查他人
-              <span class="cfg-hint"> #喵喵设置查他人 + 开启/关闭</span>
-              {{@other}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              角色图片扩展包
-              <span class="cfg-hint"> #喵喵更新图像</span>
-              {{if imgPlus}}
-              <div class="cfg-status">已安装</div>
-              {{else}}
-              <div class="cfg-status status-off">未安装</div>
-              {{/if}}
-            </div>
-            <div class="cfg-desc">角色图片的扩展包，包含更多的角色图片</div>
-          </li>
-        </ul>
-      </div>
-      <div class="cfg-box">
-        <div class="cfg-group">角色资料与信息查询</div>
-        <ul class="cfg-ul">
-          <li class="cfg-li">
-            <div class="cfg-line">
-              角色天赋
-              <span class="cfg-hint"> #喵喵设置天赋 + 开启/关闭</span>
-              {{@talent}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              角色命座
-              <span class="cfg-hint"> #喵喵设置命座 + 开启/关闭</span>
-              {{@cons}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              角色图片
-              <span class="cfg-hint"> #喵喵设置图片 + 开启/关闭</span>
-              {{@pic}}
-            </div>
-          </li>
-          <li class="cfg-li">
-            <div class="cfg-line">
-              深渊资料
-              <span class="cfg-hint"> #喵喵设置深渊 + 开启/关闭</span>
-              {{@abyss}}
-            </div>
-            <div class="cfg-desc">角色持有率、深渊出场率等信息</div>
-          </li>
-        </ul>
-      </div>
-      <div class="cfg-box">
-        <div class="cfg-group">系统设置</div>
-        <ul class="cfg-ul">
-          <li class="cfg-li">
-            <div class="cfg-line">
-              渲染精度
-              <span class="cfg-hint">#喵喵设置渲染100 </span>
-              <div class="cfg-status">{{scale}}</div>
-            </div>
-            <div class="cfg-desc">可选值50~200，建议100。设置高精度会提高图片的精细度，但因图片较大可能会影响渲染与发送速度</div>
-          </li>
-
-          <li class="cfg-li">
-            <div class="cfg-line">
-              喵喵作为默认帮助
-              <span class="cfg-hint">#喵喵设置帮助 + 开启/关闭 </span>
-              {{@help}}
-            </div>
-            <div class="cfg-desc">开启后将使用喵喵版帮助作为Yunzai的默认帮助</div>
-          </li>
-
-          <!-- <li class="cfg-li">
-             <div class="cfg-line">
-               更新版本
-               <div class="cfg-status">#喵喵更新</div>
-             </div>
-             <div class="cfg-desc">更新喵喵Plugin，可能需要重启Yunzai-Bot</div>
-           </li>-->
-        </ul>
 
+<div class="info_box">
+  <div class="head-box type{{bgType}}">
+    <div class="label">#喵喵设置</div>
+    <div class="title">喵喵管理面板</div>
+  </div>
+</div>
+<div class="cfg-box">
+  <div class="cfg-group">玩家&老婆卡片展示</div>
+  <ul class="cfg-ul">
+    <li class="cfg-li">
+      <div class="cfg-line">
+        角色查询
+        <span class="cfg-hint"> #喵喵设置角色 + 开启/关闭</span>
+        {{@chars}}
       </div>
-      <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
+    </li>
-    </div>
+    <li class="cfg-li">
-  </body>
+      <div class="cfg-line">
-</html>
+        面板查询
+        <span class="cfg-hint"> #喵喵设置面板 + 开启/关闭</span>
+        {{@profile}}
+      </div>
+    </li>
+    <li class="cfg-li">
+      <div class="cfg-line">
+        老婆查询
+        <span class="cfg-hint"> #喵喵设置老婆 + 开启/关闭</span>
+        {{@wife}}
+      </div>
+    </li>
+    <li class="cfg-li">
+      <div class="cfg-line">
+        允许查他人
+        <span class="cfg-hint"> #喵喵设置查他人 + 开启/关闭</span>
+        {{@other}}
+      </div>
+      <div class="cfg-desc">面板查询暂不支持查他人</div>
+    </li>
+
+  </ul>
+</div>
+<div class="cfg-box">
+  <div class="cfg-group">角色资料与信息查询</div>
+  <ul class="cfg-ul">
+    <li class="cfg-li">
+      <div class="cfg-line">
+        角色图鉴
+        <span class="cfg-hint"> #喵喵设置图鉴 + 开启/关闭</span>
+        {{@wiki}}
+      </div>
+      <div class="cfg-desc">角色天赋、角色命座、角色图鉴（尚未完成）等资料</div>
+    </li>
+    <li class="cfg-li">
+      <div class="cfg-line">
+        深渊资料
+        <span class="cfg-hint"> #喵喵设置深渊 + 开启/关闭</span>
+        {{@abyss}}
+      </div>
+      <div class="cfg-desc">角色持有率、深渊出场率、深渊配队等统计信息</div>
+    </li>
+    <li class="cfg-li">
+      <div class="cfg-line">
+        角色图片
+        <span class="cfg-hint"> #喵喵设置图片 + 开启/关闭</span>
+        {{@pic}}
+      </div>
+    </li>
+    <li class="cfg-li">
+      <div class="cfg-line">
+        角色图片扩展包
+        <span class="cfg-hint"> #喵喵更新图像</span>
+        {{if imgPlus}}
+        <div class="cfg-status">已安装</div>
+        {{else}}
+        <div class="cfg-status status-off">未安装</div>
+        {{/if}}
+      </div>
+      <div class="cfg-desc">角色图片的扩展包，包含更多的角色图片</div>
+    </li>
+  </ul>
+</div>
+<div class="cfg-box">
+  <div class="cfg-group">系统设置</div>
+  <ul class="cfg-ul">
+    <li class="cfg-li">
+      <div class="cfg-line">
+        渲染精度
+        <span class="cfg-hint">#喵喵设置渲染100 </span>
+        <div class="cfg-status">{{scale}}</div>
+      </div>
+      <div class="cfg-desc">可选值50~200，建议100。设置高精度会提高图片的精细度，但因图片较大可能会影响渲染与发送速度</div>
+    </li>
+
+    <li class="cfg-li">
+      <div class="cfg-line">
+        喵喵作为默认帮助
+        <span class="cfg-hint">#喵喵设置帮助 + 开启/关闭 </span>
+        {{@help}}
+      </div>
+      <div class="cfg-desc">开启后将使用喵喵版帮助作为Yunzai的默认帮助</div>
+    </li>
+
+    <!-- <li class="cfg-li">
+       <div class="cfg-line">
+         更新版本
+         <div class="cfg-status">#喵喵更新</div>
+       </div>
+       <div class="cfg-desc">更新喵喵Plugin，可能需要重启Yunzai-Bot</div>
+     </li>-->
+  </ul>
+
+</div>
+{{/block}}

resources/admin/index.less

@@ -0,0 +1,90 @@
+body {
+  transform: scale(1);
+  width: 520px;
+}
+
+.container {
+  background: url("./imgs/bg.png") #000144 left top no-repeat;
+  background-size: 520px auto;
+  width:520px;
+}
+
+.head-box {
+  margin: 0 0 80px 0;
+}
+
+.cfg-box {
+  border-radius: 15px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 5px 15px;
+  overflow: hidden;
+  background: #f5f5f5;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  position: relative;
+  background: rgba(35, 38, 57, .8);
+}
+
+
+.cfg-group {
+  color: #ceb78b;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 10px 20px;
+}
+
+.cfg-ul {
+
+}
+
+.cfg-li {
+  border-radius: 18px;
+  min-height: 36px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 10px;
+  background: rgba(203, 196, 190, 0);
+}
+
+.cfg-line {
+  color: #4e5769;
+  line-height: 36px;
+  padding-left: 20px;
+  font-weight: bold;
+  border-radius: 16px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  background: url("./imgs/cfg-right.jpg") right top #cbc4be no-repeat;
+  background-size: auto 36px;
+}
+
+.cfg-hint {
+  font-size: 12px;
+  font-weight: normal;
+  margin-top: 3px;
+  margin-bottom: -3px;
+}
+
+.cfg-status {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 36px;
+  width: 160px;
+  text-align: center;
+  line-height: 36px;
+  font-size: 16px;
+  color: #495366;
+  font-weight: bold;
+  border-radius: 0 16px 16px 0;
+  font-family: Number, "微软雅黑", sans-serif;
+}
+
+.cfg-status.status-off {
+  color: #a95151;
+}
+
+.cfg-desc {
+  font-size: 12px;
+  color: #cbc4be;
+  margin: 5px 0 5px 20px;
+}

resources/character/artis.css

@@ -1,16 +1,13 @@
 .container {
   width: 790px;
 }
-
 .artis {
   width: 790px;
 }
-
 .artis .item {
   height: 205px;
   overflow: hidden;
 }
-
 .artis .item .avatar {
   position: absolute;
   left: 32px;
@@ -21,13 +18,12 @@
   overflow: hidden;
   z-index: 3;
 }
-
 .artis .item .arti-icon img {
   width: 52px;
   height: 52px;
 }
-
 .artis .item .avatar img {
   max-width: 100%;
   max-height: 100%;
-}
+}
+/*# sourceMappingURL=artis.css.map */

resources/character/artis.html

@@ -1,43 +1,36 @@
-<!DOCTYPE html>
+{{extend elemLayout}}
-<html>
+
-  <head>
+{{block 'css'}}
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/character/detail.css"/>
-    <link rel="shortcut icon" href="#"/>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/character/artis.css"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+{{/block}}
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/character/detail.css"/>
+
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/character/artis.css"/>
+{{block 'main'}}
-  </head>
+<div class="artis">
-  <body {{cfgScale}} class="elem_geo char-{{name}}">
+  {{each artis ds}}
-    <div class="container" id="container">
+  <div class="item arti">
-      <div class="artis">
+    {{if ds.name && ds.main && ds.main[0] && ds.main[0]!="undefined"}}
-        {{each artis ds}}
+    <div class="avatar">
-        <div class="item arti">
+      <img src="{{_res_path}}meta/character/{{ds.avatar}}/side.png" onerror="whenError(this)"/>
-          {{if ds.name && ds.main && ds.main[0] && ds.main[0]!="undefined"}}
-          <div class="avatar">
-            <img src="{{_res_path}}meta/character/{{ds.avatar}}/side.png" onerror="whenError(this)"/>
-          </div>
-          <div class="arti-icon">
-            <img src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
-          </div>
-          <div class="head">
-            <strong>{{ds.name}}</strong>
-            <span class="mark mark-{{ds.markType}}"><span>{{ds.mark}}分</span> - {{ds.markType}}</span>
-          </div>
-          <ul class="detail">
-            <li class="arti-main"><span class="title">{{ds.main[0]}}</span><span class="val">+{{ds.main[1]}}</span></li>
-            {{each ds.attrs attr}}
-            {{if attr[0]}}
-            <li class="{{ds.usefulMark[attr[0]] ? `useful`:`nouse`}}"><span class="title">{{attr[0]}}</span><span
-                class="val">+{{attr[1]}}</span></li>
-            {{/if}}
-            {{/each}}
-          </ul>
-          {{/if}}
-        </div>
-        {{/each}}
-      </div>
-      <div class="copyright">Created By Yunzai-Bot & Miao-Plugin</div>
     </div>
-  </body>
+    <div class="arti-icon">
-  <script type="text/javascript"></script>
+      <img src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
-</html>
+    </div>
+    <div class="head">
+      <strong>{{ds.name}}</strong>
+      <span class="mark mark-{{ds.markType}}"><span>{{ds.mark}}分</span> - {{ds.markType}}</span>
+    </div>
+    <ul class="detail">
+      <li class="arti-main"><span class="title">{{ds.main[0]}}</span><span class="val">+{{ds.main[1]}}</span></li>
+      {{each ds.attrs attr}}
+      {{if attr[0]}}
+      <li class="{{ds.usefulMark[attr[0]] ? `useful`:`nouse`}}"><span class="title">{{attr[0]}}</span><span
+          class="val">+{{attr[1]}}</span></li>
+      {{/if}}
+      {{/each}}
+    </ul>
+    {{/if}}
+  </div>
+  {{/each}}
+</div>
+{{/block}}

resources/character/artis.less

@@ -0,0 +1,33 @@
+.container {
+  width: 790px;
+}
+
+.artis {
+  width: 790px;
+}
+
+.artis .item {
+  height: 205px;
+  overflow: hidden;
+}
+
+.artis .item .avatar {
+  position: absolute;
+  left: 32px;
+  top: 26px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  overflow: hidden;
+  z-index: 3;
+}
+
+.artis .item .arti-icon img {
+  width: 52px;
+  height: 52px;
+}
+
+.artis .item .avatar img {
+  max-width: 100%;
+  max-height: 100%;
+}

resources/character/card.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
     <link rel="stylesheet" type="text/css" href="{{_res_path}}/character/card.css?v=1.0"/>
   </head>
-  <body class="{{bg.mode}}_mode" {{cfgScale}}>
+  <body class="{{bg.mode}}_mode" {{sys.scale}}>
     <div class="container" id="container">
       <div class="char_name">
         <div class="uid">ID:{{uid}}</div>
@@ -27,7 +27,6 @@
             <p class="weapon_affix">{{weapon.affix_level}}</p>
           </div>
           <p class="weapon_name">
-
             <span class="for_left">Lv.{{weapon.level}} 精{{weapon.affix_level}}</span>
             <span class="for_bottom">精{{weapon.affix_level}} </span>
             {{weapon.name}}
@@ -50,7 +49,7 @@
           <div class="text">{{text2 || "-"}}</div>
         </div>
       </div>
-      <div class="copyright">Created By Yunzai-Bot & Miao-Plugin</div>
+      <div class="copyright">{{@sys.copyright}}</div>
       <div>
         <img src="{{_res_path}}{{bg.img}}" title="{{name}}" class="bg"></div>
     </div>

resources/character/detail.css

@@ -1,21 +1,16 @@
-
 body {
   width: 600px;
 }
-
 .container {
   width: 600px;
   padding: 0;
   background-size: cover;
   overflow: hidden;
 }
-
-
 .basic {
   position: relative;
   margin-bottom: 10px;
 }
-
 .basic:after {
   content: "";
   display: block;
@@ -28,7 +23,6 @@ body {
   border-radius: 5px;
   z-index: 1;
 }
-
 .main-pic {
   width: 800px;
   height: 500px;
@@ -39,7 +33,6 @@ body {
   position: relative;
   z-index: 2;
 }
-
 .detail {
   position: absolute;
   right: 20px;
@@ -47,26 +40,22 @@ body {
   color: #fff;
   z-index: 3;
 }
-
 .char-name {
   font-size: 50px;
   font-family: NZBZ;
-  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
+  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
   text-align: right;
 }
-
 .char-lv {
   font-family: Number;
   margin-bottom: 20px;
-  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
+  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
   text-align: right;
 }
-
 .attr {
   border-radius: 4px;
   overflow: hidden;
 }
-
 .detail li {
   width: 300px;
   font-size: 17px;
@@ -76,63 +65,50 @@ body {
   font-family: YS;
   height: 32px;
   line-height: 32px;
-  text-shadow: 0 0 1px rgba(0, 0, 0, .5);
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
 }
-
 .attr li i {
   display: inline-block;
   height: 20px;
   width: 20px;
-  background-image: url("./icon.png");
+  background-image: url("./imgs/icon.png");
   background-size: auto 20px;
   position: absolute;
   left: 10px;
   top: 8px;
-  opacity: .9;
+  opacity: 0.9;
-  transform: scale(.9);
+  transform: scale(0.9);
-
 }
-
 .i-hp {
   background-position: -20px 0;
 }
-
 .i-atk {
   background-position: -40px 0;
 }
-
 .i-def {
   background-position: -60px 0;
 }
-
 .i-mastery {
   background-position: -80px 0;
 }
-
 .i-cr {
   background-position: -100px 0;
 }
-
 .i-cd {
   background-position: -140px 0;
 }
-
 .i-re {
   background-position: -120px 0;
 }
-
 .i-dmg {
   background-position: -160px 0;
 }
-
 .detail li:nth-child(even) {
-  background: rgba(0, 0, 0, .4)
+  background: rgba(0, 0, 0, 0.4);
 }
-
 .detail li:nth-child(odd) {
-  background: rgba(50, 50, 50, .4)
+  background: rgba(50, 50, 50, 0.4);
 }
-
 .detail li strong {
   display: inline-block;
   position: absolute;
@@ -141,7 +117,6 @@ body {
   font-family: Number, sans-serif;
   font-weight: normal;
 }
-
 .detail li span {
   position: absolute;
   right: 0;
@@ -152,7 +127,6 @@ body {
   color: #90e800;
   font-size: 15px;
 }
-
 .talent-icon {
   width: 100px;
   height: 100px;
@@ -165,7 +139,6 @@ body {
   background-position: center center;
   z-index: 90;
 }
-
 .talent-icon img,
 .talent-icon .talent-icon-img {
   width: 46%;
@@ -178,7 +151,6 @@ body {
   background-repeat: no-repeat;
   background-position: center;
 }
-
 .talent-icon span {
   background: #fff;
   width: 34px;
@@ -195,14 +167,12 @@ body {
   box-shadow: 0 0 5px 0 #000;
   font-family: Number;
 }
-
 .talent-icon.talent-plus span {
   background: #2e353e;
   color: #ffdfa0;
   font-weight: bold;
   box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
 }
-
 .talent-icon.talent-crown:after {
   content: "";
   display: block;
@@ -215,14 +185,11 @@ body {
   top: 0;
   margin-left: -14px;
 }
-
-
 .char-talents {
   display: flex;
   width: 300px;
   margin-bottom: 10px;
 }
-
 .char-cons {
   display: flex;
   width: 250px;
@@ -230,78 +197,55 @@ body {
   bottom: 5px;
   left: 20px;
 }
-
 .char-cons .talent-item,
 .char-talents .talent-item {
   flex: 1;
 }
-
 .char-cons .talent-icon {
   width: 50px;
   height: 50px;
-  margin: 0 -5px
+  margin: 0 -5px;
 }
-
 .char-cons .talent-icon.off {
   filter: grayscale(100%);
-  opacity: .4;
+  opacity: 0.4;
 }
-
-
 .elem_anemo .talent-icon {
-  background-image: url(../common/bg/talent-anemo.png)
+  background-image: url(../common/bg/talent-anemo.png);
 }
-
 .elem_anemo .container {
   background-image: url(../common/bg/bg-anemo.jpg);
 }
-
-
 .elem_cryo .talent-icon {
-  background-image: url(../common/bg/talent-cryo.png)
+  background-image: url(../common/bg/talent-cryo.png);
 }
-
 .elem_cryo .container {
   background-image: url(../common/bg/bg-cryo.jpg);
 }
-
-
 .elem_electro .talent-icon {
-  background-image: url(../common/bg/talent-electro.png)
+  background-image: url(../common/bg/talent-electro.png);
 }
-
 .elem_electro .container {
   background-image: url(../common/bg/bg-electro.jpg);
 }
-
-
 .elem_geo .talent-icon {
-  background-image: url(../common/bg/talent-geo.png)
+  background-image: url(../common/bg/talent-geo.png);
 }
-
 .elem_geo .container {
   background-image: url(../common/bg/bg-geo.jpg);
 }
-
-
 .elem_hydro .talent-icon {
-  background-image: url(../common/bg/talent-hydro.png)
+  background-image: url(../common/bg/talent-hydro.png);
 }
-
 .elem_hydro .container {
   background-image: url(../common/bg/bg-hydro.jpg);
 }
-
-
 .elem_pyro .talent-icon {
-  background-image: url(../common/bg/talent-pyro.png)
+  background-image: url(../common/bg/talent-pyro.png);
 }
-
 .elem_pyro .container {
   background-image: url(../common/bg/bg-pyro.jpg);
 }
-
-
 /***  dmg ***/
 .cont {
   border-radius: 10px;
@@ -309,31 +253,27 @@ body {
   background-size: auto 100%;
   margin: 5px 15px 5px 10px;
   position: relative;
-  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
   overflow: hidden;
   color: #fff;
   font-size: 16px;
 }
-
 .dmg-cont {
   display: table;
   width: calc(100% - 25px);
   margin-top: 10px;
   margin-bottom: 10px;
 }
-
 .dmg-mode .dmg-list .cont-footer {
   display: none;
 }
-
 .cont-title {
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
   color: #d3bc8e;
   font-family: YS;
   padding: 10px 20px;
   text-align: left;
 }
-
 .cont-title span {
   font-size: 12px;
   color: #aaa;
@@ -341,7 +281,6 @@ body {
   font-family: Number, YS;
   font-weight: normal;
 }
-
 .cont-footer {
   padding: 10px 15px;
   font-size: 12px;
@@ -349,69 +288,55 @@ body {
   font-family: YS;
   font-weight: normal;
 }
-
 .cont-table {
   display: table;
   width: 100%;
 }
-
 .dmg-cont .tr {
   display: table-row;
 }
-
 .dmg-cont .tr:nth-child(even) {
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
 }
-
 .dmg-cont .tr:nth-child(odd) {
-  background: rgba(50, 50, 50, .4);
+  background: rgba(50, 50, 50, 0.4);
 }
-
 .dmg-cont .tr > div {
   display: table-cell;
   box-shadow: 0 0 1px 0 #fff;
 }
-
 .dmg-cont .tr > div.value-full {
   display: table;
   width: 200%;
 }
-
 .dmg-cont .tr > div.value-none {
   box-shadow: none;
 }
-
 .dmg-cont .thead {
   text-align: center;
 }
-
 .dmg-cont .thead > div {
   font-family: YS;
   color: #d3bc8e;
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
   line-height: 40px;
   height: 40px;
 }
-
-
 .dmg-cont .title,
 .dmg-cont .th {
   font-family: YS;
   color: #d3bc8e;
   padding-right: 15px;
   text-align: right;
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
   min-width: 100px;
 }
-
 .profile-mode .dmg-idx {
   display: none !important;
 }
-
 .profile-mode .dmg-title {
   width: 33.3333%;
 }
-
 .dmg-mode .dmg-idx {
   display: table-cell;
   width: 5%;
@@ -419,7 +344,6 @@ body {
   padding-right: 0;
   text-align: center;
 }
-
 .dmg-mode .dmg-title {
   width: 31%;
   min-width: initial;
@@ -427,8 +351,6 @@ body {
   padding-left: 10px;
   padding-right: 0;
 }
-
-
 .dmg .value {
   text-align: center;
   color: #fff;
@@ -437,17 +359,14 @@ body {
   font-size: 18px;
   font-family: Number;
   line-height: 40px;
-  width: 32%
+  width: 32%;
 }
-
 .dmg-notice {
   font-size: 12px;
   text-align: right;
   color: #f5f5f5;
   margin-right: 15px;
 }
-
-
 /*** artis***/
 .artis {
   display: flex;
@@ -456,7 +375,6 @@ body {
   margin-bottom: 5px;
   padding: 5px;
 }
-
 .artis .item {
   width: 185px;
   border-radius: 10px;
@@ -465,10 +383,8 @@ body {
   margin: 5px;
   height: 210px;
   position: relative;
-  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
 }
-
-
 .artis .item .arti-icon {
   width: 60px;
   height: 60px;
@@ -476,13 +392,12 @@ body {
   left: 2px;
   top: 3px;
 }
-
 .artis .item .arti-icon span {
   position: absolute;
   right: 2px;
   bottom: 0;
   margin-left: 5px;
-  background: rgba(0, 0, 0, .5);
+  background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   height: 18px;
   line-height: 18px;
@@ -491,17 +406,14 @@ body {
   font-size: 12px;
   display: block;
 }
-
 .artis .item .arti-icon img {
   width: 60px;
   height: 60px;
 }
-
 .artis .head {
   color: #fff;
   padding: 12px 0 8px 68px;
 }
-
 .artis .head strong {
   font-size: 15px;
   display: block;
@@ -509,46 +421,37 @@ body {
   overflow: hidden;
   font-font: YS;
 }
-
 .artis .head span {
   font-size: 14px;
 }
-
 .artis .head .mark {
   font-family: Number, YS;
 }
-
 .mark-ACE,
 .mark-ACE² {
   color: #e85656;
   font-weight: bold;
 }
-
 .mark-SSS,
 .mark-SS {
   color: #ffe699;
   font-weight: bold;
 }
-
 .mark-S,
 .mark-A {
   color: #d699ff;
   font-weight: bold;
 }
-
 .arti-main {
   color: #fff;
   padding: 6px 15px;
 }
-
-
 .artis ul.detail {
   width: 100%;
   padding: 0;
   position: initial;
   font-family: YS;
 }
-
 .artis ul.detail li {
   padding: 0 3px;
   font-size: 14px;
@@ -558,36 +461,29 @@ body {
   line-height: 26px;
   height: 26px;
 }
-
-
 .artis ul.detail li.nouse span {
   color: #888;
 }
-
 .artis ul.detail li.arti-main {
   font-size: 16px;
   padding: 3px 3px;
   font-weight: bold;
 }
-
 .artis ul.detail li span {
   position: initial;
   display: table-cell;
   color: #fff;
   font-family: YS;
 }
-
 .artis ul.detail li span.title {
   text-align: left;
   padding-left: 10px;
 }
-
 .artis ul.detail li span.val {
   text-align: right;
   padding-right: 10px;
   font-family: Number;
 }
-
 .artis .weapon .star {
   height: 20px;
   width: 100px;
@@ -597,29 +493,22 @@ body {
   transform-origin: 100px 10px;
   display: inline-block;
 }
-
 .artis .weapon .star.star-2 {
   background-position: 0 -20px;
 }
-
 .artis .weapon .star.star-3 {
   background-position: 0 -40px;
 }
-
 .artis .weapon .star.star-4 {
   background-position: 0 -60px;
 }
-
 .artis .weapon .star.star-5 {
   background-position: 0 -80px;
 }
-
-
 .artis .weapon {
   overflow: hidden;
   height: 100px;
 }
-
 .artis .weapon img {
   width: 100px;
   height: 100px;
@@ -628,7 +517,6 @@ body {
   position: absolute;
   z-index: 2;
 }
-
 .artis .weapon .head {
   position: absolute;
   bottom: 0;
@@ -639,23 +527,18 @@ body {
   z-index: 3;
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
 }
-
 .artis .weapon .head strong {
   font-size: 18px;
   margin-bottom: 3px;
   font-weight: normal;
   font-family: YS;
 }
-
 .artis .weapon .head > span {
   display: block;
-
 }
-
 .artis .weapon span {
   font-size: 16px;
 }
-
 .artis .weapon .affix {
   color: #000;
   padding: 0 7px;
@@ -663,50 +546,40 @@ body {
   margin-left: 5px;
   font-size: 16px;
 }
-
-
 .artis .weapon .affix-1 {
   box-shadow: 0 0 4px 0 #a3a3a3 inset;
   background: #ebebebaa;
 }
-
 .artis .weapon .affix-2 {
   box-shadow: 0 0 4px 0 #51b72fbd inset;
   background: #ddffdeaa;
 }
-
 .artis .weapon .affix-3 {
   box-shadow: 0 0 4px 0 #396cdecf inset;
   background: #ddebffaa;
 }
-
 .artis .weapon .affix-4 {
   box-shadow: 0 0 4px 0 #c539debf inset;
   background: #ffddf0aa;
 }
-
 .artis .weapon .affix-5 {
   box-shadow: 0 0 4px 0 #deaf39 inset;
   background: #fff6dd;
 }
-
 .artis .stat {
   height: 100px;
   margin-top: 10px;
 }
-
 .artis .stat {
   display: table-row;
   padding: 18px 10px;
   display: table;
 }
-
 .artis .stat > div {
   display: table-cell;
   text-align: center;
   color: #fff;
 }
-
 .artis .stat strong {
   display: block;
   height: 40px;
@@ -714,135 +587,100 @@ body {
   font-family: Number;
   line-height: 40px;
 }
-
 .dmg-msg {
   font-family: Number, YS;
   font-size: 13px;
   font-weight: normal;
 }
-
 .dmg-msg .thead > div {
   text-align: left;
   padding-left: 10px;
 }
-
 .dmg-msg .th {
   text-align: left;
   padding-left: 10px;
 }
-
 .dmg-msg .tr .td {
   padding: 8px 10px;
 }
-
 .dmg-msg .info {
   font-size: 12px;
   text-align: left;
   padding-left: 10px;
   font-weight: normal;
 }
-
-
-.dmg-calc {
-
-}
-
-.dmg-calc .thead {
-
-}
-
 .dmg-calc .thead > div {
   line-height: initial;
 }
-
 .dmg-calc .cont-table div {
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
 }
-
 .dmg-calc .title {
   text-align: center;
   padding-right: 0;
   min-width: 70px;
-
 }
-
 .dmg-calc .td {
   padding: 5px 0;
 }
-
 .dmg-calc strong {
   font-weight: normal;
   display: block;
   font-family: Number, YS;
 }
-
 .dmg-calc span {
   font-size: 12px;
   color: #aaa;
   font-family: Number, YS;
 }
-
 .dmg-calc .na,
 .dmg-calc .eq {
-  background: rgba(50, 50, 50, .5);
+  background: rgba(50, 50, 50, 0.5);
 }
-
 .dmg-calc .na {
   color: #888;
 }
-
 .dmg-calc .lt {
   background: rgba(23, 112, 41, 0.5);
 }
-
 .dmg-calc .gt {
   background: rgba(112, 23, 23, 0.5);
 }
-
 .dmg-desc {
   color: #aaa;
 }
-
 .dmg-desc ul {
   padding-left: 10px;
 }
-
 .dmg-desc ul li {
   color: #aaa;
 }
-
 .dmg-desc strong {
   color: #d3bc8e;
   display: inline;
   padding: 0 3px;
   font-weight: normal;
 }
-
-
 .artis .stat span {
   font-size: 13px;
   line-height: 20px;
   color: #bbb;
 }
-
 .char-优菈 .main-pic {
   margin-left: -175px;
 }
-
 .char-烟绯 .main-pic {
   margin-left: -135px;
 }
-
 .char-香菱 .main-pic {
   margin-left: -195px;
 }
-
 .char-迪奥娜 .main-pic {
   margin-left: -180px;
 }
-
 .char-可莉 .main-pic {
   margin-left: -210px;
-}
+}
+/*# sourceMappingURL=detail.css.map */

resources/character/detail.html

@@ -1,194 +1,186 @@
-<!DOCTYPE html>
+{{extend elemLayout}}
-<html>
+{{block 'css'}}
-  <head>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/character/detail.css"/>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+{{/block}}
-    <link rel="shortcut icon" href="#"/>
+
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+{{block 'main'}}
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/character/detail.css"/>
+<div class="basic">
-  </head>
+  <div class="main-pic"
-  <body {{cfgScale}} class="elem_{{elem}} char-{{name}} {{mode}}-mode">
+       style="background-image:url({{_res_path}}/meta/character/{{name}}/gacha_splash.png)"></div>
-    <div class="container" id="container">
+  <div class="detail">
-      <div class="basic">
+    <div class="char-name">{{name}}</div>
-        <div class="main-pic"
+    <div class="char-lv">UID {{uid}} - Lv.{{data.lv}}</div>
-             style="background-image:url({{_res_path}}/meta/character/{{name}}/gacha_splash.png)"></div>
+    <div class="char-talents">
-        <div class="detail">
+      {{each talentMap tName key}}
-          <div class="char-name">{{name}}</div>
+      <div class="talent-item">
-          <div class="char-lv">UID {{uid}} - Lv.{{data.lv}}</div>
+        <div class="talent-icon
-          <div class="char-talents">
-            {{each talentMap tName key}}
-            <div class="talent-item">
-              <div class="talent-icon
                {{talent[key].level_current > talent[key].level_original ? `talent-plus`:``}}
                 {{talent[key].level_original == 10 ? `talent-crown`:``}}">
-                <div class="talent-icon-img"
+          <div class="talent-icon-img"
-                     style="background-image:url({{_res_path}}/meta/character/{{name}}/talent_{{key}}.png)"></div>
+               style="background-image:url({{_res_path}}/meta/character/{{name}}/talent_{{key}}.png)"></div>
-                <span>{{talent[key].level_current}}</span>
+          <span>{{talent[key].level_current}}</span>
-              </div>
-            </div>
-            {{/each}}
-          </div>
-          <ul class="attr">
-            <li><i class="i-hp"></i>生命值<strong>{{attr.hp}}</strong><span>(+{{attr.hpPlus}})</span></li>
-            <li><i class="i-atk"></i>攻击力<strong>{{attr.atk}}</strong><span>(+{{attr.atkPlus}})</span></li>
-            <li><i class="i-def"></i>防御力<strong>{{attr.def}}</strong><span>(+{{attr.defPlus}})</span></li>
-            <li><i class="i-mastery"></i>元素精通<strong>{{attr.mastery}}</strong></li>
-            <li><i class="i-cr"></i>暴击率<strong>{{attr.cRate}}</strong></li>
-            <li><i class="i-cd"></i>暴击伤害<strong>{{attr.cDmg}}</strong></li>
-            <li><i class="i-re"></i>元素充能<strong>{{attr.recharge}}</strong></li>
-            <li><i class="i-dmg"></i>伤害加成<strong>{{attr.dmgBonus}}</strong></li>
-          </ul>
-        </div>
-        <div class="char-cons">
-          {{each cons con idx}}
-          <div class="cons-item">
-            <div class="talent-icon {{idx * 1 > avatar.actived_constellation_num * 1 ? 'off' : '' }}">
-              <img src="{{_res_path}}/meta/character/{{name}}/cons_{{idx}}.png"/>
-            </div>
-          </div>
-          {{/each}}
         </div>
       </div>
-      {{if dmgData.length > 0}}
+      {{/each}}
-      <div class="dmg-cont dmg-list cont">
-        <div class="cont-title">
-          伤害计算<span>目标为{{enemyLv}}级{{enemyName}}，如需调整等级可使用 #敌人等级{{enemyLv}} 来进行设置</span>
-        </div>
-        <div class="cont-table">
-          <div class="tr thead">
-            <div class="title dmg-idx">#</div>
-            <div class="title dmg-title">伤害类型</div>
-            <div>暴击伤害</div>
-            <div>平均伤害(计算暴击率)</div>
-          </div>
-          {{each dmgData dmg idx}}
-          <div class="dmg tr">
-            <div class="title dmg-idx">{{idx+1}}</div>
-            <div class="title dmg-title">{{dmg.title}}</div>
-            {{if dmg.dmg === "NaN"}}
-            <div class="value value-full">{{dmg.avg}}</div>
-            <div class="value value-none"></div>
-            {{else}}
-            <div class="value">{{dmg.dmg}}</div>
-            <div class="value">{{dmg.avg}}</div>
-            {{/if}}
-          </div>
-          {{/each}}
-        </div>
-        <div class="cont-footer dmg-desc">
-          使用命令<strong>#{{name}}伤害</strong>可以查看伤害详情，使用命令<strong>#角色面板帮助</strong>可查看帮助说明
-        </div>
-      </div>
-      {{/if}}
-
-      {{if mode === "profile"}}
-      <div class="artis">
-        <div>
-          <div class="item weapon">
-            <img src="{{_sys_res_path}}/genshin/logo/weapon/{{weapon.name}}.png"/>
-            <div class="head">
-              <strong>{{weapon.name}}</strong>
-              <div class="star star-{{weapon.rarity}}"></div>
-              <span>Lv.{{weapon.level}} <span
-                  class="affix affix-{{weapon.affix_level}}">精{{weapon.affix_level}}</span></span>
-            </div>
-          </div>
-          <div class="item stat">
-            <div><strong class="mark-{{markScore}}">{{markScore}}</strong><span>圣遗物评级</span></div>
-            <div><strong>{{totalMark}}</strong><span>圣遗物总分</span></div>
-          </div>
-        </div>
-        {{each reliquaries ds}}
-        <div class="item arti">
-          {{if ds.name && ds.main && ds.main[0] && ds.main[0]!="undefined"}}
-          <div class="arti-icon">
-            <img src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
-            <span>+{{ds.level}}</span>
-          </div>
-          <div class="head">
-            <strong>{{ds.name}}</strong>
-            <span class="mark mark-{{ds.markType}}"><span>{{ds.mark}}分</span> - {{ds.markType}}</span>
-          </div>
-          <ul class="detail">
-            <li class="arti-main"><span class="title">{{ds.main[0]}}</span><span class="val">+{{ds.main[1]}}</span></li>
-            {{each ds.attrs attr}}
-            {{if attr[0]}}
-            <li class="{{usefulMark[attr[0]] ? `useful`:`nouse`}}"><span class="title">{{attr[0]}}</span><span
-                class="val">+{{attr[1]}}</span></li>
-            {{/if}}
-            {{/each}}
-          </ul>
-          {{/if}}
-        </div>
-        {{/each}}
-      </div>
-      {{/if}}
-
-      {{if mode === "dmg"}}
-
-      {{if dmgCfg && dmgCfg.attr && dmgCfg.attr.length>0}}
-      <div class="dmg-calc dmg-cont cont">
-        <div class="cont-title">
-          词条伤害计算<span>#{{name}}伤害{{dmgCfg.userIdx+1}}: 当前计算为[{{dmgCfg.title}}]</span>
-        </div>
-        <div class="cont-table">
-          <div class="tr thead ">
-            <div class="td">词条变化</div>
-            {{each dmgCfg.attr attr}}
-            <div class="td">
-              <strong>{{attr.title}}</strong>
-              <span>+{{attr.text}}</span>
-            </div>
-            {{/each}}
-          </div>
-          {{each dmgRet row rowIdx}}
-          <div class="tr">
-            <div class="title">
-              <strong>{{dmgCfg.attr[rowIdx].title}}</strong>
-              <span>-{{dmgCfg.attr[rowIdx].text}}</span>
-            </div>
-            {{each row cell colIdx}}
-            {{if cell.type === "na"}}
-            <div class="td na">
-              <strong>-</strong>
-              <span>{{dmgCfg.basicRet.avg}}{{dmgCfg.basicRet.dmg!="NaN"?`/${dmgCfg.basicRet.dmg}`:''}}</span>
-            </div>
-            {{else}}
-            <div class="td {{cell.type}}">
-              <strong>{{cell.val}}</strong>
-
-              <span>{{cell.avg}}{{cell.dmg!="NaN"?`/${cell.dmg}`:''}}</span>
-            </div>
-            {{/if}}
-            {{/each}}
-          </div>
-          {{/each}}
-        </div>
-        <div class="cont-footer dmg-desc">
-          <ul>
-            <li>大数字的含义为圣遗物副词条置换后<strong>平均伤害</strong>的变化，下方的详情数字为<strong>平均伤害</strong>/<strong>暴击伤害</strong>。</li>
-            <li>关于<strong>平均伤害</strong>：是将暴击率计算在内的伤害期望，能反映综合的输出能力，不等于实际伤害数字。</li>
-            <li>可用于评估当前面板下圣遗物副词条的侧重方向。实际游戏情况更加复杂，结果供参考~</li>
-            <li>如需更换计算的伤害类型，可使用命令 <strong>#{{name}}伤害+序号</strong>来切换，序号参见伤害计算板块</li>
-
-          </ul>
-        </div>
-      </div>
-      {{/if}}
-
-      <div class="dmg-cont dmg-msg cont">
-        <div class="cont-title">Buff列表<span>部分Buff的触发条件以及层数可能影响实际伤害结果</span></div>
-        <div class="cont-table">
-          {{each dmgMsg msg}}
-          <div class="tr">
-            <div class="th">{{msg[0]}}</div>
-            <div class="td">{{msg[1]}}</div>
-          </div>
-          {{/each}}
-        </div>
-      </div>
-      {{/if}}
-      <div class="copyright">Created By Yunzai-Bot & Miao-Plugin</div>
     </div>
-  </body>
+    <ul class="attr">
-  <script type="text/javascript"></script>
+      <li><i class="i-hp"></i>生命值<strong>{{attr.hp}}</strong><span>(+{{attr.hpPlus}})</span></li>
-</html>
+      <li><i class="i-atk"></i>攻击力<strong>{{attr.atk}}</strong><span>(+{{attr.atkPlus}})</span></li>
+      <li><i class="i-def"></i>防御力<strong>{{attr.def}}</strong><span>(+{{attr.defPlus}})</span></li>
+      <li><i class="i-mastery"></i>元素精通<strong>{{attr.mastery}}</strong></li>
+      <li><i class="i-cr"></i>暴击率<strong>{{attr.cRate}}</strong></li>
+      <li><i class="i-cd"></i>暴击伤害<strong>{{attr.cDmg}}</strong></li>
+      <li><i class="i-re"></i>元素充能<strong>{{attr.recharge}}</strong></li>
+      <li><i class="i-dmg"></i>伤害加成<strong>{{attr.dmgBonus}}</strong></li>
+    </ul>
+  </div>
+  <div class="char-cons">
+    {{each cons con idx}}
+    <div class="cons-item">
+      <div class="talent-icon {{idx * 1 > avatar.actived_constellation_num * 1 ? 'off' : '' }}">
+        <img src="{{_res_path}}/meta/character/{{name}}/cons_{{idx}}.png"/>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{if dmgData.length > 0}}
+<div class="dmg-cont dmg-list cont">
+  <div class="cont-title">
+    伤害计算<span>目标为{{enemyLv}}级{{enemyName}}，如需调整等级可使用 #敌人等级{{enemyLv}} 来进行设置</span>
+  </div>
+  <div class="cont-table">
+    <div class="tr thead">
+      <div class="title dmg-idx">#</div>
+      <div class="title dmg-title">伤害类型</div>
+      <div>暴击伤害</div>
+      <div>平均伤害(计算暴击率)</div>
+    </div>
+    {{each dmgData dmg idx}}
+    <div class="dmg tr">
+      <div class="title dmg-idx">{{idx+1}}</div>
+      <div class="title dmg-title">{{dmg.title}}</div>
+      {{if dmg.dmg === "NaN"}}
+      <div class="value value-full">{{dmg.avg}}</div>
+      <div class="value value-none"></div>
+      {{else}}
+      <div class="value">{{dmg.dmg}}</div>
+      <div class="value">{{dmg.avg}}</div>
+      {{/if}}
+    </div>
+    {{/each}}
+  </div>
+  <div class="cont-footer dmg-desc">
+    使用命令<strong>#{{name}}伤害</strong>可以查看伤害详情，使用命令<strong>#角色面板帮助</strong>可查看帮助说明
+  </div>
+</div>
+{{/if}}
+
+{{if mode === "profile"}}
+<div class="artis">
+  <div>
+    <div class="item weapon">
+      <img src="{{_sys_res_path}}/genshin/logo/weapon/{{weapon.name}}.png"/>
+      <div class="head">
+        <strong>{{weapon.name}}</strong>
+        <div class="star star-{{weapon.rarity}}"></div>
+        <span>Lv.{{weapon.level}} <span
+            class="affix affix-{{weapon.affix_level}}">精{{weapon.affix_level}}</span></span>
+      </div>
+    </div>
+    <div class="item stat">
+      <div><strong class="mark-{{markScore}}">{{markScore}}</strong><span>圣遗物评级</span></div>
+      <div><strong>{{totalMark}}</strong><span>圣遗物总分</span></div>
+    </div>
+  </div>
+  {{each reliquaries ds}}
+  <div class="item arti">
+    {{if ds.name && ds.main && ds.main[0] && ds.main[0]!="undefined"}}
+    <div class="arti-icon">
+      <img src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
+      <span>+{{ds.level}}</span>
+    </div>
+    <div class="head">
+      <strong>{{ds.name}}</strong>
+      <span class="mark mark-{{ds.markType}}"><span>{{ds.mark}}分</span> - {{ds.markType}}</span>
+    </div>
+    <ul class="detail">
+      <li class="arti-main"><span class="title">{{ds.main[0]}}</span><span class="val">+{{ds.main[1]}}</span></li>
+      {{each ds.attrs attr}}
+      {{if attr[0]}}
+      <li class="{{usefulMark[attr[0]] ? `useful`:`nouse`}}"><span class="title">{{attr[0]}}</span><span
+          class="val">+{{attr[1]}}</span></li>
+      {{/if}}
+      {{/each}}
+    </ul>
+    {{/if}}
+  </div>
+  {{/each}}
+</div>
+{{/if}}
+
+{{if mode === "dmg"}}
+
+{{if dmgCfg && dmgCfg.attr && dmgCfg.attr.length>0}}
+<div class="dmg-calc dmg-cont cont">
+  <div class="cont-title">
+    词条伤害计算<span>#{{name}}伤害{{dmgCfg.userIdx+1}}: 当前计算为[{{dmgCfg.title}}]</span>
+  </div>
+  <div class="cont-table">
+    <div class="tr thead ">
+      <div class="td">词条变化</div>
+      {{each dmgCfg.attr attr}}
+      <div class="td">
+        <strong>{{attr.title}}</strong>
+        <span>+{{attr.text}}</span>
+      </div>
+      {{/each}}
+    </div>
+    {{each dmgRet row rowIdx}}
+    <div class="tr">
+      <div class="title">
+        <strong>{{dmgCfg.attr[rowIdx].title}}</strong>
+        <span>-{{dmgCfg.attr[rowIdx].text}}</span>
+      </div>
+      {{each row cell colIdx}}
+      {{if cell.type === "na"}}
+      <div class="td na">
+        <strong>-</strong>
+        <span>{{dmgCfg.basicRet.avg}}{{dmgCfg.basicRet.dmg!="NaN"?`/${dmgCfg.basicRet.dmg}`:''}}</span>
+      </div>
+      {{else}}
+      <div class="td {{cell.type}}">
+        <strong>{{cell.val}}</strong>
+
+        <span>{{cell.avg}}{{cell.dmg!="NaN"?`/${cell.dmg}`:''}}</span>
+      </div>
+      {{/if}}
+      {{/each}}
+    </div>
+    {{/each}}
+  </div>
+  <div class="cont-footer dmg-desc">
+    <ul>
+      <li>大数字的含义为圣遗物副词条置换后<strong>平均伤害</strong>的变化，下方的详情数字为<strong>平均伤害</strong>/<strong>暴击伤害</strong>。</li>
+      <li>关于<strong>平均伤害</strong>：是将暴击率计算在内的伤害期望，能反映综合的输出能力，不等于实际伤害数字。</li>
+      <li>可用于评估当前面板下圣遗物副词条的侧重方向。实际游戏情况更加复杂，结果供参考~</li>
+      <li>如需更换计算的伤害类型，可使用命令 <strong>#{{name}}伤害+序号</strong>来切换，序号参见伤害计算板块</li>
+
+    </ul>
+  </div>
+</div>
+{{/if}}
+
+<div class="dmg-cont dmg-msg cont">
+  <div class="cont-title">Buff列表<span>部分Buff的触发条件以及层数可能影响实际伤害结果</span></div>
+  <div class="cont-table">
+    {{each dmgMsg msg}}
+    <div class="tr">
+      <div class="th">{{msg[0]}}</div>
+      <div class="td">{{msg[1]}}</div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{/if}}
+{{/block}}

resources/character/detail.less

@@ -0,0 +1,848 @@
+
+body {
+  width: 600px;
+}
+
+.container {
+  width: 600px;
+  padding: 0;
+  background-size: cover;
+  overflow: hidden;
+}
+
+
+.basic {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.basic:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 8px;
+  top: 115px;
+  bottom: 0;
+  right: 8px;
+  box-shadow: 0 0 2px 0 #fff;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.main-pic {
+  width: 800px;
+  height: 500px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: -260px;
+  position: relative;
+  z-index: 2;
+}
+
+.detail {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  color: #fff;
+  z-index: 3;
+}
+
+.char-name {
+  font-size: 50px;
+  font-family: NZBZ;
+  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
+  text-align: right;
+}
+
+.char-lv {
+  font-family: Number;
+  margin-bottom: 20px;
+  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
+  text-align: right;
+}
+
+.attr {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.detail li {
+  width: 300px;
+  font-size: 17px;
+  list-style: none;
+  padding: 0 100px 0 35px;
+  position: relative;
+  font-family: YS;
+  height: 32px;
+  line-height: 32px;
+  text-shadow: 0 0 1px rgba(0, 0, 0, .5);
+}
+
+.attr li i {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  background-image: url("./imgs/icon.png");
+  background-size: auto 20px;
+  position: absolute;
+  left: 10px;
+  top: 8px;
+  opacity: .9;
+  transform: scale(.9);
+
+}
+
+.i-hp {
+  background-position: -20px 0;
+}
+
+.i-atk {
+  background-position: -40px 0;
+}
+
+.i-def {
+  background-position: -60px 0;
+}
+
+.i-mastery {
+  background-position: -80px 0;
+}
+
+.i-cr {
+  background-position: -100px 0;
+}
+
+.i-cd {
+  background-position: -140px 0;
+}
+
+.i-re {
+  background-position: -120px 0;
+}
+
+.i-dmg {
+  background-position: -160px 0;
+}
+
+.detail li:nth-child(even) {
+  background: rgba(0, 0, 0, .4)
+}
+
+.detail li:nth-child(odd) {
+  background: rgba(50, 50, 50, .4)
+}
+
+.detail li strong {
+  display: inline-block;
+  position: absolute;
+  right: 85px;
+  text-align: right;
+  font-family: Number, sans-serif;
+  font-weight: normal;
+}
+
+.detail li span {
+  position: absolute;
+  right: 0;
+  text-align: left;
+  width: 75px;
+  display: inline-block;
+  font-family: Number, sans-serif;
+  color: #90e800;
+  font-size: 15px;
+}
+
+.talent-icon {
+  width: 100px;
+  height: 100px;
+  padding: 5px;
+  display: table;
+  border-radius: 50%;
+  position: relative;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 90;
+}
+
+.talent-icon img,
+.talent-icon .talent-icon-img {
+  width: 46%;
+  height: 46%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -22% 0 0 -23%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.talent-icon span {
+  background: #fff;
+  width: 34px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 17px;
+  text-align: center;
+  border-radius: 5px;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  margin-left: -15px;
+  color: #000;
+  box-shadow: 0 0 5px 0 #000;
+  font-family: Number;
+}
+
+.talent-icon.talent-plus span {
+  background: #2e353e;
+  color: #ffdfa0;
+  font-weight: bold;
+  box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.talent-icon.talent-crown:after {
+  content: "";
+  display: block;
+  width: 28px;
+  height: 28px;
+  background: url("../character/imgs/crown.png") no-repeat;
+  background-size: contain;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  margin-left: -14px;
+}
+
+
+.char-talents {
+  display: flex;
+  width: 300px;
+  margin-bottom: 10px;
+}
+
+.char-cons {
+  display: flex;
+  width: 250px;
+  position: absolute;
+  bottom: 5px;
+  left: 20px;
+}
+
+.char-cons .talent-item,
+.char-talents .talent-item {
+  flex: 1;
+}
+
+.char-cons .talent-icon {
+  width: 50px;
+  height: 50px;
+  margin: 0 -5px
+}
+
+.char-cons .talent-icon.off {
+  filter: grayscale(100%);
+  opacity: .4;
+}
+
+
+.elem_anemo .talent-icon {
+  background-image: url(../common/bg/talent-anemo.png)
+}
+
+.elem_anemo .container {
+  background-image: url(../common/bg/bg-anemo.jpg);
+}
+
+
+.elem_cryo .talent-icon {
+  background-image: url(../common/bg/talent-cryo.png)
+}
+
+.elem_cryo .container {
+  background-image: url(../common/bg/bg-cryo.jpg);
+}
+
+
+.elem_electro .talent-icon {
+  background-image: url(../common/bg/talent-electro.png)
+}
+
+.elem_electro .container {
+  background-image: url(../common/bg/bg-electro.jpg);
+}
+
+
+.elem_geo .talent-icon {
+  background-image: url(../common/bg/talent-geo.png)
+}
+
+.elem_geo .container {
+  background-image: url(../common/bg/bg-geo.jpg);
+}
+
+
+.elem_hydro .talent-icon {
+  background-image: url(../common/bg/talent-hydro.png)
+}
+
+.elem_hydro .container {
+  background-image: url(../common/bg/bg-hydro.jpg);
+}
+
+
+.elem_pyro .talent-icon {
+  background-image: url(../common/bg/talent-pyro.png)
+}
+
+.elem_pyro .container {
+  background-image: url(../common/bg/bg-pyro.jpg);
+}
+
+
+/***  dmg ***/
+.cont {
+  border-radius: 10px;
+  background: url("../common/cont/card-bg.png") top left repeat-x;
+  background-size: auto 100%;
+  margin: 5px 15px 5px 10px;
+  position: relative;
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
+  overflow: hidden;
+  color: #fff;
+  font-size: 16px;
+}
+
+.dmg-cont {
+  display: table;
+  width: calc(100% - 25px);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.dmg-mode .dmg-list .cont-footer {
+  display: none;
+}
+
+.cont-title {
+  background: rgba(0, 0, 0, .4);
+  color: #d3bc8e;
+  font-family: YS;
+  padding: 10px 20px;
+  text-align: left;
+}
+
+.cont-title span {
+  font-size: 12px;
+  color: #aaa;
+  margin-left: 10px;
+  font-family: Number, YS;
+  font-weight: normal;
+}
+
+.cont-footer {
+  padding: 10px 15px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  font-family: YS;
+  font-weight: normal;
+}
+
+.cont-table {
+  display: table;
+  width: 100%;
+}
+
+.dmg-cont .tr {
+  display: table-row;
+}
+
+.dmg-cont .tr:nth-child(even) {
+  background: rgba(0, 0, 0, .4);
+}
+
+.dmg-cont .tr:nth-child(odd) {
+  background: rgba(50, 50, 50, .4);
+}
+
+.dmg-cont .tr > div {
+  display: table-cell;
+  box-shadow: 0 0 1px 0 #fff;
+}
+
+.dmg-cont .tr > div.value-full {
+  display: table;
+  width: 200%;
+}
+
+.dmg-cont .tr > div.value-none {
+  box-shadow: none;
+}
+
+.dmg-cont .thead {
+  text-align: center;
+}
+
+.dmg-cont .thead > div {
+  font-family: YS;
+  color: #d3bc8e;
+  background: rgba(0, 0, 0, .4);
+  line-height: 40px;
+  height: 40px;
+}
+
+
+.dmg-cont .title,
+.dmg-cont .th {
+  font-family: YS;
+  color: #d3bc8e;
+  padding-right: 15px;
+  text-align: right;
+  background: rgba(0, 0, 0, .4);
+  min-width: 100px;
+}
+
+.profile-mode .dmg-idx {
+  display: none !important;
+}
+
+.profile-mode .dmg-title {
+  width: 33.3333%;
+}
+
+.dmg-mode .dmg-idx {
+  display: table-cell;
+  width: 5%;
+  min-width: initial;
+  padding-right: 0;
+  text-align: center;
+}
+
+.dmg-mode .dmg-title {
+  width: 31%;
+  min-width: initial;
+  text-align: left;
+  padding-left: 10px;
+  padding-right: 0;
+}
+
+
+.dmg .value {
+  text-align: center;
+  color: #fff;
+  display: block;
+  height: 40px;
+  font-size: 18px;
+  font-family: Number;
+  line-height: 40px;
+  width: 32%
+}
+
+.dmg-notice {
+  font-size: 12px;
+  text-align: right;
+  color: #f5f5f5;
+  margin-right: 15px;
+}
+
+
+/*** artis***/
+.artis {
+  display: flex;
+  width: 600px;
+  flex-wrap: wrap;
+  margin-bottom: 5px;
+  padding: 5px;
+}
+
+.artis .item {
+  width: 185px;
+  border-radius: 10px;
+  background: url("../common/cont/card-bg.png") top left repeat-x;
+  background-size: auto 100%;
+  margin: 5px;
+  height: 210px;
+  position: relative;
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
+}
+
+
+.artis .item .arti-icon {
+  width: 60px;
+  height: 60px;
+  position: absolute;
+  left: 2px;
+  top: 3px;
+}
+
+.artis .item .arti-icon span {
+  position: absolute;
+  right: 2px;
+  bottom: 0;
+  margin-left: 5px;
+  background: rgba(0, 0, 0, .5);
+  border-radius: 5px;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 3px;
+  color: #fff;
+  font-size: 12px;
+  display: block;
+}
+
+.artis .item .arti-icon img {
+  width: 60px;
+  height: 60px;
+}
+
+.artis .head {
+  color: #fff;
+  padding: 12px 0 8px 68px;
+}
+
+.artis .head strong {
+  font-size: 15px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  font-font: YS;
+}
+
+.artis .head span {
+  font-size: 14px;
+}
+
+.artis .head .mark {
+  font-family: Number, YS;
+}
+
+.mark-ACE,
+.mark-ACE² {
+  color: #e85656;
+  font-weight: bold;
+}
+
+.mark-SSS,
+.mark-SS {
+  color: #ffe699;
+  font-weight: bold;
+}
+
+.mark-S,
+.mark-A {
+  color: #d699ff;
+  font-weight: bold;
+}
+
+.arti-main {
+  color: #fff;
+  padding: 6px 15px;
+}
+
+
+.artis ul.detail {
+  width: 100%;
+  padding: 0;
+  position: initial;
+  font-family: YS;
+}
+
+.artis ul.detail li {
+  padding: 0 3px;
+  font-size: 14px;
+  position: initial;
+  width: 100%;
+  display: table;
+  line-height: 26px;
+  height: 26px;
+}
+
+
+.artis ul.detail li.nouse span {
+  color: #888;
+}
+
+.artis ul.detail li.arti-main {
+  font-size: 16px;
+  padding: 3px 3px;
+  font-weight: bold;
+}
+
+.artis ul.detail li span {
+  position: initial;
+  display: table-cell;
+  color: #fff;
+  font-family: YS;
+}
+
+.artis ul.detail li span.title {
+  text-align: left;
+  padding-left: 10px;
+}
+
+.artis ul.detail li span.val {
+  text-align: right;
+  padding-right: 10px;
+  font-family: Number;
+}
+
+.artis .weapon .star {
+  height: 20px;
+  width: 100px;
+  background: url("../common/item/star.png") no-repeat;
+  background-size: 100px 100px;
+  transform: scale(0.8);
+  transform-origin: 100px 10px;
+  display: inline-block;
+}
+
+.artis .weapon .star.star-2 {
+  background-position: 0 -20px;
+}
+
+.artis .weapon .star.star-3 {
+  background-position: 0 -40px;
+}
+
+.artis .weapon .star.star-4 {
+  background-position: 0 -60px;
+}
+
+.artis .weapon .star.star-5 {
+  background-position: 0 -80px;
+}
+
+
+.artis .weapon {
+  overflow: hidden;
+  height: 100px;
+}
+
+.artis .weapon img {
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 2;
+}
+
+.artis .weapon .head {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  text-align: right;
+  padding: 13px 12px 13px 0;
+  z-index: 3;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
+}
+
+.artis .weapon .head strong {
+  font-size: 18px;
+  margin-bottom: 3px;
+  font-weight: normal;
+  font-family: YS;
+}
+
+.artis .weapon .head > span {
+  display: block;
+
+}
+
+.artis .weapon span {
+  font-size: 16px;
+}
+
+.artis .weapon .affix {
+  color: #000;
+  padding: 0 7px;
+  border-radius: 4px;
+  margin-left: 5px;
+  font-size: 16px;
+}
+
+
+.artis .weapon .affix-1 {
+  box-shadow: 0 0 4px 0 #a3a3a3 inset;
+  background: #ebebebaa;
+}
+
+.artis .weapon .affix-2 {
+  box-shadow: 0 0 4px 0 #51b72fbd inset;
+  background: #ddffdeaa;
+}
+
+.artis .weapon .affix-3 {
+  box-shadow: 0 0 4px 0 #396cdecf inset;
+  background: #ddebffaa;
+}
+
+.artis .weapon .affix-4 {
+  box-shadow: 0 0 4px 0 #c539debf inset;
+  background: #ffddf0aa;
+}
+
+.artis .weapon .affix-5 {
+  box-shadow: 0 0 4px 0 #deaf39 inset;
+  background: #fff6dd;
+}
+
+.artis .stat {
+  height: 100px;
+  margin-top: 10px;
+}
+
+.artis .stat {
+  display: table-row;
+  padding: 18px 10px;
+  display: table;
+}
+
+.artis .stat > div {
+  display: table-cell;
+  text-align: center;
+  color: #fff;
+}
+
+.artis .stat strong {
+  display: block;
+  height: 40px;
+  font-size: 30px;
+  font-family: Number;
+  line-height: 40px;
+}
+
+.dmg-msg {
+  font-family: Number, YS;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.dmg-msg .thead > div {
+  text-align: left;
+  padding-left: 10px;
+}
+
+.dmg-msg .th {
+  text-align: left;
+  padding-left: 10px;
+}
+
+.dmg-msg .tr .td {
+  padding: 8px 10px;
+}
+
+.dmg-msg .info {
+  font-size: 12px;
+  text-align: left;
+  padding-left: 10px;
+  font-weight: normal;
+}
+
+
+.dmg-calc {
+
+}
+
+.dmg-calc .thead {
+
+}
+
+.dmg-calc .thead > div {
+  line-height: initial;
+}
+
+.dmg-calc .cont-table div {
+  vertical-align: middle;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.dmg-calc .title {
+  text-align: center;
+  padding-right: 0;
+  min-width: 70px;
+
+}
+
+.dmg-calc .td {
+  padding: 5px 0;
+}
+
+.dmg-calc strong {
+  font-weight: normal;
+  display: block;
+  font-family: Number, YS;
+}
+
+.dmg-calc span {
+  font-size: 12px;
+  color: #aaa;
+  font-family: Number, YS;
+}
+
+.dmg-calc .na,
+.dmg-calc .eq {
+  background: rgba(50, 50, 50, .5);
+}
+
+.dmg-calc .na {
+  color: #888;
+}
+
+.dmg-calc .lt {
+  background: rgba(23, 112, 41, 0.5);
+}
+
+.dmg-calc .gt {
+  background: rgba(112, 23, 23, 0.5);
+}
+
+.dmg-desc {
+  color: #aaa;
+}
+
+.dmg-desc ul {
+  padding-left: 10px;
+}
+
+.dmg-desc ul li {
+  color: #aaa;
+}
+
+.dmg-desc strong {
+  color: #d3bc8e;
+  display: inline;
+  padding: 0 3px;
+  font-weight: normal;
+}
+
+
+.artis .stat span {
+  font-size: 13px;
+  line-height: 20px;
+  color: #bbb;
+}
+
+.char-优菈 .main-pic {
+  margin-left: -175px;
+}
+
+.char-烟绯 .main-pic {
+  margin-left: -135px;
+}
+
+.char-香菱 .main-pic {
+  margin-left: -195px;
+}
+
+.char-迪奥娜 .main-pic {
+  margin-left: -180px;
+}
+
+.char-可莉 .main-pic {
+  margin-left: -210px;
+}

resources/common/common.css

@@ -37,7 +37,7 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
+  font-family: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
   transform: scale(1.4);
   transform-origin: 0 0;
   width: 600px;
@@ -89,7 +89,13 @@ body {
   position: relative;
   padding-left: 10px;
   text-shadow: 1px 1px 1px #000;
-  margin-bottom: 10px;
+  margin: 10px 0;
+}
+.copyright .version {
+  font-size: 13px;
+  color: #d3bc8e;
+  display: inline-block;
+  padding: 0 3px;
 }
 /*  */
 .cons {
@@ -225,7 +231,7 @@ body {
   background: rgba(0, 0, 0, 0.4);
   box-shadow: 0 0 1px 0 #fff;
   color: #d3bc8e;
-  font-family: YS;
+  font-family: Number, YS;
   padding: 10px 20px;
   text-align: left;
   border-radius: 10px 10px 0 0;
@@ -309,4 +315,10 @@ ul.cont-msg li strong {
   min-width: 100px;
   vertical-align: middle;
 }
+.logo {
+  font-size: 18px;
+  text-align: center;
+  color: #fff;
+  margin: 20px 0 10px 0;
+}
 /*# sourceMappingURL=common.css.map */

resources/common/common.less

@@ -43,7 +43,7 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
+  font-family: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
   transform: scale(1.4);
   transform-origin: 0 0;
   width: 600px;
@@ -107,9 +107,17 @@ body {
   position: relative;
   padding-left: 10px;
   text-shadow: 1px 1px 1px #000;
-  margin-bottom: 10px;
+  margin: 10px 0;
+
+  .version {
+    font-size: 13px;
+    color: #d3bc8e;
+    display: inline-block;
+    padding: 0 3px;
+  }
 }
 
+
 /*  */
 
 .cons {
@@ -122,10 +130,6 @@ body {
 }
 
 
-
-
-
-
 .cons(@idx, @bg, @color:#fff) {
   .cons-@{idx} {
     background: @bg;
@@ -194,7 +198,7 @@ each(@elems, {
   background: rgba(0, 0, 0, .4);
   box-shadow: 0 0 1px 0 #fff;
   color: #d3bc8e;
-  font-family: YS;
+  font-family: Number, YS;
   padding: 10px 20px;
   text-align: left;
   border-radius: 10px 10px 0 0;
@@ -294,4 +298,11 @@ ul.cont-msg li strong {
   background: rgba(0, 0, 0, .4);
   min-width: 100px;
   vertical-align: middle;
-}
+}
+
+.logo {
+  font-size: 18px;
+  text-align: center;
+  color: #fff;
+  margin: 20px 0 10px 0;
+}

resources/common/layout/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+    <link rel="shortcut icon" href="#"/>
+    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+    {{block 'css'}}
+    {{/block}}
+  </head>
+  <body class="elem-{{element||elem||`hydro`}} {{displayMode || mode || `default`}}-mode  {{bodyClass}}" {{sys.scale}}>
+    <div class="container" id="container">
+      {{block 'main'}}{{/block}}
+      <div class="copyright">{{@sys.copyright}}</div>
+    </div>
+  </body>
+</html>

resources/common/layout/elem.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+    <link rel="shortcut icon" href="#"/>
+    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+    {{block 'css'}}
+    {{/block}}
+  </head>
+  <body class="elem-{{element||elem||`hydro`}} {{displayMode || mode || `default`}}-mode {{bodyClass}}" {{sys.scale}}>
+    <div class="container elem-bg" id="container">
+      {{block 'main'}}{{/block}}
+      <div class="copyright">{{@sys.copyright}}</div>
+    </div>
+  </body>
+</html>

resources/common/tpl/artis-detail.css

@@ -113,4 +113,4 @@
   width: 52px;
   height: 52px;
 }
-/*# sourceMappingURL=artis-detail.css.map */
+/*# sourceMappingURL=artis-detail.less.map */

resources/help/index.html

@@ -1,41 +1,35 @@
-<!DOCTYPE html>
+{{extend defaultLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/help/index.css"/>
-  </head>
-  <body class="body_box" {{cfgScale}}>
-    <div id="container" class="container">
-      <div class="info_box">
-        <div class="head-box type{{bgType}}">
-          <div class="title">使用帮助</div>
-          <div class="label">Yunzai-Bot & Miao-Plugin</div>
-        </div>
-      </div>
 
-      {{each helpCfg helpGroup}}
+{{block 'css'}}
-      <div class="cont-box">
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/help/index.css"/>
-        <div class="help-group">{{helpGroup.group}}</div>
+{{/block}}
-        <div class="help-table">
+
-          {{each helpGroup.list help idx}}
+{{block 'main'}}
-          {{if idx%3 == 0}}
+<div class="info_box">
-          <div class="tr">
+  <div class="head-box type{{bgType}}">
-            {{/if}}
+    <div class="title">使用帮助</div>
-            <div class="td">
+    <div class="label">Yunzai-Bot & Miao-Plugin</div>
-              <span class="help-icon" style="{{help.css}}"></span>
+  </div>
-              <strong class="help-title">{{help.title}}</strong>
+</div>
-              <span class="help-desc">{{help.desc}}</span>
+
-            </div>
+{{each helpCfg helpGroup}}
-            {{if idx%3 ==2 || idx == helpGroup.list.length -1}}
+<div class="cont-box">
-          </div>
+  <div class="help-group">{{helpGroup.group}}</div>
-          {{/if}}
+  <div class="help-table">
-          {{/each}}
+    {{each helpGroup.list help idx}}
-        </div>
+    {{if idx%3 == 0}}
+    <div class="tr">
+      {{/if}}
+      <div class="td">
+        <span class="help-icon" style="{{help.css}}"></span>
+        <strong class="help-title">{{help.title}}</strong>
+        <span class="help-desc">{{help.desc}}</span>
       </div>
-      {{/each}}
+      {{if idx%3 ==2 || idx == helpGroup.list.length -1}}
-      <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
     </div>
-  </body>
+    {{/if}}
-</html>
+    {{/each}}
+  </div>
+</div>
+{{/each}}
+{{/block}}

resources/help/version-info.css

@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: Number, YS2;
+  transform: scale(1.3);
+  transform-origin: 0 0;
+  width: 520px;
+}
+.container {
+  width: 520px;
+  padding: 10px 0 10px 0;
+  background-size: 100% 100%;
+}
+.log-cont {
+  margin-bottom: 10px;
+}
+.log-cont .cont-title {
+  font-size: 16px;
+  padding: 10px 20px 6px;
+}
+.log-cont .cont-title.current-version {
+  font-size: 20px;
+}
+.log-cont .cont-body {
+  font-family: Number, YS2;
+}
+.log-cont ul {
+  font-size: 14px;
+  padding-left: 20px;
+}
+.log-cont ul li {
+  margin: 3px 0;
+}
+.log-cont ul.sub-log-ul li {
+  margin: 1px 0;
+}
+.log-cont .cmd {
+  font-family: Number, YS;
+  color: #d3bc8e;
+  display: inline-block;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 0 3px;
+  margin: 1px 3px;
+}
+.log-cont .new {
+  display: inline-block;
+  width: 18px;
+  margin: 0 -3px 0 1px;
+}
+.log-cont .new:before {
+  content: "NEW";
+  font-family: Number;
+  display: inline-block;
+  transform: scale(0.6);
+  transform-origin: 0 0;
+  color: #d3bc8e;
+  white-space: nowrap;
+}
+/*# sourceMappingURL=version-info.css.map */

resources/help/version-info.html

@@ -0,0 +1,33 @@
+{{extend elemLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/help/version-info.css"/>
+{{/block}}
+
+{{block 'main'}}
+{{each changelogs ds idx}}
+<div class="cont log-cont">
+  {{if idx === 0 }}
+  <div class="cont-title current-version">当前版本 {{ds.version}}</div>
+  {{else}}
+  <div class="cont-title">喵喵版本 {{ds.version}}</div>
+  {{/if}}
+  <div class="cont-body">
+    <ul class="log-ul">
+      {{each ds.logs log}}
+      <li>
+        <p>{{@log.title}}</p>
+        {{if log.logs.length > 0}}
+        <ul class="sub-log-ul">
+          {{each log.logs ls}}
+          <li>{{@ls}}</li>
+          {{/each}}
+        </ul>
+        {{/if}}
+      </li>
+      {{/each}}
+    </ul>
+  </div>
+</div>
+{{/each}}
+{{/block}}

resources/help/version-info.less

@@ -0,0 +1,83 @@
+.linear-bg(@color) {
+  background-image: linear-gradient(to right, @color, @color 80%, fade(@color, 0) 100%);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: Number, YS2;
+  transform: scale(1.3);
+  transform-origin: 0 0;
+  width: 520px;
+}
+
+.container {
+  width: 520px;
+  padding: 10px 0 10px 0;
+  background-size: 100% 100%;
+}
+
+.log-cont {
+  margin-bottom: 10px;
+
+  .cont-title {
+    font-size: 16px;
+    padding: 10px 20px 6px;
+
+    &.current-version {
+      font-size: 20px;
+    }
+  }
+
+  .cont-body {
+    font-family: Number, YS2;
+  }
+
+  ul {
+    font-size: 14px;
+    padding-left: 20px;
+
+    li {
+      margin: 3px 0;
+    }
+
+    &.sub-log-ul {
+      li {
+        margin: 1px 0;
+      }
+    }
+  }
+
+  .cmd {
+    font-family: Number, YS;
+    color: #d3bc8e;
+    display: inline-block;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 0 3px;
+    margin: 1px 3px;
+  }
+
+  .new {
+    display: inline-block;
+    width: 18px;
+    margin: 0 -3px 0 1px;
+  }
+
+  .new:before {
+    content: "NEW";
+    font-family: Number;
+    display: inline-block;
+    transform: scale(0.6);
+    transform-origin: 0 0;
+    color: #d3bc8e;
+    white-space: nowrap;
+  }
+}

resources/meta/character/凯亚/calc.js

@@ -0,0 +1,11 @@
+export const details = [{
+  title: "霜袭E伤害",
+  dmg: ({ talent }, dmg) => dmg(talent.e['技能伤害'], 'e')
+}, {
+  title: "Q单段伤害",
+  dmg: ({ talent }, dmg) => dmg(talent.q['技能伤害'], 'q')
+}];
+
+export const mainAttr = "atk,cpct,cdmg";
+
+export const buffs = [];

resources/meta/character/安柏/calc.js

@@ -0,0 +1,39 @@
+export const details = [{
+  title: "重击伤害",
+  dmg: ({ talent }, dmg) => dmg(talent.a['满蓄力瞄准射击'], 'a2')
+}, {
+  title: "兔兔伯爵爆炸",
+  dmg: ({ talent }, dmg) => dmg(talent.e['爆炸伤害'], 'e')
+}, {
+  title: "兔兔伯爵蒸发",
+  check: ({ cons }) => cons < 2,
+  dmg: ({ talent }, dmg) => dmg(talent.e['爆炸伤害'], 'e', 'zf')
+}, {
+  title: "引爆兔兔伯爵蒸发",
+  cons: 2,
+  dmg: ({ talent }, dmg) => dmg(talent.e['爆炸伤害'] * 3, 'e', 'zf')
+}, {
+  title: "Q箭雨总伤害",
+  params: { q: true },
+  dmg: ({ talent }, dmg) => dmg(talent.q['箭雨总伤害'], 'q')
+}];
+
+export const mainAttr = "atk,cpct,cdmg,mastery";
+
+export const buffs = [{
+  title: "安柏天赋：命中弱点后攻击力提升15%",
+  data: {
+    atkPct: 15
+  }
+}, {
+  title: "安柏被动：Q暴击率提高10%",
+  data: {
+    qCpct: 10
+  }
+}, {
+  title: "元素精通：蒸发融化伤害提高[zf]%",
+  mastery: "zf,rh"
+}, {
+  title: "安柏2命：瞄准引爆兔兔伯爵伤害提高200%",
+  cons: 2
+}];

resources/meta/character/迪奥娜/calc.js

@@ -0,0 +1,36 @@
+export const details = [{
+  title: "长按E总伤害",
+  dmg: ({ talent }, dmg) => dmg(talent.e['猫爪伤害'] * 5, 'e')
+}, {
+  title: "长按E总伤害",
+  dmg: ({ talent, attr, calc }, { shield }) =>
+    shield(talent.e['护盾基础吸收量2'][0] * calc(attr.hp) / 100 + talent.e['护盾基础吸收量2'][1] * 1)
+}, ({ cons }) => {
+  return {
+    title: `${cons === 6 ? "半血" : ""}Q每跳治疗`,
+    dmg: ({ talent, calc, attr }, { heal }) =>
+      heal(talent.q['持续治疗量2'][0] * calc(attr.hp) / 100 + talent.q['持续治疗量2'][1] * 1)
+  }
+}];
+
+export const mainAttr = "atk,hp,cpct,cdmg";
+
+export const buffs = [{
+  title: "迪奥娜天赋：长按E获得75%护盾吸收量加成",
+  data: {
+    shield: 75
+  }
+}, {
+  title: "迪奥娜2命：猫爪冻冻造成的伤害提高15%，护盾吸收量提高15%",
+  cons: 2,
+  data: {
+    eDmg: 15,
+    shield: 15
+  }
+}, {
+  title: "迪奥娜6命：生命值低于50%时受治疗加成提升30%",
+  cons: 6,
+  data: {
+    heal: 30
+  }
+}];

resources/stat/abyss-pct.html

@@ -1,55 +1,47 @@
-<!DOCTYPE html>
+{{extend defaultLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
-    <link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
-  </head>
-  <body id="container" class="body_box" {{cfgScale}}>
-    <div class="container">
-      <div class="info_box">
-        <div class="head-box type{{bgType}}">
-          {{if chooseFloor == -1}}
-          <div class="title">深渊出场率统计</div>
-          <div class="label">全角色出场率统计（出场记录/总记录）</div>
-          {{else}}
-          <div class="title">深渊第{{floorName[chooseFloor]}}出场率</div>
-          <div class="label">全角色出场率统计（出场记录/总记录）</div>
-          {{/if}}
-          <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
-        </div>
-        <% let pct = function (num) {
-        return (num * 100).toFixed(2);
-        } %>
-        {{each abyss ds}}
-        {{if chooseFloor == -1 || chooseFloor == ds.floor}}
-        <div class="info_box_border">
-          <div class="line_box">
-            <span class="line"></span>
-            <span class="text">第{{floorName[ds.floor]}}</span>
-            <span class="line"></span>
-          </div>
-          <div class="card-list">
-            {{each ds.avatars char}}
-            <div class="item star{{char.star == 4? 4:5}}">
-              <img class="role"
-                   src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png"
-              />
-              <div class="num_name">{{pct(char.value)}}%</div>
-            </div>
-            {{/each}}
-          </div>
-        </div>
 
-        {{/if}}
+{{block 'css'}}
-        {{/each}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
-        <p class="notice notice-center"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
-        <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
+{{/block}}
-      </div>
+
+{{block 'main'}}
+<div class="info_box">
+  <div class="head-box type{{bgType}}">
+    {{if chooseFloor == -1}}
+    <div class="title">深渊出场率统计</div>
+    <div class="label">全角色出场率统计（出场记录/总记录）</div>
+    {{else}}
+    <div class="title">深渊第{{floorName[chooseFloor]}}出场率</div>
+    <div class="label">全角色出场率统计（出场记录/总记录）</div>
+    {{/if}}
+    <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
+  </div>
+  <% let pct = function (num) {
+  return (num * 100).toFixed(2);
+  } %>
+  {{each abyss ds}}
+  {{if chooseFloor == -1 || chooseFloor == ds.floor}}
+  <div class="info_box_border">
+    <div class="line_box">
+      <span class="line"></span>
+      <span class="text">第{{floorName[ds.floor]}}</span>
+      <span class="line"></span>
     </div>
+    <div class="card-list">
+      {{each ds.avatars char}}
+      <div class="item star{{char.star == 4? 4:5}}">
+        <img class="role"
+             src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png"
+        />
+        <div class="num_name">{{pct(char.value)}}%</div>
+      </div>
+      {{/each}}
+    </div>
+  </div>
 
-  </body>
+  {{/if}}
-</html>
+  {{/each}}
+  <p class="notice notice-center"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
+</div>
+{{/block}}

resources/stat/abyss-team.html

@@ -1,74 +1,65 @@
-<!DOCTYPE html>
+{{extend defaultLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-team.css?v=1.0"/>
-    <link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
-  </head>
-  <body id="container" class="body_box" {{cfgScale}}>
-    <div class="container">
-      <div class="info_box">
-        <div class="head-box type{{bgType}}">
-          <div class="title">深渊配队建议</div>
-          <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
-        </div>
 
-        <div class="cont">
+{{block 'css'}}
-          <div class="cont-title">深渊配队说明</div>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
-          <div class="cont-body">
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-team.css?v=1.0"/>
-            <ul class="cont-msg">
+{{/block}}
-              <li>根据<strong>当前账号的角色练度</strong>及本期深渊出场数据，推荐较匹配的配队方案</li>
-              <li>若当前记录可用配队方案少于4组时，会使用未持有角色的方案进行补充</li>
-              <li>深渊出场数据来自<strong>胡桃API</strong>，为SnapGenshin用户自主上传的深渊挑战记录，感谢SG团队</li>
-              <li>月初及月中深渊刚刷新后挑战数据可能不足，请等待几天之后数据会逐步稳定</li>
-              <li>配队列表<strong>仅供参考</strong>，可根据账号实际情况及个人倾向进行灵活调整</li>
-            </ul>
-          </div>
-        </div>
 
-        {{each teams floorTeam floor}}
+{{block 'main'}}
-        <div class="cont">
+<div class="info_box">
+  <div class="head-box type{{bgType}}">
+    <div class="title">深渊配队建议</div>
+    <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
+  </div>
 
-          <div class="cont-table">
+  <div class="cont">
-            <div class="tr thead">
+    <div class="cont-title">深渊配队说明</div>
-              <div>{{floor}}层</div>
+    <div class="cont-body">
-              <div>上半</div>
+      <ul class="cont-msg">
-              <div>下半</div>
+        <li>根据<strong>当前账号的角色练度</strong>及本期深渊出场数据，推荐较匹配的配队方案</li>
-            </div>
+        <li>若当前记录可用配队方案少于4组时，会使用未持有角色的方案进行补充</li>
-            {{each floorTeam team idx}}
+        <li>深渊出场数据来自<strong>胡桃API</strong>，为SnapGenshin用户自主上传的深渊挑战记录，感谢SG团队</li>
-            <div class="tr">
+        <li>月初及月中深渊刚刷新后挑战数据可能不足，请等待几天之后数据会逐步稳定</li>
-              <div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}次记录</span></div>
+        <li>配队列表<strong>仅供参考</strong>，可根据账号实际情况及个人倾向进行灵活调整</li>
-              {{each team teamData key}}
+      </ul>
-              {{if key === "up" || key === "down"}}
+    </div>
-              <div>
+  </div>
-                <div class="card-list">
-                  {{each teamData.teamArr id}}
-                  <div
-                      class="card star{{avatars[id].star == 4 ? 4:5}} {{avatars[id].level*1 === 0 ? 'no-character':'has-character'}}">
-                    <img class="role"
-                         src="{{_sys_res_path}}/genshin/logo/role/{{avatars[id].name}}.png"
-                    />
-                    <span class="cons cons-{{avatars[id].cons}} for-has">{{avatars[id].cons}}</span>
-                    <span class="lvl for-has">Lv.{{avatars[id].level}}</span>
-                    <span class="for-no no-label">暂无</span>
-                  </div>
 
-                  {{/each}}
+  {{each teams floorTeam floor}}
-                </div>
+  <div class="cont">
-              </div>
+
-              {{/if}}
+    <div class="cont-table">
-              {{/each}}
+      <div class="tr thead">
+        <div>{{floor}}层</div>
+        <div>上半</div>
+        <div>下半</div>
+      </div>
+      {{each floorTeam team idx}}
+      <div class="tr">
+        <div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}次记录</span></div>
+        {{each team teamData key}}
+        {{if key === "up" || key === "down"}}
+        <div>
+          <div class="card-list">
+            {{each teamData.teamArr id}}
+            <div
+                class="card star{{avatars[id].star == 4 ? 4:5}} {{avatars[id].level*1 === 0 ? 'no-character':'has-character'}}">
+              <img class="role"
+                   src="{{_sys_res_path}}/genshin/logo/role/{{avatars[id].name}}.png"
+              />
+              <span class="cons cons-{{avatars[id].cons}} for-has">{{avatars[id].cons}}</span>
+              <span class="lvl for-has">Lv.{{avatars[id].level}}</span>
+              <span class="for-no no-label">暂无</span>
             </div>
             {{/each}}
           </div>
         </div>
+        {{/if}}
         {{/each}}
-        <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
       </div>
+      {{/each}}
     </div>
-
+  </div>
-  </body>
+  {{/each}}
-</html>
+</div>
+{{/block}}

resources/stat/character.html

@@ -1,92 +1,86 @@
-<!DOCTYPE html>
+{{extend defaultLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/character.css?v=1.0"/>
-    <link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
-    <% let pct = function (num) {
-    return (num * 100).toFixed(2);
-    } %>
-  </head>
-  <body id="container" class="body_box" {{cfgScale}}>
-    <div class="container">
-      <div class="info_box">
-        <div class="head-box type{{bgType}}">
-          {{if mode === "char"}}
-          <div class="title">角色持有率统计</div>
-          <div class="label">全角色综合持有率统计</div>
-          {{else}}
-          <div class="title">角色{{conNum == -1 ? "命座" : "零一二三四五满"[conNum]+"命"}}分布统计</div>
-          <div class="label">统计所有角色命座，无论角色是否出场</div>
-          {{/if}}
 
-          <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
+{{block 'css'}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/character.css?v=1.0"/>
+{{/block}}
+
+<% let pct = function (num) {
+return (num * 100).toFixed(2);
+} %>
+
+{{block 'main'}}
+
+<div class="info_box">
+  <div class="head-box type{{bgType}}">
+    {{if mode === "char"}}
+    <div class="title">角色持有率统计</div>
+    <div class="label">全角色综合持有率统计</div>
+    {{else}}
+    <div class="title">角色{{conNum == -1 ? "命座" : "零一二三四五满"[conNum]+"命"}}分布统计</div>
+    <div class="label">统计所有角色命座，无论角色是否出场</div>
+    {{/if}}
+
+    <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
+  </div>
+
+  <div class="data-box">
+    <div class="char-list">
+      <div class="avatar th">
+        <div class="index">#</div>
+        <div class="name">
+          角色
         </div>
+        <div class="lvl">持有率</div>
+        <div class="char-cons">
+          <div class="cons-pct">
+            <div class="cons-n0">0命</div>
+            <div class="cons-1">1命</div>
+            <div class="cons-2">2命</div>
+            <div class="cons-3">3命</div>
+            <div class="cons-4">4命</div>
+            <div class="cons-5">5命</div>
+            <div class="cons-6">6命</div>
+            {{if mode === "char"}}
+            <div class="life_bg">无</div>
+            {{/if}}
+          </div>
 
-        <div class="data-box">
+        </div>
-          <div class="char-list">
+      </div>
-            <div class="avatar th">
+      {{each chars char idx}}
-              <div class="index">#</div>
+      <div class="avatar">
-              <div class="name">
+        <div class="index star{{char.star}}">{{idx+1}}</div>
-                角色
+        <div class="name_cont star{{char.star}}">
-              </div>
+          <div class="name">
-              <div class="lvl">持有率</div>
+            <div class="avatar_img">
-              <div class="char-cons">
+              <img src="{{_sys_res_path}}genshin/logo/side/{{char.name}}.png" onerror="whenError(this)"/>
-                <div class="cons-pct">
-                  <div class="cons-n0">0命</div>
-                  <div class="cons-1">1命</div>
-                  <div class="cons-2">2命</div>
-                  <div class="cons-3">3命</div>
-                  <div class="cons-4">4命</div>
-                  <div class="cons-5">5命</div>
-                  <div class="cons-6">6命</div>
-                  {{if mode === "char"}}
-                  <div class="life_bg">无</div>
-                  {{/if}}
-                </div>
-
-              </div>
             </div>
-            {{each chars char idx}}
+            <div class="avatar_name">
-            <div class="avatar">
+              {{abbr[char.name] || char.name}}
-              <div class="index star{{char.star}}">{{idx+1}}</div>
-              <div class="name_cont star{{char.star}}">
-                <div class="name">
-                  <div class="avatar_img">
-                    <img src="{{_sys_res_path}}genshin/logo/side/{{char.name}}.png" onerror="whenError(this)"/>
-                  </div>
-                  <div class="avatar_name">
-                    {{abbr[char.name] || char.name}}
-                  </div>
-                </div>
-              </div>
-              <div class="pct">{{pct(char.hold)}}</div>
-              <div class="char-cons">
-                <div class="cons-pct">
-                  {{each char.cons con idx}}
-                  <div>{{pct(con.value)}}</div>
-                  {{/each}}
-                  {{if mode ==="char"}}
-                  <div>{{pct(1-char.hold)}}</div>
-                  {{/if}}
-                </div>
-                <div class="cons-bg">
-                  {{each char.cons con idx}}
-                  <div class="cons-{{con.id ===0?'n0':con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
-                  {{/each}}
-                </div>
-              </div>
             </div>
+          </div>
+        </div>
+        <div class="pct">{{pct(char.hold)}}</div>
+        <div class="char-cons">
+          <div class="cons-pct">
+            {{each char.cons con idx}}
+            <div>{{pct(con.value)}}</div>
+            {{/each}}
+            {{if mode ==="char"}}
+            <div>{{pct(1-char.hold)}}</div>
+            {{/if}}
+          </div>
+          <div class="cons-bg">
+            {{each char.cons con idx}}
+            <div class="cons-{{con.id ===0?'n0':con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
             {{/each}}
           </div>
-          <p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
         </div>
-        <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
       </div>
+      {{/each}}
     </div>
-
+    <p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
-  </body>
+  </div>
-</html>
+</div>
+{{/block}}

resources/stat/common.css

@@ -9,7 +9,7 @@ body {
   color: #1e1f20;
   transform: scale(1.4);
   transform-origin: 0 0;
-  background: url("./bg1.png") top left no-repeat #2a3860;
+  background: url("./imgs/bg1.png") top left no-repeat #2a3860;
   background-size: contain;
   width: 600px;
   font-family: Number, YS2;
@@ -17,7 +17,7 @@ body {
 .container {
   width: 600px;
   padding: 20px 15px 10px 15px;
-  background: url("./footer.png") left bottom no-repeat;
+  background: url("./imgs/footer.png") left bottom no-repeat;
   background-size: contain;
 }
 .head-box {

resources/stat/common.less

@@ -10,7 +10,7 @@ body {
   color: #1e1f20;
   transform: scale(1.4);
   transform-origin: 0 0;
-  background: url("./bg1.png") top left no-repeat #2a3860;
+  background: url("./imgs/bg1.png") top left no-repeat #2a3860;
   background-size: contain;
   width: 600px;
   font-family: Number, YS2;
@@ -19,7 +19,7 @@ body {
 .container {
   width: 600px;
   padding: 20px 15px 10px 15px;
-  background: url("./footer.png") left bottom no-repeat;
+  background: url("./imgs/footer.png") left bottom no-repeat;
   background-size: contain;
 }
 

resources/wiki/calendar.css

@@ -4,12 +4,6 @@
 .font-number {
   font-family: Number, YS;
 }
-@font-face {
-  font-family: "tttgbnumber";
-  src: url("../common/font/tttgbnumber.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
 * {
   margin: 0;
   padding: 0;
@@ -217,7 +211,7 @@ body {
   border-right: 10px solid transparent;
   border-bottom: 20px solid #fff;
   position: absolute;
-  bottom: 0;
+  bottom: -8px;
   left: -9px;
   transform: scaleY(0.7);
   transform-origin: bottom center;
@@ -232,6 +226,7 @@ body {
 .now-time {
   text-align: center;
   padding-top: 5px;
+  margin-bottom: 5px;
 }
 .now-time span {
   color: #fff;
@@ -240,6 +235,7 @@ body {
   border-radius: 30px;
   padding: 10px 15px;
   border: 1px solid #fff;
+  display: inline-block;
 }
 .cal-abyss-cont {
   padding-top: 15px;

resources/wiki/calendar.html

@@ -1,85 +1,79 @@
-<!DOCTYPE html>
+{{extend elemLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/calendar.css"/>
-  </head>
-  <body class="elem-hydro {{displayMode}}-mode">
-    <div class="container elem-bg" id="container">
-      <div class="calendar">
-        <div class="cal-bg for-calendar-mode">
-          <table class="cont-table" border-collapse="collapse">
-            <tr class="tr thead">
-              {{each dateList d}}
-              <td colspan="{{d.date.length}}" class="td month">{{d.month}}月</td>
-              {{/each}}
-            </tr>
-            <tr class="tr thead">
-              {{each dateList d}}{{each d.date dn}}
-              <td class="td date {{dn === nowDate ? 'current-date':''}}">{{dn}}日</td>
-              {{/each}} {{/each}}
-            </tr>
-            <tr class="tr">
-              {{each dateList d}}{{each d.date dn}}
-              <td class="line {{dn === nowDate ? 'current-date':''}}"></td>
-              {{/each}} {{/each}}
-            </tr>
-          </table>
-        </div>
-        <div class="cal-bg for-list-mode">
-          <table class="cont-table" border-collapse="collapse">
-            <tr class="tr thead">
-              <td class="td month">活动列表</td>
-            </tr>
-            <tr class="tr">
-              <td class="line"></td>
-            </tr>
-          </table>
-        </div>
-        <div class="cal-list">
-          <div class="cal-abyss-cont">
-            {{each abyss li}}
-            <div class="cal-item type-abyss" style="{{`left:${li.left}%;width:${li.width}%`}}">
-              <div class="info">
-                <img src="{{_res_path}}/wiki/imgs/abyss-icon.png" class="cal-icon"/>
-                <strong>{{li.title}}</strong>
-                <span>{{li.label}}</span>
-              </div>
-            </div>
-            {{/each}}
-          </div>
-          {{each list li}}
-          <div class="cal-item type-{{li.type}} {{li.elem?'elem-'+li.elem:''}} {{li.width<20 ? 'small-mode':''}}"
-               style="{{`margin-left:${li.left}%;width:${li.width}%`}}"
-               data-id="{{li.id}}"
-               data-type="{{li.type}}">
-            {{if li.banner2}}
-            <div class="banner" style="background-image:url('{{_res_path}}{{li.banner2}}')"></div>
-            {{else if li.banner}}
-            <div class="banner" style="background-image:url('{{li.banner}}')"></div>
-            {{/if}}
-            <div class="info">
-              {{if li.type === "character"}}
-              <img src="{{_res_path}}meta/character/{{li.character}}/face.png" class="character-img"/>
-              {{else}}
-              <img src="{{li.icon}}" class="cal-icon"/>
-              {{/if}}
-              <strong>{{li.title}}</strong>
-              <span>{{li.label}}</span>
-            </div>
 
-          </div>
+{{block 'css'}}
-          {{/each}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/calendar.css"/>
+{{/block}}
+
+{{block 'main'}}
+<div class="calendar">
+  <div class="cal-bg for-calendar-mode">
+    <table class="cont-table" border-collapse="collapse">
+      <tr class="tr thead">
+        {{each dateList d}}
+        <td colspan="{{d.date.length}}" class="td month">{{d.month}}月</td>
+        {{/each}}
+      </tr>
+      <tr class="tr thead">
+        {{each dateList d}}{{each d.date dn}}
+        <td class="td date {{dn === nowDate ? 'current-date':''}}">{{dn}}日</td>
+        {{/each}} {{/each}}
+      </tr>
+      <tr class="tr">
+        {{each dateList d}}{{each d.date dn}}
+        <td class="line {{dn === nowDate ? 'current-date':''}}"></td>
+        {{/each}} {{/each}}
+      </tr>
+    </table>
+  </div>
+  <div class="cal-bg for-list-mode">
+    <table class="cont-table" border-collapse="collapse">
+      <tr class="tr thead">
+        <td class="td month">活动列表</td>
+      </tr>
+      <tr class="tr">
+        <td class="line"></td>
+      </tr>
+    </table>
+  </div>
+  <div class="cal-list">
+    <div class="cal-abyss-cont">
+      {{each abyss li}}
+      <div class="cal-item type-abyss" style="{{`left:${li.left}%;width:${li.width}%`}}">
+        <div class="info">
+          <img src="{{_res_path}}/wiki/imgs/abyss-icon.png" class="cal-icon"/>
+          <strong>{{li.title}}</strong>
+          <span>{{li.label}}</span>
         </div>
-        <div class="now-line" style="left:{{nowLeft}}%"></div>
-        <div class="now-line line2" style="left:{{nowLeft}}%"></div>
       </div>
-      <div class="now-time">
+      {{/each}}
-        <span>当前时间：{{nowTime}}</span>
-      </div>
-      <div class="logo">Created By Yunzai-Bot & Miao-Plugin</div>
     </div>
-  </body>
+    {{each list li}}
-</html>
+    <div class="cal-item type-{{li.type}} {{li.elem?'elem-'+li.elem:''}} {{li.width<20 ? 'small-mode':''}}"
+         style="{{`margin-left:${li.left}%;width:${li.width}%`}}"
+         data-id="{{li.id}}"
+         data-type="{{li.type}}">
+      {{if li.banner2}}
+      <div class="banner" style="background-image:url('{{_res_path}}{{li.banner2}}')"></div>
+      {{else if li.banner}}
+      <div class="banner" style="background-image:url('{{li.banner}}')"></div>
+      {{/if}}
+      <div class="info">
+        {{if li.type === "character"}}
+        <img src="{{_res_path}}meta/character/{{li.character}}/face.png" class="character-img"/>
+        {{else}}
+        <img src="{{li.icon}}" class="cal-icon"/>
+        {{/if}}
+        <strong>{{li.title}}</strong>
+        <span>{{li.label}}</span>
+      </div>
+
+    </div>
+    {{/each}}
+  </div>
+  <div class="now-line" style="left:{{nowLeft}}%"></div>
+  <div class="now-line line2" style="left:{{nowLeft}}%"></div>
+</div>
+<div class="now-time">
+  <span>当前时间：{{nowTime}}</span>
+</div>
+{{/block}}

resources/wiki/calendar.less

@@ -12,13 +12,6 @@
   font-family: Number, YS;
 }
 
-@font-face {
-  font-family: "tttgbnumber";
-  src: url("../common/font/tttgbnumber.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
 * {
   margin: 0;
   padding: 0;
@@ -273,7 +266,7 @@ body {
     border-right: 10px solid transparent;
     border-bottom: 20px solid #fff;
     position: absolute;
-    bottom: 0;
+    bottom: -8px;
     left: -9px;
     transform: scaleY(.7);
     transform-origin: bottom center;
@@ -294,6 +287,7 @@ body {
 .now-time {
   text-align: center;
   padding-top: 5px;
+  margin-bottom: 5px;
 
   span {
     color: #fff;
@@ -302,6 +296,7 @@ body {
     border-radius: 30px;
     padding: 10px 15px;
     border: 1px solid #fff;
+    display: inline-block;
   }
 }
 

resources/wiki/character.css

@@ -206,7 +206,7 @@ body {
 }
 .talent-detail {
   padding: 30px 15px 5px 15px;
-  background: url(card-bg.png) left top repeat-x;
+  background: url(./imgs/card-bg.png) left top repeat-x;
   background-size: auto 100%;
   margin: 0;
 }
@@ -262,7 +262,6 @@ body {
   margin-top: 15px;
   margin-bottom: 5px;
   display: block;
-  font-family: Number, YS;
   font-weight: normal;
   color: #d3bc8e;
 }
@@ -309,50 +308,6 @@ body {
 .talent-table .tr > div:last-child {
   padding-right: 5px;
 }
-/*
-
-.talent-table .td,
-.talent-table .th {
-  font-size: 14px;
-  display: table-cell;
-  box-shadow: 0 0 1px 0 #888 inset;
-  padding: 7px 0;
-  line-height: 24px;
-}
-
-.talent-table .tr:nth-child(odd) {
-  background: rgba(34, 41, 51, .6)
-}
-
-.talent-table .tr:nth-child(even) {
-  background: rgba(34, 41, 51, .3)
-}
-
-.talent-table .th {
-  background: rgba(34, 41, 51, .5);
-
-}
-
-.talent-table .lv {
-  font-family: tttgbnumber;
-  font-size: 18px;
-  line-height: 30px;
-}
-
-.talent-table .th {
-  font-weight: bold;
-  padding: 5px 3px;
-  color: #d3bc8e;
-}
-
-.talent-table .talent_name {
-  min-width: 120px;
-  padding: 10px 3px;
-  font-size: 15px;
-}
-
-
-*/
 .passive-talent .talent-table {
   display: none;
   margin-right: 20px;

resources/wiki/character.html

@@ -1,157 +1,147 @@
-<!DOCTYPE html>
+{{extend elemLayout}}
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
-    <link rel="shortcut icon" href="#"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
-    <link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/character.css"/>
-  </head>
-  <body>
-    <style>
 
-    </style>
+{{block 'css'}}
-    <div class="container elem-{{elem}}" id="container">
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/character.css"/>
-      <div class="head-box" style="background-image:url('{{_res_path}}/{{_char}}/party.png')">
+{{/block}}
-        <div class="head">
+
-          <img src="{{_res_path}}{{_char}}/face.png"/>
+{{block 'main'}}
-        </div>
+<div class="head-box" style="background-image:url('{{_res_path}}/{{_char}}/party.png')">
-        <!-- <div class="head-astro">{{astro}}</div>
+  <div class="head">
-         <div class="head-icon">
+    <img src="{{_res_path}}{{_char}}/face.png"/>
-           <img src="{{City}}" />
+  </div>
-           <img src="{{Weapon}}" />
+  <!-- <div class="head-astro">{{astro}}</div>
-           <img src="{{Element}}" />
+   <div class="head-icon">
+     <img src="{{City}}" />
+     <img src="{{Weapon}}" />
+     <img src="{{Element}}" />
+</div>
+-->
+
+  <div class="head-detail">
+    <div class="name">{{title}} · {{name}}</div>
+    <div class="desc">{{desc}}</div>
+  </div>
+  <div class="data-box">
+    <div class="tab-label">90级基础数据</div>
+    <div class="data-line">
+      {{each line item}}
+      <div class="data_line_item">
+        <div class="num">{{item.num}}</div>
+        <div class="label">{{item.label}}</div>
       </div>
-      -->
+      {{/each}}
+    </div>
+  </div>
+</div>
 
-        <div class="head-detail">
+{{if mode == "talent"}}
-          <div class="name">{{title}} · {{name}}</div>
+
-          <div class="desc">{{desc}}</div>
+{{each talent skill type}}
+<div class="talent-box elem-bg">
+  <div class="talent-detail cont">
+    <div class="talent-line">
+      <div class="talent-icon">
+        <img src="{{_res_path}}{{_char}}/talent_{{type}}.png"/>
+      </div>
+      <div class="talent-info">
+        <div class="talent-name">{{skill.name}}</div>
+        <div class="talent-desc">
+          {{each skill.desc d}}
+          {{ if d[0] === "<" }}
+          {{@d}}
+          {{else if d!=""}}
+          {{d}}</br>
+          {{/if}}
+          {{/each}}
         </div>
-        <div class="data-box">
+      </div>
-          <div class="tab-label">90级基础数据</div>
+      {{if skill.tables && skill.tables.length > 0}}
-          <div class="data-line">
+      <table class="talent-table cont-table">
-            {{each line item}}
+        <tr class="tr">
-            <div class="data_line_item">
+          <td class="th"></td>
-              <div class="num">{{item.num}}</div>
+          {{each skill.lvs lv idx}}
-              <div class="label">{{item.label}}</div>
+          {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
+          <td class="th lv">{{lv}}</td>
+          {{/if}}
+          {{/each}}
+        </tr>
+        {{each skill.tables tr}}
+        <tr class="tr">
+          <td class="th talent-name">
+            {{tr.name}}
+          </td>
+          {{if tr.isSame}}
+          <td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}}</td>
+          {{else}}
+          {{each tr.values v idx}}
+          {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
+          <td class="td">{{v}}</td>
+          {{/if}}
+          {{/each}}
+          {{/if}}
+        </tr>
+        {{/each}}
+      </table>
+      {{/if}}
+    </div>
+  </div>
+</div>
+{{/each}}
+
+<div class="talent-box elem-bg">
+  <div class="talent-detail passive-talent">
+    {{each passive pass idx}}
+    <div class="talent-line">
+      <div class="talent-icon">
+        <img src="{{_res_path}}{{_char}}/passive_{{idx}}.png"/>
+      </div>
+      <div class="talent-info">
+        <strong class="talent-name">{{pass.name}}</strong>
+        <div class="talent-desc">
+          {{if pass.tables}}
+          {{each pass.desc d}}
+          {{ if d[0] === "<" }}
+          {{@d}}
+          {{else if d!=""}}
+          {{d}}</br>
+          {{/if}}
+          {{/each}}
+          <div class="talent-table">
+            {{each pass.tables tr}}
+            <div class="tr">
+              <div class="th">{{tr.name}}</div>
+              <div class="td">{{tr.values[0]}}</div>
             </div>
             {{/each}}
           </div>
+          {{else}}
+          {{@pass.desc}}
+          {{/if}}
         </div>
       </div>
-
-      {{if mode == "talent"}}
-
-      {{each talent skill type}}
-      <div class="talent-box elem-bg">
-        <div class="talent-detail cont">
-          <div class="talent-line">
-            <div class="talent-icon">
-              <img src="{{_res_path}}{{_char}}/talent_{{type}}.png"/>
-            </div>
-            <div class="talent-info">
-              <div class="talent-name">{{skill.name}}</div>
-              <div class="talent-desc">
-                {{each skill.desc d}}
-                {{ if d[0] === "<" }}
-                {{@d}}
-                {{else if d!=""}}
-                {{d}}</br>
-                {{/if}}
-                {{/each}}
-              </div>
-            </div>
-            {{if skill.tables && skill.tables.length > 0}}
-            <table class="talent-table cont-table">
-              <tr class="tr">
-                <td class="th"></td>
-                {{each skill.lvs lv idx}}
-                {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
-                <td class="th lv">{{lv}}</td>
-                {{/if}}
-                {{/each}}
-              </tr>
-              {{each skill.tables tr}}
-              <tr class="tr">
-                <td class="th talent-name">
-                  {{tr.name}}
-                </td>
-                {{if tr.isSame}}
-                <td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}}</td>
-                {{else}}
-                {{each tr.values v idx}}
-                {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
-                <td class="td">{{v}}</td>
-                {{/if}}
-                {{/each}}
-                {{/if}}
-              </tr>
-              {{/each}}
-            </table>
-            {{/if}}
-          </div>
-        </div>
-      </div>
-      {{/each}}
-
-      <div class="talent-box elem-bg">
-        <div class="talent-detail passive-talent">
-          {{each passive pass idx}}
-          <div class="talent-line">
-            <div class="talent-icon">
-              <img src="{{_res_path}}{{_char}}/passive_{{idx}}.png"/>
-            </div>
-            <div class="talent-info">
-              <strong class="talent-name">{{pass.name}}</strong>
-              <div class="talent-desc">
-                {{if pass.tables}}
-                {{each pass.desc d}}
-                {{ if d[0] === "<" }}
-                {{@d}}
-                {{else if d!=""}}
-                {{d}}</br>
-                {{/if}}
-                {{/each}}
-                <div class="talent-table">
-                  {{each pass.tables tr}}
-                  <div class="tr">
-                    <div class="th">{{tr.name}}</div>
-                    <div class="td">{{tr.values[0]}}</div>
-                  </div>
-                  {{/each}}
-                </div>
-                {{else}}
-                {{@pass.desc}}
-                {{/if}}
-              </div>
-            </div>
-          </div>
-          {{/each}}
-        </div>
-      </div>
-      {{/if}}
-
-      {{if mode == "cons"}}
-      <div class="talent-box elem-bg">
-        <div class="talent-detail">
-          {{each cons con idx}}
-          <div class="talent-line">
-            <div class="talent-icon">
-              <img src="{{_res_path}}{{_char}}/cons_{{idx}}.png"/>
-            </div>
-            <div class="talent-info">
-              <strong class="talent-name">{{con.name}}</strong>
-              <div class="talent-desc">
-                {{@con.desc}}
-              </div>
-            </div>
-          </div>
-          {{/each}}
-        </div>
-      </div>
-      {{/if}}
-
-      <div class="logo">Created By Yunzai-Bot & Miao-Plugin</div>
     </div>
-  </body>
+    {{/each}}
-</html>
+  </div>
+</div>
+{{/if}}
+
+{{if mode == "cons"}}
+<div class="talent-box elem-bg">
+  <div class="talent-detail">
+    {{each cons con idx}}
+    <div class="talent-line">
+      <div class="talent-icon">
+        <img src="{{_res_path}}{{_char}}/cons_{{idx}}.png"/>
+      </div>
+      <div class="talent-info">
+        <strong class="talent-name">{{con.name}}</strong>
+        <div class="talent-desc">
+          {{@con.desc}}
+        </div>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{/if}}
+{{/block}}

resources/wiki/character.less

@@ -239,7 +239,7 @@ body {
 
 .talent-detail {
   padding: 30px 15px 5px 15px;
-  background: url(card-bg.png) left top repeat-x;
+  background: url(./imgs/card-bg.png) left top repeat-x;
   background-size: auto 100%;
   margin: 0;
 }
@@ -302,7 +302,6 @@ body {
   margin-top: 15px;
   margin-bottom: 5px;
   display: block;
-  font-family: Number, YS;
   font-weight: normal;
   color: #d3bc8e;
 }
@@ -361,51 +360,6 @@ body {
 }
 
 
-/*
-
-.talent-table .td,
-.talent-table .th {
-  font-size: 14px;
-  display: table-cell;
-  box-shadow: 0 0 1px 0 #888 inset;
-  padding: 7px 0;
-  line-height: 24px;
-}
-
-.talent-table .tr:nth-child(odd) {
-  background: rgba(34, 41, 51, .6)
-}
-
-.talent-table .tr:nth-child(even) {
-  background: rgba(34, 41, 51, .3)
-}
-
-.talent-table .th {
-  background: rgba(34, 41, 51, .5);
-
-}
-
-.talent-table .lv {
-  font-family: tttgbnumber;
-  font-size: 18px;
-  line-height: 30px;
-}
-
-.talent-table .th {
-  font-weight: bold;
-  padding: 5px 3px;
-  color: #d3bc8e;
-}
-
-.talent-table .talent_name {
-  min-width: 120px;
-  padding: 10px 3px;
-  font-size: 15px;
-}
-
-
-*/
-
 .passive-talent .talent-table {
   display: none;
   margin-right: 20px;