查看“Widget:资源计算器”的源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- 日期选择器 -->
    <script type="text/javascript"
        src="https://wiki.biligame.com/tools/MediaWiki:Flatpickr/4.6.13.js?action=raw&ctype=text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Vue -->
    <script type="text/javascript"
        src="https://wiki.biligame.com/ys/MediaWiki:vue3-global.js?action=raw&ctype=text/javascript"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="//unpkg.com/element-plus"></script>
    <!-- 约3KB -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>


<body>
    <div id="app">
        <!-- 日期选择器 -->
        <div class="date-range-container">
            <div class="date-label">统计</div>
            <input type="text" id="date-range" placeholder="选择日期范围">
        </div>        
        
        <!-- 加载状态 -->
        <el-loading v-if="isLoading" fullscreen></el-loading>

        <!-- 卡片面板 -->
        <template v-if="!isLoading">
            <card-panel 
                :card-list="cardList" 
                :prop-list="propList"
                @add="addCard" 
                @remove="removeCard" 
                @update="updateCard"
                @clear="clearCards">
            </card-panel>

            <!-- 统计面板 -->
            <stats-panel
                :card-list="cardList"
                :prop-list="propList"
                :prop-counts="propCounts"
                :date-range="dateRange">
            </stats-panel>
        </template>
    </div>

    <!-- 组件模板 -->
    <template id="date-range-template">
        <div class="date-range-container">
            <div class="date-label">统计日期范围：</div>
            <input type="text" id="date-range" placeholder="选择日期范围">
        </div>
    </template>

    <!-- 卡片面板模板 -->
    <template id="card-panel-template">
        <!-- Tab栏 -->
        <div class="tab-header">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="每日" name="daily"></el-tab-pane>
                <el-tab-pane label="每周" name="weekly"></el-tab-pane>
                <el-tab-pane label="每月" name="monthly"></el-tab-pane>
                <el-tab-pane label="周期" name="cycle"></el-tab-pane>
                <el-tab-pane label="基础" name="basic"></el-tab-pane>
            </el-tabs>
            <!-- 功能按钮组 -->
            <div class="function-buttons">
                <el-button circle text @click="handleImport" title="导入">
                    <span class="material-icons">upload</span>                        
                </el-button>
                <el-button circle text @click="handleExport" title="导出">
                    <span class="material-icons">download</span>                        
                </el-button>
                <el-button circle text @click="handleClear" title="清空">
                    <span class="material-icons">delete</span>                        
                </el-button>
            </div>
        </div>

        <!-- 卡片列表 -->
        <div class="card-list">
            <card v-for="(card, index) in filteredCards" 
                  :key="card.originalIndex" 
                  :card="card"
                  :index="index"
                  :prop-list="propList"
                  @remove="handleRemove(index)"
                  @edit="handleEdit">
            </card>
        </div>

        <!-- 底部功能区 -->
        <div class="bottom-bar">
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>

        <!-- 卡片编辑弹窗 -->
        <card-editor
            ref="editor"
            :type="activeTab"
            :prop-list="propList"
            :edit-card="editingCard"
            @add="$emit('add', $event)"
            @update="handleCardUpdate">
        </card-editor>

        <!-- 导入弹窗 -->
        <import-dialog
            ref="importDialog"
            @import="handleImportData">
        </import-dialog>

        <!-- 导出弹窗 -->
        <el-dialog v-model="exportVisible" title="导出数据" width="95%">
            <div class="props-container">
                <el-input 
                    type="textarea" 
                    v-model="exportData" 
                    :rows="5" 
                    placeholder="导出的数据"
                    readonly>
                </el-input>
            </div>

            <template #footer>
                <el-button @click="exportVisible = false">关闭</el-button>
            </template>
        </el-dialog>
    </template>

    <!-- 卡片模板 -->
    <template id="card-template">
        <div class="card" @click="handleCardClick">
            <!-- 卡片头部 -->
            <div class="card-header">
                <div class="card-info">
                    <span class="card-remark">{{ cardRemark }}</span>
                </div>
                <el-button size="small" circle text @click.stop="$emit('remove', index)" title="删除">
                    <span class="material-icons">close</span>
                </el-button>
            </div>
            <!-- 道具列表 -->
            <div class="card-content">
                <div class="prop-list">
                    <div v-for="[name, count] in sortedProps" :key="name" class="card-prop-item">
                        <img :src="propList[name]" :alt="name" class="prop-icon">
                        <span class="prop-count">x{{ count }}</span>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 卡片编辑弹窗模板 -->
    <template id="card-editor-template">
        <el-dialog v-model="visible" :title="isEdit ? '编辑卡片' : '添加卡片'" width="95%" @close="handleClose">
            <div class="dialog-form">
                <!-- 备注和基础表单项 -->
                <el-form>
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <!-- 其他表单项根据type显示 -->
                    <template v-if="type === 'basic'">
                        <el-form-item label="次数">
                            <el-input-number v-model="form.count" :min="1"></el-input-number>
                        </el-form-item>
                    </template>
                    <template v-if="type === 'weekly'">
                        <el-form-item label="星期">
                            <el-checkbox-group v-model="form.days">
                                <el-checkbox v-for="day in weekDays" :key="day.value" :label="day.value">
                                    {{ day.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </template>
                    <template v-if="type === 'monthly'">
                        <el-form-item label="每月">
                            <el-select
                                v-model="form.days"
                                multiple
                                collapse-tags
                                collapse-tags-tooltip
                                placeholder="请选择日期"
                                style="width: 100%">
                                <el-option
                                    v-for="day in monthDays"
                                    :key="day"
                                    :label="day + '日'"
                                    :value="day.toString()">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="type === 'cycle'">
                        <el-form-item label="开始日期">
                            <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="周期天数">
                            <el-input-number v-model="form.duration" :min="1"></el-input-number>
                        </el-form-item>
                    </template>
                </el-form>
            </div>

            <!-- 道具列表 -->
            <div class="props-container">
                <div class="prop-content">
                    <div v-for="(url, name) in propList" :key="name" class="prop-card">
                        <div class="prop-info">
                            <img :src="url" :alt="name" class="prop-icon">
                            <span class="prop-name">{{ name }}</span>
                        </div>
                        <div class="prop-count">
                            <el-input-number 
                                v-model="selectedProps[name]"
                                :controls="true"
                                >
                            </el-input-number>
                        </div>
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleReset">重置</el-button>
                    <div>
                        <el-button @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="handleConfirm">确定</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </template>

    <!-- 统计面板模板 -->
    <template id="stats-panel-template">
        <!-- Tab栏 -->
        <div class="tab-header">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="汇总" name="summary">
                </el-tab-pane>
                <el-tab-pane label="预设" name="props">
                </el-tab-pane>
            </el-tabs>
            <!-- 功能按钮组 -->
            <div class="function-buttons">
                <el-button circle text @click="handleReset" title="重置">
                    <span class="material-icons">restart_alt</span>
                </el-button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div v-if="activeTab === 'summary'">
            <el-table 
                :data="summaryData"
                :border="true"
                :max-height="400"
                fixed-header>
                <el-table-column 
                    label="道具" 
                    width="155" 
                    fixed="left"
                    prop="name">
                    <template #default="{ row }">
                        <div v-if="row.name !== 'empty'" class="prop-info">
                            <img :src="propList[row.name]" :alt="row.name" class="prop-icon">
                            <span>{{ row.name }}</span>
                        </div>
                        <span v-else>empty</span>
                    </template>
                </el-table-column>
                <el-table-column label="总计" width="100" prop="total">
                    <template #default="{ row }">
                        <span>{{ row.total }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="初始值" width="100" prop="initial">
                    <template #default="{ row }">
                        <span>{{ row.initial }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="每日" width="100" prop="daily">
                    <template #default="{ row }">
                        <span>{{ row.daily }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="每周" width="100" prop="weekly">
                    <template #default="{ row }">
                        <span>{{ row.weekly }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="每月" width="100" prop="monthly">
                    <template #default="{ row }">
                        <span>{{ row.monthly }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="周期" width="100" prop="cycle">
                    <template #default="{ row }">
                        <span>{{ row.cycle }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="基础" width="100" prop="basic">
                    <template #default="{ row }">
                        <span>{{ row.basic }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-else>
            <div class="prop-content">
                <div v-for="(url, name) in propList" :key="name" class="prop-card">
                    <div class="prop-info">
                        <img :src="url" :alt="name" class="prop-icon">
                        <span class="prop-name">{{ name }}</span>
                    </div>
                    <div class="prop-count">
                        <el-input-number 
                            v-model="propCounts[name]"
                            :controls="true"
                            @change="handleCountChange(name)">
                        </el-input-number>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 导入弹窗模板 -->
    <template id="import-dialog-template">
        <el-dialog v-model="visible" title="导入数据" width="95%">
            <div class="dialog-form">
                <el-tabs v-model="activeCategory">
                    <el-tab-pane v-for="(templates, category) in templateData" :key="category" :label="category" :name="category">
                        <div class="template-buttons">
                            <el-button 
                                v-for="(template, key) in templates" 
                                :key="key"
                                @click="handleTemplateClick(template)">
                                {{ key }}
                            </el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="props-container">
                <el-input 
                    type="textarea" 
                    v-model="importData" 
                    :rows="3" 
                    placeholder="请输入或选择要导入的数据">
                </el-input>
            </div>

            <template #footer>
                <el-button @click="handleClear">清空</el-button>
                <el-button type="primary" @click="handleImport">导入</el-button>
            </template>
        </el-dialog>
    </template>

    <script src="calculator.js"></script>
</body>

</html>