soul2
2 years ago
parent
7ded80703a
commit
bc96eaa91a
20 changed files with 1297 additions and 5 deletions
@ -0,0 +1,8 @@ |
|||||||
|
// to fixed https://github.com/ElemeFE/element/issues/2461 |
||||||
|
.el-dialog { |
||||||
|
transform: none; |
||||||
|
left: 0; |
||||||
|
position: relative; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/** |
||||||
|
* 求出多个数组的最小长度 |
||||||
|
* @returns {*|number} |
||||||
|
*/ |
||||||
|
Array.prototype.minFor = function () { |
||||||
|
return this.reduce((min, arr) => Math.min(min, arr.length), Infinity); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 让每个子数组只保留前n个元素 |
||||||
|
* @param n |
||||||
|
* @returns {*[]} |
||||||
|
*/ |
||||||
|
Array.prototype.startCut = function (n) { |
||||||
|
return this.map(arr => arr.slice(0, n)); |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
/** |
||||||
|
* 调用示例： |
||||||
|
* |
||||||
|
* var template1="我是{0}，今年{1}了"; |
||||||
|
* var template2="我是{name}，今年{age}了"; |
||||||
|
* var result1=template1.format("loogn",22); |
||||||
|
* var result2=template1.format({name:"loogn",age:22}); |
||||||
|
*/ |
||||||
|
|
||||||
|
String.prototype.format = function (args) { |
||||||
|
if (arguments.length > 0) { |
||||||
|
var result = this; |
||||||
|
if (arguments.length == 1 && typeof (args) == "object") { |
||||||
|
for (var key in args) { |
||||||
|
var reg = new RegExp("({" + key + "})", "g"); |
||||||
|
result = result.replace(reg, args[key]); |
||||||
|
} |
||||||
|
} else { |
||||||
|
for (var i = 0; i < arguments.length; i++) { |
||||||
|
if (arguments[i] == undefined) { |
||||||
|
return ""; |
||||||
|
} else { |
||||||
|
var reg = new RegExp("({[" + i + "]})", "g"); |
||||||
|
result = result.replace(reg, arguments[i]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return result; |
||||||
|
} else { |
||||||
|
return this; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 取出所有a到b中间的字符串 |
||||||
|
* |
||||||
|
* @param a |
||||||
|
* @param b |
||||||
|
*/ |
||||||
|
String.prototype.between = function (a, b) { |
||||||
|
if (arguments.length > 0) { |
||||||
|
var results = []; |
||||||
|
var reg = new RegExp(`\\${a}([^\\${b}]+)\\${b}`, "g"); |
||||||
|
var match; |
||||||
|
while ((match = reg.exec(this)) !== null) { |
||||||
|
results.push(match[1]); |
||||||
|
} |
||||||
|
return results; |
||||||
|
} else { |
||||||
|
return this.between("{", "}"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,195 @@ |
|||||||
|
export const defaultColorConfig = { |
||||||
|
learnLevel: '#33ccff', |
||||||
|
property: '#33cc33', |
||||||
|
hotKey: '#ffcc00', |
||||||
|
level: '#33ccff', |
||||||
|
learnUpdateLevel: '#ff9900', |
||||||
|
nature: '#ffcccc' |
||||||
|
} |
||||||
|
|
||||||
|
export function createObjs(len, fn) { |
||||||
|
let arr = []; |
||||||
|
for (let i = 0; i < len; i++) { |
||||||
|
let res = fn(i) |
||||||
|
arr.push(res) |
||||||
|
} |
||||||
|
return arr |
||||||
|
} |
||||||
|
|
||||||
|
export function formula2arr(str, keys = 'abcdefghijklmnopqrstuvwxyz'.split('')) { |
||||||
|
// 解析数量
|
||||||
|
let formulas = str.split(';'); |
||||||
|
const num = parseInt(formulas[0]) |
||||||
|
// 解析参数
|
||||||
|
formulas = formulas[1].split('/'); |
||||||
|
// 构建返回
|
||||||
|
const result = []; |
||||||
|
// 解析公式
|
||||||
|
formulas = formulas.map((f) => { |
||||||
|
let formula = f.split("+") |
||||||
|
formula = formula.map(e => parseInt(e)) |
||||||
|
return { |
||||||
|
base: formula[0], |
||||||
|
plus: formula[1] |
||||||
|
} |
||||||
|
}) |
||||||
|
// 生成对象
|
||||||
|
for (let i = 0; i < num; i++) { |
||||||
|
let obj = {} |
||||||
|
for (let j = 0; j < formulas.length; j++) { |
||||||
|
let key = keys[j] |
||||||
|
obj[key] = formulas[j].base + formulas[j].plus * i |
||||||
|
} |
||||||
|
result.push(obj) |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
function toCfg(s, c) { |
||||||
|
if (typeof s !== 'string') { |
||||||
|
return c |
||||||
|
} |
||||||
|
let items = s.split(", ") |
||||||
|
let cfg = c |
||||||
|
if (items.length > 0) { |
||||||
|
items.forEach((e) => { |
||||||
|
let p = e.split(":") |
||||||
|
cfg[p[0]] = p[1] |
||||||
|
}) |
||||||
|
} |
||||||
|
return cfg |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 以[xxx]的形式分析数据，自定义配置使用{}在参数str内附带，没有指定自定义配置时会使用默认配置 |
||||||
|
* 例：[a=2/3/4][b=16+8][lv=3]{ls:/, fs:,} |
||||||
|
* warning: 自定义配置以“， ”为分隔符，空格不可省略 |
||||||
|
* |
||||||
|
* @param str |
||||||
|
* @param cfg <ul>配置: |
||||||
|
* <li>fs：公式数据的分隔符</li> |
||||||
|
* <li>ls：数值列表的分隔符</li> |
||||||
|
* <li>es：属性的分隔符</li> |
||||||
|
* <li>lv：等级的属性名</li> |
||||||
|
* </ul> |
||||||
|
* @returns {*[]} |
||||||
|
*/ |
||||||
|
export function conversion(str, cfg = {fs: "+", ls: ",", es: "=", lv: "lv"}) { |
||||||
|
// 加载自定义配置
|
||||||
|
cfg = toCfg(str.between()[0], cfg) |
||||||
|
// 过滤无效信息
|
||||||
|
const pairs = checkValid((str).between("[", "]")) |
||||||
|
// 判断必备条件，否则返回空数组
|
||||||
|
if (str.indexOf("[" + cfg.lv + cfg.es) === -1 || isNaN(parseInt((str).between("[" + cfg.lv + cfg.es, "]")))) { |
||||||
|
return [] |
||||||
|
} |
||||||
|
const lv = parseInt((str).between("[" + cfg.lv + cfg.es, "]")) |
||||||
|
let items = {} |
||||||
|
let itemKeys = [] |
||||||
|
const result = [] |
||||||
|
pairs.forEach(pair => { |
||||||
|
let p = pair.split(cfg.es) |
||||||
|
itemKeys.push(p[0]) |
||||||
|
if (p[1].indexOf(cfg.fs) !== -1) { // 有+号，是公式
|
||||||
|
let fps = p[1].split(cfg.fs) |
||||||
|
let rules = {base: parseFloat(fps[0]), plus: parseFloat(fps[1])} |
||||||
|
items[p[0]] = createObjs(lv, i => rules.base + rules.plus * i) |
||||||
|
} else { // 没有+号，是数值list
|
||||||
|
items[p[0]] = arrCut(p[1].split(cfg.ls).filter(e => !isNaN(parseFloat(e))).map(e => parseFloat(e)), lv) |
||||||
|
} |
||||||
|
}) |
||||||
|
for (let i = 0; i < lv; i++) { |
||||||
|
let obj = {} |
||||||
|
itemKeys.forEach((k, n) => { |
||||||
|
obj[k] = items[k][i] |
||||||
|
}) |
||||||
|
result.push(obj) |
||||||
|
} |
||||||
|
return result |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 检查输入的内容是否为a=b的形式，并返回合格的内容 |
||||||
|
* a的通过规则：为a-z的其中一个 |
||||||
|
* b可以是任意字符串 |
||||||
|
* |
||||||
|
* @param arr |
||||||
|
* @returns {*[]} |
||||||
|
*/ |
||||||
|
export function checkValid(arr) { |
||||||
|
const result = []; |
||||||
|
for (let i = 0; i < arr.length; i++) { |
||||||
|
const str = arr[i]; |
||||||
|
const regex = /^[a-z]=[^\s]+$/; |
||||||
|
if (regex.test(str)) { |
||||||
|
result.push(str); |
||||||
|
} |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
export function copyToClipboard(text) { |
||||||
|
const textarea = document.createElement('textarea'); // 创建一个文本域元素
|
||||||
|
textarea.value = text; // 将传入的文本内容赋值给文本域
|
||||||
|
textarea.setAttribute('readonly', ''); // 设置文本域只读
|
||||||
|
textarea.style.position = 'absolute'; |
||||||
|
textarea.style.left = '-9999px'; // 将文本域定位到屏幕外
|
||||||
|
document.body.appendChild(textarea); // 将文本域添加到页面上
|
||||||
|
textarea.select(); // 选中文本域中的内容
|
||||||
|
document.execCommand('copy'); // 将选中的内容复制到系统剪切板
|
||||||
|
document.body.removeChild(textarea); // 移除文本域
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 如果a的长度超过b就返回a的前b项 |
||||||
|
* 如果小于则添加字符串"null"使a的长度到达b |
||||||
|
* 如果相等则直接返回a |
||||||
|
* |
||||||
|
* @param arr |
||||||
|
* @param targetLength |
||||||
|
* @returns {*} |
||||||
|
*/ |
||||||
|
function arrCut(arr, targetLength) { |
||||||
|
if (arr.length > targetLength) { |
||||||
|
return arr.slice(0, targetLength); |
||||||
|
} else if (arr.length < targetLength) { |
||||||
|
let nulls = new Array(targetLength - arr.length).fill("null"); |
||||||
|
return arr.concat(nulls); |
||||||
|
} else { |
||||||
|
return arr; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 中文标点符号换成英文标点符号，以赋予输入中文符号不出错的能力 |
||||||
|
* |
||||||
|
* @param str |
||||||
|
* @returns {*} |
||||||
|
* @constructor |
||||||
|
*/ |
||||||
|
export function symbolCn2En(str) { |
||||||
|
if (Array.isArray(str)) { |
||||||
|
return str.map(s => symbolCn2En(s)); |
||||||
|
} |
||||||
|
const map = { |
||||||
|
'，': ',', |
||||||
|
'。': '.', |
||||||
|
'？': '?', |
||||||
|
'！': '!', |
||||||
|
'：': ':', |
||||||
|
'；': ';', |
||||||
|
'“': '"', |
||||||
|
'”': '"', |
||||||
|
'‘': "'", |
||||||
|
'’': "'", |
||||||
|
'（': '(', |
||||||
|
'）': ')', |
||||||
|
'【': '[', |
||||||
|
'】': ']', |
||||||
|
'《': '<', |
||||||
|
'》': '>', |
||||||
|
'、': ',' |
||||||
|
}; |
||||||
|
return str.replaceAll(/[\u4e00-\u9fa5]/g, c => map[c] || c); |
||||||
|
} |
||||||
@ -0,0 +1,272 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-form ref="form" :model="colorConfig" label-width="110px"> |
||||||
|
<el-col :span="11" class="example-box"> |
||||||
|
<spell |
||||||
|
v-if="e.name === exampleSpell" |
||||||
|
v-for="(e,i) in exampleSpellList" |
||||||
|
:spell-data="e" |
||||||
|
:color-config="colorConfig" |
||||||
|
:module="effectExample" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12" :offset="1" class="example-setting"> |
||||||
|
<el-row style="text-align:left;"> |
||||||
|
<el-divider content-position="left">示例设置</el-divider> |
||||||
|
<p> |
||||||
|
<el-radio-group v-model="effectExample" size="mini"> |
||||||
|
<el-radio-button label="学习"></el-radio-button> |
||||||
|
<el-radio-button label="普通"></el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<el-radio-group v-model="exampleSpell" size="mini" @change="handleExampleChange"> |
||||||
|
<el-radio-button v-for="(e,i) in exampleSpellList" :label="e.name"></el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<el-radio-group v-model="exampleLevel" size="mini" @change="handleExampleLevelChange"> |
||||||
|
<el-radio-button |
||||||
|
v-for="(e,i) in exampleLevelList" |
||||||
|
:label="(i+1)" |
||||||
|
>{{ (1 + i) + '级' }} |
||||||
|
</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</p> |
||||||
|
</el-row> |
||||||
|
<el-row style="margin-top: 15px;"> |
||||||
|
<el-form-item label="热键：" style="margin-bottom: 0;"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-color-picker size="mini" v-model="colorConfig.hotKey"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7">{{ colorConfig.hotKey }}</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="学习等级：" style="margin-bottom: 0;"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-color-picker size="mini" v-model="colorConfig.learnLevel"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7">{{ colorConfig.learnLevel }}</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="技能属性：" style="margin-bottom: 0;"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-color-picker size="mini" v-model="colorConfig.property"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7">{{ colorConfig.property }}</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="升级等级前缀：" style="margin-bottom: 0;"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-color-picker size="mini" v-model="colorConfig.learnUpdateLevel"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7">{{ colorConfig.learnUpdateLevel }}</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="特殊描述：" style="margin-bottom: 0;"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-color-picker size="mini" v-model="colorConfig.nature"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7">{{ colorConfig.nature }}</el-col> |
||||||
|
</el-form-item> |
||||||
|
<div style="text-align:right;margin-top: 15px;margin-bottom: 15px;"> |
||||||
|
<el-button size="mini" type="primary" plain @click="resetColorConfig">恢复默认</el-button> |
||||||
|
<el-button size="mini" type="success" plain @click="saveColorConfig">保存</el-button> |
||||||
|
<el-button size="mini" type="warning" plain @click="loadColorConfig">读取</el-button> |
||||||
|
<el-button size="mini" type="danger" plain @click="removeColorConfig">删除</el-button> |
||||||
|
</div> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Spell from "@/views/wc3word/spell"; |
||||||
|
import {createObjs, defaultColorConfig} from "@/utils/tools"; |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Color', |
||||||
|
props: { |
||||||
|
colorDefaultConfig: Object |
||||||
|
}, |
||||||
|
components: {Spell, defaultColorConfig}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
colorCfg: {}, |
||||||
|
exampleSpell: null, |
||||||
|
exampleLevel: 1, |
||||||
|
effectExample: '学习', |
||||||
|
exampleSpellList: [ |
||||||
|
{ |
||||||
|
id: "Ahtb", |
||||||
|
lv: "1", |
||||||
|
name: "风暴之锤", |
||||||
|
hotKey: "T", |
||||||
|
effect: "向目标投掷一巨大的魔法锤，对其造成一定伤害并使其陷入眩晕。", |
||||||
|
pros: [ |
||||||
|
{name: '法力消耗', val: '75'}, |
||||||
|
{name: '施法距离', val: '800'}, |
||||||
|
{name: '冷却时间', val: '6'}, |
||||||
|
], |
||||||
|
updateWord: { |
||||||
|
text: "{d}点伤害，{t}秒的晕眩时间", |
||||||
|
vals: createObjs(5, i => ({d: 100 + i * 110, t: 3 + i})) |
||||||
|
}, |
||||||
|
nature: "", |
||||||
|
normalWord: { |
||||||
|
text: '向目标投掷一巨大的魔法锤，对其造成{d}点伤害并使其{t}秒内处于眩晕状态。', |
||||||
|
vals: createObjs(5, i => ({d: 100 + i * 110, t: 3 + i})) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "Ahbz", |
||||||
|
lv: "1", |
||||||
|
name: "暴风雪", |
||||||
|
hotKey: "F", |
||||||
|
effect: "能召唤出若干次冰片攻击，对目标区域内的单位造成一定的伤害。", |
||||||
|
pros: [ |
||||||
|
{name: '法力消耗', val: '75'}, |
||||||
|
{name: '施法距离', val: '600'}, |
||||||
|
{name: '冷却时间', val: '9'}, |
||||||
|
], |
||||||
|
updateWord: { |
||||||
|
text: "召唤{c}次，每次{d}点伤害。", |
||||||
|
vals: createObjs(6, i => ({c: i * 2 + 6, d: i * 10 + 30})) |
||||||
|
}, |
||||||
|
nature: "需要持续施法", |
||||||
|
normalWord: { |
||||||
|
text: '召唤出{c}次的冰片攻击，每一次攻击能对一小块区域内的单位造成{d}的伤害值。', |
||||||
|
vals: createObjs(6, i => ({c: i * 2 + 6, d: i * 10 + 30})) |
||||||
|
} |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
exampleLevelList() { |
||||||
|
return this.exampleSpellList.filter(e => e.name === this.exampleSpell)[0].updateWord.vals.length |
||||||
|
}, |
||||||
|
colorConfig() { |
||||||
|
return this.colorCfg |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
colorCfg() { |
||||||
|
this.$emit("updateCfg", this.colorCfg) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.colorCfg = Object.assign({}, this.colorDefaultConfig) |
||||||
|
this.exampleSpell = this.exampleSpellList[0].name |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
saveColorConfig() { |
||||||
|
// console.log('saving') |
||||||
|
let colorConfigList = JSON.parse(localStorage.getItem('color-config-list') || '[]') |
||||||
|
let colorCfgNames = colorConfigList.map(e => e.name) |
||||||
|
this.$prompt('取个名字吧!\n会覆盖同名的方案。', '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
// cancelButtonText: '取消', |
||||||
|
showCancelButton: false, |
||||||
|
showClose: false, |
||||||
|
}).then(({value}) => { |
||||||
|
let index = colorCfgNames.indexOf(value) |
||||||
|
if (index === -1) { |
||||||
|
colorConfigList.push({name: value, cfg: this.colorConfig}) |
||||||
|
} else { |
||||||
|
colorConfigList[index].cfg = this.colorConfig |
||||||
|
} |
||||||
|
localStorage.setItem('color-config-list', JSON.stringify(colorConfigList)) |
||||||
|
this.$message({type: 'success', message: '保存成功！'}); |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
loadColorConfig() { |
||||||
|
let colorConfigList = JSON.parse(localStorage.getItem('color-config-list') || '[]') |
||||||
|
if (colorConfigList.length > 0) { |
||||||
|
let colorCfgNames = colorConfigList.map(e => e.name) |
||||||
|
this.$prompt('你要读取哪个方案？\n已保存方案：\n' + colorCfgNames, '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
// cancelButtonText: '取消', |
||||||
|
showCancelButton: false, |
||||||
|
showClose: false, |
||||||
|
}).then(({value}) => { |
||||||
|
let index = colorCfgNames.indexOf(value) |
||||||
|
if (index === -1) { |
||||||
|
this.$message({type: 'error', message: '方案不存在！'}); |
||||||
|
} else { |
||||||
|
this.colorConfig = colorConfigList[index].cfg |
||||||
|
this.$message({type: 'success', message: '读取成功！'}); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message({type: 'error', message: '没有已保存的方案！'}); |
||||||
|
} |
||||||
|
}, |
||||||
|
removeColorConfig() { |
||||||
|
let colorConfigList = JSON.parse(localStorage.getItem('color-config-list') || '[]') |
||||||
|
if (colorConfigList.length > 0) { |
||||||
|
let colorCfgNames = colorConfigList.map(e => e.name) |
||||||
|
this.$prompt('你要删除哪个方案？\n已保存方案的名称有：\n' + colorCfgNames, |
||||||
|
'提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
// cancelButtonText: '取消', |
||||||
|
showCancelButton: false, |
||||||
|
showClose: false, |
||||||
|
}).then(({value}) => { |
||||||
|
let index = colorCfgNames.indexOf(value) |
||||||
|
if (index === -1) { |
||||||
|
this.$message({type: 'error', message: '方案不存在！'}); |
||||||
|
} else { |
||||||
|
colorConfigList = colorConfigList.filter(e => e !== colorConfigList[index]) |
||||||
|
localStorage.setItem('color-config-list', JSON.stringify(colorConfigList)) |
||||||
|
this.$message({type: 'success', message: '操作成功！'}); |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message({type: 'error', message: '没有已保存的方案！'}); |
||||||
|
} |
||||||
|
}, |
||||||
|
resetColorConfig() { |
||||||
|
// console.log('reset') |
||||||
|
this.colorCfg = Object.assign({}, defaultColorConfig) |
||||||
|
}, |
||||||
|
handleExampleChange() { |
||||||
|
this.exampleSpellList.map(e => e.lv = 1) |
||||||
|
this.exampleLevel = 1 |
||||||
|
}, |
||||||
|
handleExampleLevelChange() { |
||||||
|
this.exampleSpellList.map(e => e.lv = this.exampleLevel) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
.example-setting el-form-item { |
||||||
|
el-color-picker { |
||||||
|
min-width: 80px; |
||||||
|
} |
||||||
|
|
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.example-setting p { |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.example-box { |
||||||
|
max-height: 40vh; |
||||||
|
} |
||||||
|
|
||||||
|
.example-box p { |
||||||
|
font-size: 12px !important; |
||||||
|
font-weight: bold !important; |
||||||
|
overflow-y: auto; |
||||||
|
max-height: 30vh; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,184 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="dialog" width="50%" :title="title" :visible.sync="visible" @close="closeDialog" |
||||||
|
:append-to-body="true" :show-close="false" :transition="dialogTransition"> |
||||||
|
<div class="builder-dialog"> |
||||||
|
<el-col :span="12" style="padding-right: 20px;"> |
||||||
|
<el-divider content-position="center">结果展示</el-divider> |
||||||
|
<spell :spell-data="spell" :module="spellModule" :color-config="color"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="11" :offset="1" class="cp-rect"> |
||||||
|
<el-divider content-position="left">结果展示设置</el-divider> |
||||||
|
<el-radio-group v-model="spellModule" size="mini"> |
||||||
|
<el-radio-button label="学习"></el-radio-button> |
||||||
|
<el-radio-button label="普通"></el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
<el-row class="cp-item"> |
||||||
|
<el-radio-group v-model="spellData.lv" size="mini"> |
||||||
|
<el-radio-button |
||||||
|
v-for="(e,i) in exampleLevelList" |
||||||
|
:label="(i+1)" |
||||||
|
>{{ (1 + i) + '级' }} |
||||||
|
</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-row> |
||||||
|
<el-row class="cp-item"> |
||||||
|
<el-divider content-position="left">点击复制</el-divider> |
||||||
|
<el-button-group> |
||||||
|
<el-button type="success" plain size="mini" |
||||||
|
@click="handleBuilder('title')">学习标题 |
||||||
|
</el-button> |
||||||
|
<el-button type="success" plain size="mini" |
||||||
|
@click="handleBuilder('export')">学习扩展 |
||||||
|
</el-button> |
||||||
|
</el-button-group> |
||||||
|
</el-row> |
||||||
|
<el-row class="cp-item" v-for="(e,i) in spell.updateWord.vals"> |
||||||
|
<el-button-group> |
||||||
|
<el-button :type="i%2===1?'success':'primary'" plain size="mini" |
||||||
|
@click="handleBuilder('title', (i+1))"> |
||||||
|
{{ (i + 1) }}级标题 |
||||||
|
</el-button> |
||||||
|
<el-button :type="i%2===1?'success':'primary'" plain size="mini" |
||||||
|
@click="handleBuilder('export', (i+1))"> |
||||||
|
{{ (i + 1) }}级扩展 |
||||||
|
</el-button> |
||||||
|
</el-button-group> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
</div> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="visible = false" size="mini">关闭</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Spell from "@/views/wc3word/spell"; |
||||||
|
import {copyToClipboard} from "@/utils/tools"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SpellBuilderDialog', |
||||||
|
props: { |
||||||
|
spellData: { |
||||||
|
type: Object, |
||||||
|
default: () => false |
||||||
|
}, |
||||||
|
colorConfig: Object, |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: () => false |
||||||
|
} |
||||||
|
}, |
||||||
|
components: {Spell}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
visible: this.show, |
||||||
|
spellModule: '学习', |
||||||
|
dialogTransition: 'dialog-fade' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
spell() { |
||||||
|
return this.spellData |
||||||
|
}, |
||||||
|
exampleLevelList() { |
||||||
|
return this.spellData.updateWord.vals.length || 1 |
||||||
|
}, |
||||||
|
color() { |
||||||
|
return this.colorConfig |
||||||
|
}, |
||||||
|
title() { |
||||||
|
return '技能文本生成结果' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
this.$emit('update:show', false) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closeDialog() { |
||||||
|
// 关闭 |
||||||
|
}, |
||||||
|
handleSave() { |
||||||
|
}, |
||||||
|
dyeing(str, color) { |
||||||
|
const prefix = '|cfff' |
||||||
|
const suffix = '|r' |
||||||
|
return color ? (prefix + color.replace('#', "") + str + suffix) : str |
||||||
|
}, |
||||||
|
handleBuilder(module, lv) { |
||||||
|
const {learnLevel, property, hotKey, level, learnUpdateLevel, nature} = this.color |
||||||
|
const sp = this.spell |
||||||
|
let result = '' |
||||||
|
if (!lv) { |
||||||
|
// 无lv 是学习文本 |
||||||
|
lv = '%d' |
||||||
|
if (module === 'title') { |
||||||
|
result = `学习 ${this.dyeing(lv + ' 级', learnLevel)} ${sp.name}(${this.dyeing(sp.hotKey, hotKey)})` |
||||||
|
} else if (module === 'export') { |
||||||
|
result += sp.effect + '\n' |
||||||
|
result += sp.natual ? (sp.natual + '\n') : '' |
||||||
|
sp.pros.forEach(e => { |
||||||
|
result += `\n${this.dyeing(e.name, property)}：${e.val}` |
||||||
|
}) |
||||||
|
if (sp.updateWord.text && sp.updateWord.vals) { |
||||||
|
result += "\n" |
||||||
|
sp.updateWord.vals.forEach((v, i) => { |
||||||
|
let w = sp.updateWord.text.format(v) |
||||||
|
w = w.endsWith("。") ? w : w + "。" |
||||||
|
result += `\n${this.dyeing((i + 1) + '级', learnUpdateLevel)} - ${w}` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 有lv 是普通文本 |
||||||
|
if (module === 'title') { |
||||||
|
result = `${sp.name}(${this.dyeing(sp.hotKey, hotKey)}) - [${this.dyeing(lv + ' 级', learnLevel)}]` |
||||||
|
} else if (module === 'export') { |
||||||
|
let n = sp.normalWord |
||||||
|
let ps = sp.pros.filter(e => e.name !== '法力消耗') |
||||||
|
result += n.text.format(n.vals[lv - 1]) |
||||||
|
result += sp.natual ? (sp.natual + '\n') : '' |
||||||
|
if (ps && ps.length > 0) { |
||||||
|
result += '\n' |
||||||
|
ps.forEach(p => { |
||||||
|
result += `\n${this.dyeing(p.name, property)}：${p.val}` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log('result -> ', result) |
||||||
|
// return result |
||||||
|
copyToClipboard(result) |
||||||
|
const h = this.$createElement; |
||||||
|
this.$notify({ |
||||||
|
title: '来自Soul2的提示', |
||||||
|
message: h('span', {style: 'color: teal'}, '生成的文本已输出到剪切板。'), |
||||||
|
position: 'bottom-right', |
||||||
|
duration: 3000, |
||||||
|
// showClose: false |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.builder-dialog { |
||||||
|
overflow-y: auto; |
||||||
|
min-height: 35vh; |
||||||
|
padding-left: 5%; |
||||||
|
padding-right: 5%; |
||||||
|
|
||||||
|
.cp-rect .cp-item { |
||||||
|
margin-top: 8px; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="dialogForm" width="45%" :title="title" :visible.sync="visible" @close="closeDialog" |
||||||
|
:append-to-body="true" :show-close="false"> |
||||||
|
<!-- <div slot="footer" class="dialog-footer">--> |
||||||
|
<!-- <el-button @click="visible = false">取消</el-button>--> |
||||||
|
<!-- <el-button type="primary" @click="handleSave">保存</el-button>--> |
||||||
|
<!-- </div>--> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'UpdateRecordDialog', |
||||||
|
props: { |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: () => false |
||||||
|
} |
||||||
|
}, |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
visible: this.show, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
title() { |
||||||
|
return '更新记录' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
this.$emit('update:show', false) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closeDialog() { |
||||||
|
// 关闭 |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,286 @@ |
|||||||
|
<template> |
||||||
|
<div class="edit-container"> |
||||||
|
<el-col :span="9" style="padding-top: 2vh;text-align:left;"> |
||||||
|
<el-row class="spell-info-setting"> |
||||||
|
<el-radio-group v-model="spellInfo.module" size="mini"> |
||||||
|
<el-radio-button label="学习"></el-radio-button> |
||||||
|
<el-radio-button label="普通"></el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-row> |
||||||
|
<el-row class="spell-info-setting"> |
||||||
|
<el-radio-group v-model="spellData.lv" size="mini"> |
||||||
|
<el-radio-button |
||||||
|
v-for="(e,i) in exampleLevelList" |
||||||
|
:label="(i+1)" |
||||||
|
>{{ (1 + i) + '级' }} |
||||||
|
</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-row> |
||||||
|
<el-row class="spell-info-setting"> |
||||||
|
<el-button size="mini" type="success" plain @click="handleBuilder">生成</el-button> |
||||||
|
<el-button size="mini" type="primary" plain @click="handleResetSpellData">恢复默认</el-button> |
||||||
|
</el-row> |
||||||
|
<spell :module="spellInfo.module" :spell-data="spellData" :color-config="colorConfig"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="14" :offset="1"> |
||||||
|
<el-card shadow="always"> |
||||||
|
<el-form class="edit-form" size="mini" ref="editForm" v-model="spellData" label-width="90px"> |
||||||
|
<el-divider content-position="left">在此填写</el-divider> |
||||||
|
<el-row> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-form-item label="名称"> |
||||||
|
<el-col :span="21"> |
||||||
|
<el-input v-model="spellData.name" placeholder="技能名称"/> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="热键" label-width="45px"> |
||||||
|
<el-input v-model="spellData.hotKey" placeholder="热键"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-form-item label="技能描述"> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 3}" |
||||||
|
placeholder="例：能召唤出若干次冰片攻击，对目标区域内的单位造成一定的伤害。" |
||||||
|
v-model="spellData.effect"/> |
||||||
|
</el-form-item> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-form-item label="特点"> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 3}" placeholder="例：需要持续施法" |
||||||
|
v-model="spellData.nature"/> |
||||||
|
</el-form-item> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-form-item> |
||||||
|
<template slot="label"> |
||||||
|
<span>升级描述</span> |
||||||
|
<el-tooltip placement="top" effect="light"> |
||||||
|
<template slot="content"> |
||||||
|
用{}来标记数值的位置，{}内用<span style="color:#f00;">各不相同</span>的小写abcd来区分。<br> |
||||||
|
例：{a}点伤害，晕眩时间{b}秒。<br> |
||||||
|
数值的语法:<br> |
||||||
|
[lv=3][a=1,2,3][b=20+10]<br> |
||||||
|
其中a、b与上述数值的标记对应；lv=3表示一共有3个等级 <br> |
||||||
|
[b=20+10]中 20+10表示公式，意思是1级是20，后面每级+10；而[a=1,2,3]表示每个等级的数值 |
||||||
|
</template> |
||||||
|
<i class="el-icon-question" style="cursor:pointer;"></i> |
||||||
|
</el-tooltip> |
||||||
|
</template> |
||||||
|
<el-input placeholder="学习技能时显示的“1级 - xx伤害，xx秒时间。”" |
||||||
|
v-model="spellData.updateWord.text" @change="handleTempDataForUpdate"/> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" |
||||||
|
placeholder="数值" |
||||||
|
v-model="tempData.updateWord" @change="handleTempDataForUpdate"/> |
||||||
|
</el-form-item> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-form-item> |
||||||
|
<template slot="label"> |
||||||
|
<span>普通描述</span> |
||||||
|
<el-tooltip placement="top" effect="light"> |
||||||
|
<template slot="content"> |
||||||
|
用{}来标记数值的位置，{}内用<span style="color:#f00;">各不相同</span>的小写abcd来区分。<br> |
||||||
|
例：造成{a}点伤害并使其{b}秒内陷入晕眩。 |
||||||
|
数值的语法:<br> |
||||||
|
[lv=3][a=1,2,3][b=20+10]<br> |
||||||
|
其中a、b与上述数值的标记对应；lv=3表示一共有3个等级 <br> |
||||||
|
[b=20+10]中 20+10表示公式，意思是1级是20，后面每级+10；而[a=1,2,3]表示每个等级的数值 |
||||||
|
</template> |
||||||
|
<i class="el-icon-question" style="cursor:pointer;"></i> |
||||||
|
</el-tooltip> |
||||||
|
</template> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" |
||||||
|
placeholder="向目标投掷一巨大的魔法锤，对其造成100点伤害并使其3秒内处于眩晕状态。" |
||||||
|
v-model="spellData.normalWord.text" @change="handleTempDataForNormal"/> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" |
||||||
|
placeholder="数值" |
||||||
|
v-model="tempData.normalWord" @change="handleTempDataForNormal"/> |
||||||
|
</el-form-item> |
||||||
|
</el-row> |
||||||
|
<el-divider content-position="left">技能属性</el-divider> |
||||||
|
<el-row v-for="(e,i) in spellData.pros" style="margin-bottom: 12px;"> |
||||||
|
<el-col :span="2" style="line-height: 40px;text-align:right;"> |
||||||
|
<i class="el-icon-remove" style="font-size: 18px; margin-right: 5px;cursor: pointer;color:#F56C6C;" |
||||||
|
@click="spellData.pros = spellData.pros.filter(f=>f!==e)"></i> |
||||||
|
</el-col> |
||||||
|
<el-col :span="13"> |
||||||
|
<el-autocomplete class="inline-input" v-model="e.name" placeholder="请输入名称" |
||||||
|
:fetch-suggestions="querySearch"></el-autocomplete> |
||||||
|
</el-col> |
||||||
|
<el-col :span="9"> |
||||||
|
<el-input v-model="e.val" placeholder="请输入值"/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div style="text-align:left;padding-left: 50px;margin-bottom: 20px;"> |
||||||
|
<el-link type="primary" @click="addSpellPro">添加...</el-link> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<spell-builder-dialog v-if="spellBuilderCfg.show" :show.sync="spellBuilderCfg.show" |
||||||
|
:spell-data="spellBuilderCfg.data" :color-config="colorConfig"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Spell from "@/views/wc3word/spell"; |
||||||
|
import {conversion} from "@/utils/tools"; |
||||||
|
import SpellBuilderDialog from "@/views/wc3word/dialog/SpellBuilder"; |
||||||
|
|
||||||
|
const default_spell_data = { |
||||||
|
id: "A000", |
||||||
|
lv: "1", |
||||||
|
name: null, |
||||||
|
hotKey: null, |
||||||
|
effect: null, |
||||||
|
pros: [{name: '法力消耗', val: null},], |
||||||
|
updateWord: {text: '', vals: []}, |
||||||
|
nature: undefined, |
||||||
|
normalWord: {text: '', vals: []}, |
||||||
|
} |
||||||
|
const default_spell_info = { |
||||||
|
module: '学习', |
||||||
|
} |
||||||
|
const default_spell_pro_list = [ |
||||||
|
{name: '法力消耗', val: null}, |
||||||
|
{name: '施法距离', val: null}, |
||||||
|
{name: '冷却时间', val: null}, |
||||||
|
{name: '持续时间', val: null}, |
||||||
|
{name: '法术范围', val: null}, |
||||||
|
{name: '吟唱时间', val: null}, |
||||||
|
] |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Edit', |
||||||
|
props: { |
||||||
|
colorConfig: Object |
||||||
|
}, |
||||||
|
components: {SpellBuilderDialog, Spell}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tempData: {}, |
||||||
|
spellBuilderCfg: { |
||||||
|
show: false, |
||||||
|
data: null |
||||||
|
}, |
||||||
|
spellDataObj: Object.assign({}, default_spell_data), |
||||||
|
spellInfo: Object.assign({}, default_spell_info), |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
spellData() { |
||||||
|
return this.spellDataObj |
||||||
|
}, |
||||||
|
spellDefaultProNames() { |
||||||
|
return default_spell_pro_list.map(e => ({value: e.name})) |
||||||
|
}, |
||||||
|
exampleLevelList() { |
||||||
|
return this.spellData.updateWord.vals.length || 1 |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
spellDataObj: { |
||||||
|
handler(newVal) { |
||||||
|
localStorage.setItem('lastSpellData', JSON.stringify(newVal)); |
||||||
|
}, |
||||||
|
deep: true // 监听嵌套属性的变化 |
||||||
|
}, |
||||||
|
tempData: { |
||||||
|
handler(newVal) { |
||||||
|
localStorage.setItem('lastTempData', JSON.stringify(newVal)); |
||||||
|
}, |
||||||
|
deep: true // 监听嵌套属性的变化 |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
if (localStorage.getItem('lastSpellData') != null) { |
||||||
|
// console.log(localStorage.getItem('lastSpellData')) |
||||||
|
this.spellDataObj = JSON.parse(localStorage.getItem('lastSpellData')) |
||||||
|
} |
||||||
|
if (localStorage.getItem('lastTempData') != null) { |
||||||
|
// console.log(localStorage.getItem('lastTempData')) |
||||||
|
this.tempData = JSON.parse(localStorage.getItem('lastTempData')) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
querySearch(queryString, cb) { |
||||||
|
var restaurants = this.spellDefaultProNames; |
||||||
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; |
||||||
|
// 调用 callback 返回建议列表的数据 |
||||||
|
cb(results); |
||||||
|
}, |
||||||
|
createFilter(queryString) { |
||||||
|
return (restaurant) => { |
||||||
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); |
||||||
|
}; |
||||||
|
}, |
||||||
|
addSpellPro() { |
||||||
|
this.spellData.pros.push({}) |
||||||
|
}, |
||||||
|
handleResolveTempData(s) { |
||||||
|
var sStrList = s.between("[", "]") |
||||||
|
var result = [] |
||||||
|
sStrList.forEach((sStr, i) => { |
||||||
|
var vs = sStr.split(",") |
||||||
|
result.push(vs) |
||||||
|
}) |
||||||
|
var minLv = result.minFor() |
||||||
|
if (!minLv) { |
||||||
|
return minLv |
||||||
|
} |
||||||
|
return result.startCut(minLv) |
||||||
|
}, |
||||||
|
handleTempDataForNormal() { |
||||||
|
var ori = this.tempData.normalWord |
||||||
|
var ns = this.spellData.normalWord |
||||||
|
if (ori && ns.text) { |
||||||
|
ns.vals = conversion(ori) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleTempDataForUpdate() { |
||||||
|
var ori = this.tempData.updateWord |
||||||
|
var ns = this.spellData.updateWord |
||||||
|
if (ori && ns.text) { |
||||||
|
ns.vals = conversion(ori) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleBuilder() { |
||||||
|
// console.log('开始生成 -> ', this.spellData) |
||||||
|
this.spellBuilderCfg.show = true |
||||||
|
this.spellBuilderCfg.data = Object.assign({}, this.spellData) |
||||||
|
}, |
||||||
|
handleResetSpellData() { |
||||||
|
this.spellDataObj = Object.assign({}, default_spell_data) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.edit-container { |
||||||
|
* { |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.spell-info-setting { |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.edit-form { |
||||||
|
padding-right: 5%; |
||||||
|
padding-left: 5%; |
||||||
|
overflow-y: auto; |
||||||
|
max-height: 68vh; |
||||||
|
} |
||||||
|
|
||||||
|
padding-left: 5%; |
||||||
|
padding-right: 5%; |
||||||
|
max-height: 68vh; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-tabs type="border-card" style="min-height: 50vh;"> |
||||||
|
<!-- <el-tab-pane>--> |
||||||
|
<!-- <span slot="label">简介</span>--> |
||||||
|
<!-- <div>这是一个wc3编辑器文本生成器，它还在制作中。</div>--> |
||||||
|
<!-- </el-tab-pane>--> |
||||||
|
<el-tab-pane> |
||||||
|
<span slot="label"><i class="el-icon-edit"></i>编辑文本</span> |
||||||
|
<edit :color-config="colorConfig"/> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane> |
||||||
|
<span slot="label"><i class="el-icon-setting"></i>色彩</span> |
||||||
|
<color :color-default-config="colorConfig" style="padding-left: 3%;padding-right: 3%;" |
||||||
|
@updateCfg="updateCfg"/> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Color from "@/views/wc3word/color"; |
||||||
|
import Edit from "@/views/wc3word/edit"; |
||||||
|
import {defaultColorConfig} from '@/utils/tools' |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Word', |
||||||
|
components: {Edit, Color}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
colorConfig: Object.assign({}, defaultColorConfig), |
||||||
|
version: '1.0.3' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
const h = this.$createElement; |
||||||
|
this.$notify({ |
||||||
|
title: '来自Soul2的提示', |
||||||
|
message: h('span', {style: 'color: teal'}, `当前正在使用的生成器版本是${this.version}。`), |
||||||
|
position: 'bottom-right', |
||||||
|
duration: 4000, |
||||||
|
// showClose: false |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
updateCfg(cfg) { |
||||||
|
this.colorConfig = cfg |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.app-container { |
||||||
|
padding-left: 15%; |
||||||
|
padding-right: 15%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
<template> |
||||||
|
<div class="spell-container" :style="{fontSize: (fontSize || 12) + 'px'}"> |
||||||
|
<div v-if="module === '学习'"> |
||||||
|
<p style="margin-bottom: 3px;"> |
||||||
|
学习 <span :style="{color: colorConfig.learnLevel}">{{ spellData.lv || '%d' }}级</span> |
||||||
|
{{ spellData.name || '技能名称' }} |
||||||
|
<span v-if="spellData.hotKey"> |
||||||
|
(<span :style="{color: colorConfig.hotKey}">{{ spellData.hotKey }}</span>) |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<p style="margin-top: 7px;"> |
||||||
|
{{ spellData.effect }} |
||||||
|
<br/> |
||||||
|
<span v-if="spellData.nature"> |
||||||
|
<br><span :style="{color: colorConfig.nature}">{{ spellData.nature }}</span><br> |
||||||
|
</span> |
||||||
|
<br/> |
||||||
|
<span v-if="p.val" v-for="(p,i) in learnPros" :key="i"> |
||||||
|
<span :style="{color: colorConfig.property}"> |
||||||
|
{{ p.name }}： |
||||||
|
</span> |
||||||
|
{{ p.key ? `<${spellData.id},${p.key}${p.lv}${p.r ? ',%' : ''}>` : (p.val || '(null)') }} |
||||||
|
<br> |
||||||
|
</span> |
||||||
|
<span v-if="spellData.updateWord && spellData.updateWord.vals" |
||||||
|
v-for="(l,i) in spellData.updateWord.vals"> |
||||||
|
<br> |
||||||
|
<span :style="{color: colorConfig.learnUpdateLevel}">{{ (i + 1) }}级</span> - |
||||||
|
{{ spellData.updateWord.text.format(l) }} |
||||||
|
{{ spellData.updateWord.text.endsWith("。") ? null : '。' }} |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div v-if="module === '普通'"> |
||||||
|
<p style="margin-bottom: 3px;"> |
||||||
|
{{ spellData.name || '技能名称' }} |
||||||
|
<span v-if="spellData.hotKey">(<span :style="{color: colorConfig.hotKey}">{{ spellData.hotKey }}</span>)</span> |
||||||
|
- |
||||||
|
[<span :style="{color: colorConfig.learnLevel}">{{ spellData.lv || '1' }}级</span>] |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<p style="margin-top: 7px;"> |
||||||
|
{{ spellData.normalWord.text.format(spellData.normalWord.vals[spellData.lv - 1]) }} |
||||||
|
{{ spellData.normalWord.text.length === 0 || spellData.normalWord.text.endsWith("。") ? null : '。' }} |
||||||
|
<br/> |
||||||
|
<span v-if="spellData.nature"> |
||||||
|
<br><span :style="{color: colorConfig.nature}">{{ spellData.nature }}</span><br> |
||||||
|
</span> |
||||||
|
<br v-if="normalPros.length > 0"> |
||||||
|
<span v-if="p.val" v-for="(p,i) in normalPros" :key="i"> |
||||||
|
<span :style="{color: colorConfig.property}"> |
||||||
|
{{ p.name }}： |
||||||
|
</span> |
||||||
|
{{ p.key ? `<${spellData.id},${p.key}${p.lv}${p.r ? ',%' : ''}>` : (p.val || '(null)') }} |
||||||
|
<br> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
const default_spell_data = { |
||||||
|
id: "A000", |
||||||
|
lv: "1", |
||||||
|
name: "名称丢失", |
||||||
|
hotKey: "Q", |
||||||
|
effect: "法术效果丢失", |
||||||
|
pros: [], |
||||||
|
updateWord: undefined, |
||||||
|
nature: undefined, |
||||||
|
normalWord: undefined, |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Spell', |
||||||
|
props: { |
||||||
|
module: { |
||||||
|
default: () => '学习', |
||||||
|
type: String |
||||||
|
}, |
||||||
|
spellData: { |
||||||
|
default: () => Object.assign({}, default_spell_data), |
||||||
|
type: Object |
||||||
|
}, |
||||||
|
colorConfig: { |
||||||
|
default: () => { |
||||||
|
}, |
||||||
|
type: Object |
||||||
|
}, |
||||||
|
fontSize: Number |
||||||
|
}, |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
normalPros() { |
||||||
|
return this.spellData.pros.filter(e => e.name && e.name !== '法力消耗') |
||||||
|
}, |
||||||
|
learnPros() { |
||||||
|
return this.spellData.pros.filter(e => e.name) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: {} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.spell-container { |
||||||
|
text-align: left; |
||||||
|
font-weight: bold !important; |
||||||
|
background-color: rgba(0, 0, 0, .75); |
||||||
|
color: #ffffff; |
||||||
|
border-radius: 5px; |
||||||
|
padding: 3%; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue