npm - koishi-plugin-dew-bot - Versions diffs - 1.0.188 - Mend

koishi-plugin-dew-bot 1.0.188

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

Files changed (137) hide show

package/lib/html/css/body.css +287 -0
package/lib/html/css/equip.css +115 -0
package/lib/html/css/skill.css +75 -0
package/lib/html/css/talent.css +58 -0
package/lib/html/page/body.html +96 -0
package/lib/html/page/equip.html +98 -0
package/lib/html/page/mini_texas.html +493 -0
package/lib/html/page/skill.html +76 -0
package/lib/html/page/talent.html +76 -0
package/lib/html/res/avatar.jpg +0 -0
package/lib/html/res/body/box.png +0 -0
package/lib/html/res/body/share/test.png +0 -0
package/lib/html/res/body/title/test.png +0 -0
package/lib/html/res/body/title/test1.png +0 -0
package/lib/html/res/equip/equip_border.png +0 -0
package/lib/html/res/equip/icon/none.png +0 -0
package/lib/html/res/equip/icon/test.png +0 -0
package/lib/html/res/equip/quality/0.png +0 -0
package/lib/html/res/equip/quality/1.png +0 -0
package/lib/html/res/equip/quality/2.png +0 -0
package/lib/html/res/equip/quality/3.png +0 -0
package/lib/html/res/equip/quality/4.png +0 -0
package/lib/html/res/equip/quality/5.png +0 -0
package/lib/html/res/equip/quality/6.png +0 -0
package/lib/html/res/equip/quality/7.png +0 -0
package/lib/html/res/equip/quality/8.png +0 -0
package/lib/html/res/equip/quality/9.png +0 -0
package/lib/html/res/font/cn.ttf +0 -0
package/lib/html/res/font/xiaomai.ttf +0 -0
package/lib/html/res/mini/chip/chip0.png +0 -0
package/lib/html/res/mini/chip/chip1.png +0 -0
package/lib/html/res/mini/chip/chip2.png +0 -0
package/lib/html/res/mini/chip/chip3.png +0 -0
package/lib/html/res/mini/chip/chip4.png +0 -0
package/lib/html/res/mini/chip/chip5.png +0 -0
package/lib/html/res/mini/poker/backPoker.png +0 -0
package/lib/html/res/mini/poker/poker_0_10.png +0 -0
package/lib/html/res/mini/poker/poker_0_11.png +0 -0
package/lib/html/res/mini/poker/poker_0_12.png +0 -0
package/lib/html/res/mini/poker/poker_0_13.png +0 -0
package/lib/html/res/mini/poker/poker_0_14.png +0 -0
package/lib/html/res/mini/poker/poker_0_2.png +0 -0
package/lib/html/res/mini/poker/poker_0_3.png +0 -0
package/lib/html/res/mini/poker/poker_0_4.png +0 -0
package/lib/html/res/mini/poker/poker_0_5.png +0 -0
package/lib/html/res/mini/poker/poker_0_6.png +0 -0
package/lib/html/res/mini/poker/poker_0_7.png +0 -0
package/lib/html/res/mini/poker/poker_0_8.png +0 -0
package/lib/html/res/mini/poker/poker_0_9.png +0 -0
package/lib/html/res/mini/poker/poker_1_10.png +0 -0
package/lib/html/res/mini/poker/poker_1_11.png +0 -0
package/lib/html/res/mini/poker/poker_1_12.png +0 -0
package/lib/html/res/mini/poker/poker_1_13.png +0 -0
package/lib/html/res/mini/poker/poker_1_14.png +0 -0
package/lib/html/res/mini/poker/poker_1_2.png +0 -0
package/lib/html/res/mini/poker/poker_1_3.png +0 -0
package/lib/html/res/mini/poker/poker_1_4.png +0 -0
package/lib/html/res/mini/poker/poker_1_5.png +0 -0
package/lib/html/res/mini/poker/poker_1_6.png +0 -0
package/lib/html/res/mini/poker/poker_1_7.png +0 -0
package/lib/html/res/mini/poker/poker_1_8.png +0 -0
package/lib/html/res/mini/poker/poker_1_9.png +0 -0
package/lib/html/res/mini/poker/poker_2_10.png +0 -0
package/lib/html/res/mini/poker/poker_2_11.png +0 -0
package/lib/html/res/mini/poker/poker_2_12.png +0 -0
package/lib/html/res/mini/poker/poker_2_13.png +0 -0
package/lib/html/res/mini/poker/poker_2_14.png +0 -0
package/lib/html/res/mini/poker/poker_2_2.png +0 -0
package/lib/html/res/mini/poker/poker_2_3.png +0 -0
package/lib/html/res/mini/poker/poker_2_4.png +0 -0
package/lib/html/res/mini/poker/poker_2_5.png +0 -0
package/lib/html/res/mini/poker/poker_2_6.png +0 -0
package/lib/html/res/mini/poker/poker_2_7.png +0 -0
package/lib/html/res/mini/poker/poker_2_8.png +0 -0
package/lib/html/res/mini/poker/poker_2_9.png +0 -0
package/lib/html/res/mini/poker/poker_3_10.png +0 -0
package/lib/html/res/mini/poker/poker_3_11.png +0 -0
package/lib/html/res/mini/poker/poker_3_12.png +0 -0
package/lib/html/res/mini/poker/poker_3_13.png +0 -0
package/lib/html/res/mini/poker/poker_3_14.png +0 -0
package/lib/html/res/mini/poker/poker_3_2.png +0 -0
package/lib/html/res/mini/poker/poker_3_3.png +0 -0
package/lib/html/res/mini/poker/poker_3_4.png +0 -0
package/lib/html/res/mini/poker/poker_3_5.png +0 -0
package/lib/html/res/mini/poker/poker_3_6.png +0 -0
package/lib/html/res/mini/poker/poker_3_7.png +0 -0
package/lib/html/res/mini/poker/poker_3_8.png +0 -0
package/lib/html/res/mini/poker/poker_3_9.png +0 -0
package/lib/html/res/mini/texas/bg.jpg +0 -0
package/lib/html/res/mini/texas/win.png +0 -0
package/lib/html/res/quality/test.png +0 -0
package/lib/html/res/skill/att/dark.png +0 -0
package/lib/html/res/skill/att/divine.png +0 -0
package/lib/html/res/skill/att/earth.png +0 -0
package/lib/html/res/skill/att/fire.png +0 -0
package/lib/html/res/skill/att/light.png +0 -0
package/lib/html/res/skill/att/spell.png +0 -0
package/lib/html/res/skill/att/trap.png +0 -0
package/lib/html/res/skill/att/water.png +0 -0
package/lib/html/res/skill/att/wind.png +0 -0
package/lib/html/res/skill/frame/0.jpg +0 -0
package/lib/html/res/skill/frame/1.jpg +0 -0
package/lib/html/res/skill/frame/2.jpg +0 -0
package/lib/html/res/skill/frame/3.jpg +0 -0
package/lib/html/res/skill/frame/4.jpg +0 -0
package/lib/html/res/skill/frame/5.jpg +0 -0
package/lib/html/res/skill/frame/6.jpg +0 -0
package/lib/html/res/skill/frame/7.jpg +0 -0
package/lib/html/res/skill/frame/8.jpg +0 -0
package/lib/html/res/skill/frame/9.jpg +0 -0
package/lib/html/res/skill/star/level.png +0 -0
package/lib/html/res/skill/star/rank.png +0 -0
package/lib/html/res/skill/test.jpg +0 -0
package/lib/html/res/vue2.js +11 -0
package/lib/index.js +46 -0
package/lib/inits.js +43 -0
package/lib/msgCsl.js +97 -0
package/lib/plugin/console.js +17 -0
package/lib/plugin/messageQueue.js +134 -0
package/lib/plugin/puppeteer.js +81 -0
package/lib/plugin/rateLimiter.js +104 -0
package/lib/plugin/server.js +206 -0
package/lib/plugin/serverHandel/handel_base.js +27 -0
package/lib/plugin/serverHandel/image.js +19 -0
package/lib/plugin/serverHandel/none.js +15 -0
package/lib/plugin/serverHandel/text.js +20 -0
package/lib/plugin/sessions.js +33 -0
package/lib/shared/IBody.js +2 -0
package/lib/shared/IMassage.js +9 -0
package/lib/shared/MsgMessage.js +4 -0
package/lib/shared/PtlMessage.js +4 -0
package/lib/shared/PtlTest.js +4 -0
package/lib/shared/base.js +2 -0
package/lib/shared/face/index.js +47 -0
package/lib/shared/serviceProto.js +328 -0
package/package.json +36 -0
package/readme.md +9 -0

package/lib/html/page/equip.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>装备卡片</title>
+    <script src="../res/vue2.js"></script>
+    <link rel="stylesheet" href="../css/equip.css">
+</head>
+<body>
+    <div id="app">
+        <div class="equip-iconBox">
+            <img class="equip-icon-border" src="../res/equip/equip_border.png">
+            <img class="equip-icon-quality" :src="'../res/equip/quality/' + data.quality + '.png'">
+            <img class="equip-icon" :src="data.icon" onerror="this.onerror=null; this.src='../res/equip/icon/none.png'">
+        </div>
+        <div class="equip-baseInfo">
+            <div class="equip-name">
+                {{ data.name }}
+            </div>
+            <div class="quality">
+                {{ convertToStars(data.quality) }}
+            </div>
+            <div class="attribute">
+                <div v-for="item in data.attribute" :key="item.key">
+                    {{ item.key }} {{ item.val }}
+                </div>
+            </div>
+            <div class="info-box" v-if="data.skill.length > 0">
+                <div class="info-box-title">附带技能:</div>
+                <div class="info-box-content">
+                    <div v-for="item in data.skill" :key="item.id">
+                        No.{{ item.id }} - {{ item.name }}
+                    </div>
+                </div>
+            </div>
+            <div class="info-box">
+                <div class="info-box-title">装备介绍:</div>
+                <div class="info-box-content">
+                    {{ data.desc }}
+                </div>
+            </div>
+            <div class="info-box">
+                <div class="info-box-title">装备来源:</div>
+                <div class="info-box-content">
+                    {{ data.source }}
+                </div>
+            </div>
+            <div class="info-box">
+                <div class="info-box-title">装备位置:</div>
+                <div class="info-box-content">
+                    {{ data.type }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let data = {
+            name: '星辰法杖111',
+            quality: 9,
+            icon: 'test',
+            attribute: [],
+            skill: [{ id: 'p1', name: '金璋皇极' }],
+            desc: '',
+            source: '世界掉落 · 十日终焉',
+            type: '武器',
+        };
+        new Vue({
+            el: '#app',
+            data: {
+                name: '',
+                quality: 4,
+                icon: 'none',
+                attribute: [],
+                skill: [],
+                desc: '',
+                source: '',
+                type: '',
+            },
+            mounted() {
+                this.data = data;
+            },
+            methods: {
+                convertToStars(number) {
+                    number = number + 1;
+                    let str = '';
+                    for (let i = 0; i < number; i++) {
+                        str += '★';
+                    }
+                    return str;
+                }
+            }
+        });
+    </script>
+</body>

package/lib/html/page/mini_texas.html ADDED Viewed

@@ -0,0 +1,493 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>德州扑克</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+</head>
+<body>
+    <div id="app" class="poker-table">
+        <img src="../res/mini/texas/bg.jpg" class="background-image">
+        <div class="table">
+            <!-- 总注区域 -->
+            <div v-if="state == 2" class="chip-pool">
+                <div class="chip-pool-info">
+                    <img src="../res/mini/chip/chip5.png" style="width: 15px; height: 15px;"><span
+                        style="color: black;font-size: 14px;">总注:</span><span
+                        style="color: yellow; text-shadow: 1px 1px 0 rgb(235, 186, 27);font-size: 14px;">{{chip_all}}</span>
+                </div>
+            </div>
+            <!-- 公牌 -->
+            <div v-if="state == 2 || state == 3" class="gongpai">
+                <img v-for="(card, index) in communityCards" :src="getCardUrl(card)" :key="index">
+            </div>
+            <!-- 房间信息 -->
+            <div v-if="state == 1" class="table-info">
+                德州扑克-上不封顶-2人以上自动开始
+            </div>
+            <!-- 用户筹码区域 -->
+            <div v-if="state == 2 || state == 3 && user.id != winUser.id" :class="'user-bet-area-' + index"
+                v-for="(user, index) in users" :key="index">
+                <img v-for="(chip, index) in rendeChipArea(user.bet)" :key="index"
+                    :src="'../res/mini/chip/chip' + chip.coin + '.png'" class="chip-all-area-item"
+                    :style="{ position: 'absolute', left: chip.x + 'px', top: chip.y + 'px' }">
+            </div>
+            <!-- 用户在桌面上的位置 -->
+            <!-- top: 46px;
+    left: 305px; -->
+            <div :class="['user', 'user-idx' + index]" v-for="(user, index) in users" :key="index"
+                :style="(user.id == winUser.id && state == 3) ? {top: '58px', left: '305px'} : {}">
+                <img class="user-win" v-if="user.id == winUser.id && state == 3" src="../res/mini/texas/win.png">
+                <div class="user-avatar">
+                    <img :src="user.avatar" style="width: 100%;border-radius: 50%;">
+                </div>
+                <div class="user-coin">
+                    <img src="../res/mini/chip/chip5.png" style="height: 100%;"><span
+                        style="color: yellow;font-size: 10px;">{{user.coin}}</span>
+                </div>
+                <div class="user-state">
+                    <span>{{user.state.length > 0 ? user.state:user.name}}</span>
+                </div>
+                <!-- 用户手牌 -->
+                <div v-if="state == 2 || state == 3" class="user-hand">
+                    <img class="hand-1" :src="getCardUrl(user.hand[0])">
+                    <img class="hand-2" :src="getCardUrl(user.hand[1])">
+                    <!-- 用户手牌点数 -->
+                    <div class="user-hand-point">
+                        {{user.handName}}
+                    </div>
+                </div>
+            </div>
+            <!-- 用户回合操作区 -->
+            <div class="user-actions" v-if="buttoms.length > 0">
+                <div v-for="(button, index) in buttoms" :key="index" class="action-button"
+                    :style="{ background: getColor(button) }">
+                    {{ button }}
+                </div>
+            </div>
+            <!-- 回合结算 -->
+            <div class="round-ouver">
+            </div>
+        </div>
+    </div>
+    <script>
+        let data = {
+            state: 2,
+            chip_all: 9988,
+            users: [
+                { id: '1', avatar: '../res/avatar.jpg', state: '+9999', name: '楚轩', hand: [{ suit: '?', rank: '?' }, { suit: '?', rank: '?' }], handName: '高牌', coin: 999 }
+            ],
+            buttoms: [],
+            communityCards: [{ suit: '?', rank: '?' }],
+            winUser: { id: '1', coin: 1000 }
+        };
+        new Vue({
+            el: '#app',
+            data: {
+                state: 3,
+                chip_all: 111,
+                users: [],
+                // 操作指令
+                buttoms: [],
+                overLog: [],
+                communityCards: []
+            },
+            created() {
+                this.chip_all = data.chip_all;
+                this.state = data.state
+                this.winUser = data.winUser
+                this.users = data.users;
+                this.buttoms = data.buttoms
+                // this.communityCards = data.communityCards.length < 5 ? data.communityCards.concat(Array(5 - data.communityCards.length).fill({ suit: '?', rank: '?' })) : data.communityCards
+            },
+            methods: {
+                getColor(text) {
+                    const colorMap = {
+                        '跟注': '#28a745', // 优化为Bootstrap绿色
+                        '过': '#ffc107', // 优化为Bootstrap黄色
+                        '加注': '#007bff', // 优化为Bootstrap蓝色
+                        '梭哈': '#dc3545', // 优化为Bootstrap红色
+                        '弃牌': '#6c757d', // 优化为Bootstrap灰色
+                        '准备': '#28a745',
+                        '换一桌': '#007bff'
+                    };
+                    return colorMap[text] || '#6c757d';
+                },
+                getCardUrl(info) {
+                    if (info.suit == '?') {
+                        return '../res/mini/poker/backPoker.png'
+                    }
+                    const suits = ['♠', '♥', '♣', '♦'];
+                    const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
+                    let suitIndex = suits.indexOf(info.suit);
+                    let rankIndex = ranks.indexOf(info.rank);
+                    let url = `../res/mini/poker/poker_${suitIndex}_${rankIndex + 2}.png`
+                    return url
+                },
+                rendeChipArea(arry) {
+                    arry = [];
+                    const chipPositions = [];
+                    const chipWidth = 15;
+                    const chipHeight = 15;
+                    const tableWidth = 70;
+                    const tableHeight = 47;
+                    for (let i = 0; i < arry.length; i++) {
+                        let position;
+                        let coin = arry[i];
+                        let range = 5;
+                        if (coin <= 100) {
+                            range = 0;
+                        } else if (coin <= 200) {
+                            range = 1;
+                        } else if (coin <= 300) {
+                            range = 2;
+                        } else if (coin <= 400) {
+                            range = 3;
+                        } else if (coin <= 500) {
+                            range = 4;
+                        }
+                        do {
+                            const x = Math.floor(Math.random() * (tableWidth - chipWidth));
+                            const y = Math.floor(Math.random() * (tableHeight - chipHeight));
+                            position = { x, y, coin };
+                        } while (chipPositions.some(pos => pos.x === position.x && pos.y === position.y));
+                        chipPositions.push(position);
+                    }
+                    return chipPositions;
+                }
+            }
+        });
+    </script>
+    <style>
+        @font-face {
+            font-family: 'xiaomai';
+            src: url('../res/font/xiaomai.ttf');
+            font-weight: normal;
+            font-style: normal;
+        }
+        @font-face {
+            font-family: 'cn';
+            src: url('../res/font/cn.ttf');
+            font-weight: normal;
+            font-style: normal;
+        }
+        span {
+            font-size: 12px;
+            font-family: 'cn';
+        }
+        div {
+            font-family: 'cn';
+        }
+        .user-hand {
+            background: red;
+            position: absolute;
+            right: -17px;
+            bottom: -20px;
+            width: 10px;
+            height: 10px;
+        }
+        .hand-1 {
+            bottom: 0;
+            left: -7px;
+            transform: rotate(-10deg);
+        }
+        .hand-2 {
+            bottom: -2px;
+            left: 3px;
+            transform: rotate(10deg);
+        }
+        .user-hand img {
+            position: absolute;
+            width: 33px;
+        }
+        .user-hand-point {
+            color: #ffffff;
+            position: absolute;
+            top: 11px;
+            left: 131%;
+            transform: translateX(-50%);
+            /* font-size: 14px; */
+            font-weight: bold;
+            white-space: nowrap;
+        }
+        .table-info {
+            height: 50px;
+            width: 330px;
+            position: absolute;
+            top: 153px;
+            left: 182px;
+            color: bisque;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .gongpai {
+            height: 50px;
+            width: 210px;
+            position: absolute;
+            top: 153px;
+            left: 239px;
+        }
+        .chip-pool {
+            height: 22px;
+            width: 205px;
+            position: absolute;
+            top: 119px;
+            left: 239px;
+        }
+        .chip-all-area-item {
+            width: 15px;
+            height: 15px;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .gongpai img {
+            height: 100%;
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
+            /* 添加阴影 */
+            border-radius: 7px;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            width: 667px;
+            height: 375px;
+            overflow: hidden;
+        }
+        .poker-table {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+        .background-image {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+        }
+        .user {
+            width: 50px;
+            position: absolute;
+        }
+        .user-win {
+            position: absolute;
+            width: 102px;
+            top: -44px;
+            left: -24px;
+            z-index: 13;
+        }
+        .user-bet-area-0 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 209px;
+            left: 315px;
+        }
+        .user-bet-area-1 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 202px;
+            left: 481px;
+        }
+        .user-bet-area-2 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 125px;
+            left: 495px;
+        }
+        .user-bet-area-3 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 94px;
+            left: 413px;
+        }
+        .user-bet-area-4 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 94px;
+            left: 189px;
+        }
+        .user-bet-area-5 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 129px;
+            left: 116px;
+        }
+        .user-bet-area-6 {
+            width: 70px;
+            height: 47px;
+            position: absolute;
+            top: 213px;
+            left: 116px;
+        }
+        .user-idx0 {
+            top: 253px;
+            left: 305px;
+        }
+        .user-idx1 {
+            top: 232px;
+            right: 62px;
+        }
+        .user-idx2 {
+            top: 86px;
+            right: 52px;
+        }
+        .user-idx3 {
+            top: 28px;
+            right: 177px;
+        }
+        .user-idx4 {
+            top: 28px;
+            left: 190px;
+        }
+        .user-idx5 {
+            top: 82px;
+            left: 38px;
+        }
+        .user-idx6 {
+            bottom: 81px;
+            left: 72px;
+        }
+        .user-state {
+            width: 150%;
+            height: 14px;
+            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.589) 80%, transparent);
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -19px;
+        }
+        .user-coin {
+            width: 150%;
+            height: 12px;
+            background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.8) 20%, rgba(139, 69, 19, 0.589) 80%, transparent);
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -5px
+        }
+        .user-state span {
+            font-weight: bold;
+            color: #fff;
+        }
+        .user-avatar {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            background-image: linear-gradient(white, white),
+                linear-gradient(45deg, #4ecdc4, #4ecdc4);
+            background-origin: border-box;
+            background-clip: content-box, border-box;
+            position: relative;
+            left: 50%;
+            overflow: hidden;
+            transform: translateX(-50%);
+        }
+        .chip-pool-info {
+            display: flex;
+            align-items: center;
+            /* 垂直居中 */
+            margin: 0 auto;
+            justify-content: center;
+        }
+        .user-actions {
+            position: absolute;
+            bottom: 10px;
+            right: -190px;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 5px;
+            width: 401px;
+            justify-content: flex-start;
+        }
+        .action-button {
+            background: green;
+            /* 背景绿色 */
+            color: white;
+            font-weight: bold;
+            text-shadow: 0px 0px 10px black;
+            /* 文字白色 */
+            padding: 5px 20px;
+            /* 内边距 */
+            border-radius: 5px;
+        }
+    </style>
+</body>
+</html>

package/lib/html/page/skill.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>游戏王卡片</title>
+    <script src="../res/vue2.js"></script>
+    <link rel="stylesheet" href="../css/skill.css">
+</head>
+<body>
+    <div id="app">
+        <img class="pos card-frame" :src="'../res/skill/frame/' + quality + '.jpg'"
+            style="width: 406.5px; height: 593.5px;">
+        <span class="pos card-name" style="top: 32px; left: 37.5px; font-size: 21px;">No.{{id}} {{name}}</span>
+        <img v-for="(n, index) in quality" :key="index"
+            :src="'../res/skill/star/' + (quality >= 5 ? 'rank' : 'level') + '.png'" class="pos filter"
+            :style="{ left: 30 + index * 27 + 'px', top: '70px', width: '27px' }">
+        <img class="pos filter" src="../res/skill/att/water.png" style="right: 29px;top: 30px;width: 33px;">
+        <img class="pos filter" src="../res/skill/test.jpg" style="right: 49.5px;top: 110px;width: 307px;">
+        <div class="pos descArea">
+            <div>
+                <div class="content">
+                    <span class="text-content bold">
+                        【技能信息】
+                    </span>
+                    <span class="text-content">
+                        <span style="color: rgb(237 0 0);">{{classType}}</span>
+                        -
+                        {{getQuality(quality)}}级{{type}}
+                        <span class="bold">[技能频率]{{cd > 0 ? cd : '无CD'}}回合</span>
+                    </span>
+                </div>
+                <div class="split-line"></div>
+                <div class="content">
+                    <span class="text-content" style="font-size: 10px;">
+                        <span class="bold">【技能描述】</span>
+                        {{desc}}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let data = { "name": "普通攻击", "quality": 7, "type": "主动技能", "desc": "对敌方单体造成物理伤害", "cd": 0, "classType": "攻击型" };
+        new Vue({
+            el: '#app',
+            data: {
+                id: 'a001',
+                name: '',
+                quality: 5,
+                desc: '',
+                type: '',
+                cd: 0,
+                classType: '伤害型',
+            },
+            mounted() {
+                this.id = data.id;
+                this.name = data.name;
+                this.quality = data.quality;
+                this.desc = data.desc;
+                this.type = data.type;
+                this.cd = data.cd;
+                this.classType = data.classType;
+            },
+            methods: {
+                getQuality(quality) {
+                    // 品质映射
+                    const qualities = ['F', 'D', 'C', 'B', 'A', 'S', 'SS', 'SSS', 'SR', 'SSR'];
+                    return qualities[quality] || '未知';
+                }
+            }
+        });
+    </script>
+</body>