mirror of
https://github.com/sub-store-org/Sub-Store.git
synced 2025-08-10 00:52:40 +00:00
UI Improvements
This commit is contained in:
75
web/src/components/FlagOperator.vue
Normal file
75
web/src/components/FlagOperator.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-card class="ml-1 mr-1 mb-1 mt-1">
|
||||
<v-card-title>
|
||||
<v-icon left color="primary">flag</v-icon>
|
||||
国旗
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon @click="$emit('up', idx)">
|
||||
<v-icon>keyboard_arrow_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="$emit('down', idx)">
|
||||
<v-icon>keyboard_arrow_down</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="$emit('deleteProcess', idx)">
|
||||
<v-icon color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
<v-dialog>
|
||||
<template #activator="{on}">
|
||||
<v-btn icon v-on="on">
|
||||
<v-icon>help</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
国旗
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
添加或者删除节点国旗。
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
工作模式
|
||||
<v-radio-group v-model="mode">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-radio label="添加" value="ADD"/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-radio label="删除" value="REMOVE"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-radio-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["args"],
|
||||
data: function () {
|
||||
return {
|
||||
idx: this.$vnode.key,
|
||||
mode: "DEFAULT"
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (typeof this.args !== 'undefined')
|
||||
this.mode = this.args === true ? "ADD" : "REMOVE";
|
||||
},
|
||||
watch: {
|
||||
mode() {
|
||||
this.$emit("dataChanged", {
|
||||
idx: this.idx,
|
||||
args: this.mode === "ADD"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -38,6 +38,7 @@
|
||||
v-for="(keyword, idx) in keywords"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ keyword }}
|
||||
</v-chip>
|
||||
@@ -76,6 +77,10 @@ export default {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.keyword = this.keywords[idx];
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.keywords.splice(idx, 1);
|
||||
},
|
||||
|
||||
@@ -49,6 +49,7 @@
|
||||
v-for="(keyword, idx) in keywords"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ keyword }}
|
||||
</v-chip>
|
||||
@@ -87,6 +88,10 @@ export default {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.keyword = this.keywords[idx];
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.keywords.splice(idx, 1);
|
||||
},
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
v-for="(chip, idx) in chips"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ chip }}
|
||||
</v-chip>
|
||||
@@ -84,16 +85,16 @@ export default {
|
||||
chips() {
|
||||
return this.keywords.map(k => {
|
||||
const {old, now} = k;
|
||||
return `${old} ⇒ ${now}`;
|
||||
return `${old} ⇒ ${now.length === 0 ? "∅" : now}`;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
if (this.form.keyword && this.form.replace) {
|
||||
if (this.form.keyword) {
|
||||
this.keywords.push({
|
||||
old: this.form.keyword,
|
||||
now: this.form.replace
|
||||
now: this.form.replace || ""
|
||||
});
|
||||
this.form.keyword = "";
|
||||
this.form.replace = "";
|
||||
@@ -101,6 +102,11 @@ export default {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.keyword = this.keywords[idx].old;
|
||||
this.form.replace = this.keywords[idx].now;
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.keywords.splice(idx, 1);
|
||||
},
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
v-for="(regex, idx) in regexps"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ regex }}
|
||||
</v-chip>
|
||||
@@ -79,6 +80,10 @@ export default {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.regex = this.regexps[idx];
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.regexps.splice(idx, 1);
|
||||
},
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
v-for="(regex, idx) in regexps"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ regex }}
|
||||
</v-chip>
|
||||
@@ -91,6 +92,10 @@ export default {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.regex = this.regexps[idx];
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.regexps.splice(idx, 1);
|
||||
},
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
v-for="(chip, idx) in chips"
|
||||
:key="idx"
|
||||
@click:close="remove(idx)"
|
||||
@click="edit(idx)"
|
||||
>
|
||||
{{ chip }}
|
||||
</v-chip>
|
||||
@@ -45,7 +46,7 @@
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
placeholder="关键词"
|
||||
placeholder="正则表达式"
|
||||
solo
|
||||
v-model="form.regex"
|
||||
/>
|
||||
@@ -84,23 +85,28 @@ export default {
|
||||
chips() {
|
||||
return this.regexps.map(k => {
|
||||
const {expr, now} = k;
|
||||
return `${expr} ⇒ ${now}`;
|
||||
return `${expr} ⇒ ${now.length === 0 ? "∅" : now}`;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
if (this.form.regex && this.form.replace) {
|
||||
if (this.form.regex) {
|
||||
this.regexps.push({
|
||||
expr: this.form.regex,
|
||||
now: this.form.replace
|
||||
now: this.form.replace || ""
|
||||
});
|
||||
this.form.regex = "";
|
||||
this.form.replace = "";
|
||||
} else {
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
|
||||
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
|
||||
}
|
||||
},
|
||||
edit(idx) {
|
||||
this.form.regex = this.regexps[idx].expr;
|
||||
this.form.replace = this.regexps[idx].now;
|
||||
this.remove(idx);
|
||||
},
|
||||
remove(idx) {
|
||||
this.regexps.splice(idx, 1);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user