该json生成器可搭配Nezha v1使用
在cloudflare中创建workers，填入以下代码
worker.js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const html = `<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON 生成器</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
#app {
width: 50vw;
min-width: 1000px;
margin: auto;
margin-top: 30px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 30px;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
</head>
<body>
${originalHtml}
</body>
</html>`
return new Response(html, {
headers: {
'Content-Type': 'text/html;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
'Cache-Control': 'public, max-age=3600'
}
})
}
const originalHtml = `<div id="app">
<el-row :gutter="20">
<el-col :xs="24" :sm="12">
<el-form :model="form" label-width="100px">
<!-- Billing Data Form -->
<el-divider content-position="left">Billing Data Form</el-divider>
<el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="form.billingDataMod.startDate" type="datetime" placeholder="选择开始日期"
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss+08:00">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker v-model="form.billingDataMod.endDate" type="datetime" placeholder="选择结束日期"
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss+08:00"
:disabled="form.billingDataMod.isIndefinite">
</el-date-picker>
<el-checkbox v-model="form.billingDataMod.isIndefinite">无期限</el-checkbox>
</el-form-item>
<el-form-item label="自动续期" prop="autoRenewal">
<el-switch v-model="form.billingDataMod.autoRenewal" active-text="是" inactive-text="否"
active-value="1" inactive-value="0" :disabled="isUnofficial">
</el-switch>
</el-form-item>
<el-form-item label="计费周期" prop="cycle">
<el-select v-model="form.billingDataMod.cycle" placeholder="选择计费周期">
<el-option label="月" value="月"></el-option>
<el-option label="季" value="季"></el-option>
<el-option label="半年" value="半年"></el-option>
<el-option label="年" value="年"></el-option>
</el-select>
</el-form-item>
<el-form-item label="金额" prop="amount">
<el-checkbox v-model="isAmountUnitBefore">前单位<span> 例如：￥9.99</span></el-checkbox>
<el-checkbox v-model="isAmountUnitAffter">后单位<span> 例如：9.99CNY</span></el-checkbox>
<el-input v-model="form.billingDataMod.amount" placeholder="输入金额"
:disabled="form.billingDataMod.isAmountFree || form.billingDataMod.isAmountPAYG">
<!-- 前单位组件 -->
<el-select v-model="amountBeforeUnit" slot="prepend" placeholder="请选择" filterable
:disabled="form.billingDataMod.isAmountFree || form.billingDataMod.isAmountPAYG"
v-if="isAmountUnitBefore" allow-create>
<el-option label="人民币 ￥" value="￥"></el-option>
<el-option label="美元 $" value="$"></el-option>
<el-option label="欧元 €" value="€"></el-option>
<el-option label="港币 HK$" value="HK$"></el-option>
<el-option label="加币 C$" value="C$"></el-option>
<el-option label="英镑 £" value="£"></el-option>
</el-select>
<!-- 后单位组件 -->
<el-select v-model="amountAffterUnit" slot="append" placeholder="请选择" filterable
:disabled="form.billingDataMod.isAmountFree || form.billingDataMod.isAmountPAYG"
v-if="isAmountUnitAffter" allow-create>
<el-option label="人民币 CNY" value="CNY"></el-option>
<el-option label="美元 USD" value="USD"></el-option>
<el-option label="欧元 EUR" value="EUR"></el-option>
<el-option label="港币 HKD" value="HKD"></el-option>
<el-option label="加币 CAD" value="CAD"></el-option>
<el-option label="英镑 GBP" value="GBP"></el-option>
</el-select>
</el-input>
<el-checkbox v-model="form.billingDataMod.isAmountFree"
:disabled="form.billingDataMod.isAmountPAYG">免费</el-checkbox>
<el-checkbox v-model="form.billingDataMod.isAmountPAYG"
:disabled="form.billingDataMod.isAmountFree">按量收费</el-checkbox>
</el-form-item>
<!-- Plan Data Form -->
<el-divider content-position="left">Plan Data Form
<el-checkbox v-model="isNoPlanDataForm">不开启</el-checkbox>
</el-divider>
<el-form-item label="带宽" prop="bandwidth">
<el-input placeholder="输入带宽" v-model="form.planDataMod.bandwidth" class="input-with-select"
:disabled="isNoPlanDataForm">
<el-select v-model="form.planDataMod.bandwidthUnit" slot="append" placeholder="请选择"
:disabled="isNoPlanDataForm">
<el-option label="Mbps" value="Mbps"></el-option>
<el-option label="Gbps" value="Gbps"></el-option>
<el-option label="无限制" value="Unlimited"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item label="流量" prop="trafficVol">
<el-input placeholder="输入流量限制" v-model="form.planDataMod.trafficVol" class="input-with-select"
:disabled="isNoPlanDataForm">
<el-select v-model="form.planDataMod.trafficUnit" slot="append" placeholder="请选择"
:disabled="isNoPlanDataForm">
<el-option label="MB/月" value="MB/月"></el-option>
<el-option label="TB/月" value="TB/月"></el-option>
<el-option label="GB/月" value="GB/月"></el-option>
<el-option label="PB/月" value="PB/月"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item label="流量类型" prop="trafficType">
<el-select v-model="form.planDataMod.trafficType" placeholder="选择流量类型" :disabled="isNoPlanDataForm">
<el-option label="只单向上行流量计费" value="1"></el-option>
<el-option label="双向上下行流量同时计费" value="2"></el-option>
<el-option label="取入栈和出栈最大的计费 [ Max(In, Out) ]" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="IPv4" prop="IPv4">
<el-switch v-model="form.planDataMod.IPv4" active-text="有" inactive-text="无" active-value="1"
inactive-value="0" :disabled="isNoPlanDataForm">
</el-switch>
</el-form-item>
<el-form-item label="IPv6" prop="IPv6">
<el-switch v-model="form.planDataMod.IPv6" active-text="有" inactive-text="无" active-value="1"
inactive-value="0" :disabled="isNoPlanDataForm">
</el-switch>
</el-form-item>
<el-form-item label="网络路由" prop="networkRoute">
<el-input v-model="form.planDataMod.networkRoute" placeholder="输入网络路由,使用','分割" :disabled="isNoPlanDataForm">
</el-input>
</el-form-item>
<el-form-item label="额外信息" prop="extra">
<el-input v-model="form.planDataMod.extra" placeholder="输入额外信息,使用','分割" :disabled="isNoPlanDataForm">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :xs="24" :sm="12">
<!-- JSON Output -->
<el-input type="textarea" :rows="20" :value="jsonOutput" readonly></el-input>
<div style="height: 10px;"></div>
<el-button type="primary" @click="generateJson">生成 JSON</el-button>
</el-col>
</el-row>
</div>
<script>
new Vue({
el: '#app',
watch: {
isAmountUnitBefore(n) {
if (n) {
this.isAmountUnitAffter = false;
}
},
isAmountUnitAffter(n) {
if (n) {
this.isAmountUnitBefore = false;
}
},
'form.billingDataMod.cycle'(n) {
if (/\d年|天/.test(n)) {
this.$alert(\`您使用的<strong>\${n}</strong>的计费周期，并不是官方支持的参数，<br /><strong>无法自动刷新及计算规划中的账单统计报表，<br />并禁用autoRenewal及cycle字段</strong>\`, '温馨提示', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true,
});
this.form.billingDataMod.autoRenewal = 0;
this.isUnofficial = true;
} else {
this.isUnofficial = false;
}
},
},
data() {
return {
isNoPlanDataForm: false,
isUnofficial: false,
amountUnitOrder: 2,
isAmountUnitBefore: true,
isAmountUnitAffter: false,
amountBeforeUnit: "￥",
amountAffterUnit: "CNY",
form: {
billingDataMod: {
startDate: new Date(),
endDate: new Date(),
isIndefinite: false,
autoRenewal: '1',
cycle: '月',
amount: '1',
isAmountFree: false,
isAmountPAYG: false
},
planDataMod: {
bandwidth: '30',
bandwidthUnit: 'Mbps',
trafficVol: '1',
trafficUnit: 'TB/月',
trafficType: '1',
IPv4: '1',
IPv6: '1',
networkRoute: '4837',
extra: ''
}
},
jsonOutput: ''
};
},
methods: {
generateJson() {
// 复制对象
let jo = JSON.parse(JSON.stringify(this.form));
// 处理无期限的情况
if (jo.billingDataMod.isIndefinite) {
jo.billingDataMod.endDate = '0000-00-00T23:59:59+08:00';
}
// 宽带单位
if (jo.planDataMod.bandwidthUnit == "Unlimited") {
jo.planDataMod.bandwidth = "Unlimited";
} else {
jo.planDataMod.bandwidth += jo.planDataMod.bandwidthUnit;
}
// 流量单位
jo.planDataMod.trafficVol += jo.planDataMod.trafficUnit;
// 金额单位
if (this.isAmountUnitBefore) {
jo.billingDataMod.amount = this.amountBeforeUnit + jo.billingDataMod.amount;
}
if (this.isAmountUnitAffter) {
jo.billingDataMod.amount += this.amountAffterUnit;
}
// 处理使用非官方计费周期
if (this.isUnofficial) {
jo.billingDataMod.amount += "/" + jo.billingDataMod.cycle;
jo.billingDataMod.cycle = "";
}
// 处理amount
if (jo.billingDataMod.isAmountFree) {
jo.billingDataMod.amount = '0';
}
if (jo.billingDataMod.isAmountPAYG) {
jo.billingDataMod.amount = '-1';
}
// 删除辅助参数
delete jo.billingDataMod.isIndefinite;
delete jo.billingDataMod.isAmountFree;
delete jo.billingDataMod.isAmountPAYG;
delete jo.planDataMod.bandwidthUnit;
delete jo.planDataMod.trafficUnit;
// 处理不要Plan Data Form
if(this.isNoPlanDataForm){
delete jo.planDataMod;
}
// 返回结果
this.jsonOutput = JSON.stringify(jo, null, 4);
}
}
});
</script>`