新增按钮激活样式

tinygeeker · May 16, 2023 · c81abbe · c81abbe
1 parent c6da316
commit c81abbe
Show file tree

Hide file tree

Showing 22 changed files with 585 additions and 321 deletions.
diff --git a/src/components/Action.vue b/src/components/Action.vue
@@ -1,18 +1,24 @@
 <template>
     <div class="app-container" style="height: 600px;overflow-y: auto;">
         <span v-for="prompt in prompts">
-            <el-divider content-position="left">{{ prompt.name }}</el-divider>
-            <span v-for="item in prompt.items" class="prompt">
-                <el-button type="warning" v-if="setting.down" @click="downWeight" plain>
-                    <el-icon><Remove /></el-icon>
-                </el-button>
-                <el-button type="warning" v-if="setting.up" @click="upWeight" plain>
-                    <el-icon><CirclePlus /></el-icon>
-                </el-button>
-                <el-button @click="selectPrompt" plain>
-                    <span v-if="setting.en">{{ item.en }}</span>
-                    <span v-if="setting.zh">「{{ item.zh }}」</span>
-                </el-button>
+            <span v-if="prompt.visible">
+                <el-divider content-position="left">{{ prompt.name }}</el-divider>
+                <span v-for="item in prompt.items" class="prompt">
+                    <el-button type="danger" v-if="setting.down" @click="downWeight" plain>
+                        <el-icon>
+                            <Remove />
+                        </el-icon>
+                    </el-button>
+                    <el-button type="success" v-if="setting.up" @click="upWeight" plain>
+                        <el-icon>
+                            <CirclePlus />
+                        </el-icon>
+                    </el-button>
+                    <el-button :type="item.checked ? 'primary' : ''" @click="selectPrompt($event, item);" plain>
+                        <span v-if="setting.en">{{ item.en }}</span>
+                        <span v-if="setting.zh">「{{ item.zh }}」</span>
+                    </el-button>
+                </span>
             </span>
         </span>
     </div>
@@ -29,32 +35,47 @@ export default {
     data() {
         return {}
     },
-    created () {},
+    created() { },
     methods: {
         downWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `[${target.innerText}]`
             }
         },
         upWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `(${target.innerText})`
             }
         },
-        selectPrompt ($event) {
-            let prompt = $event.currentTarget.firstElementChild.firstElementChild;
-            this.$emit('updateSelect', prompt.innerText);
+        selectPrompt($event, item) {
+            let prompt = $event.currentTarget.firstElementChild.firstElementChild
+            this.$emit('updateSelect', prompt.innerText)
+
+            item.checked = !item.checked
+            this.$forceUpdate()
         }
     },
     computed: {
         prompts: function () {
-            return this.setting.adult ? prompts : prompts.filter((item) => item.type !== 'adult');
+            return prompts.map((item) => {
+                if (this.setting.adult) {
+                    if (item.range == 'adult') {
+                        item.visible = true
+                    }
+                } else {
+                    if (item.range == 'adult') {
+                        item.visible = false
+                    }
+                }
+
+                return item
+            });
         }
     }
 }
@@ -69,5 +90,4 @@ export default {
 
 .prompt {
     margin: 2px;
-}
-</style>
+}</style>
diff --git a/src/components/Basic.vue b/src/components/Basic.vue
@@ -1,18 +1,24 @@
 <template>
     <div class="app-container" style="height: 600px;overflow-y: auto;">
         <span v-for="prompt in prompts">
-            <el-divider content-position="left">{{ prompt.name }}</el-divider>
-            <span v-for="item in prompt.items" class="prompt">
-                <el-button type="warning" v-if="setting.down" @click="downWeight" plain>
-                    <el-icon><Remove /></el-icon>
-                </el-button>
-                <el-button type="warning" v-if="setting.up" @click="upWeight" plain>
-                    <el-icon><CirclePlus /></el-icon>
-                </el-button>
-                <el-button @click="selectPrompt" plain>
-                    <span v-if="setting.en">{{ item.en }}</span>
-                    <span v-if="setting.zh">「{{ item.zh }}」</span>
-                </el-button>
+            <span v-if="prompt.visible">
+                <el-divider content-position="left">{{ prompt.name }}</el-divider>
+                <span v-for="item in prompt.items" class="prompt">
+                    <el-button type="danger" v-if="setting.down" @click="downWeight" plain>
+                        <el-icon>
+                            <Remove />
+                        </el-icon>
+                    </el-button>
+                    <el-button type="success" v-if="setting.up" @click="upWeight" plain>
+                        <el-icon>
+                            <CirclePlus />
+                        </el-icon>
+                    </el-button>
+                    <el-button :type="item.checked ? 'primary' : ''" @click="selectPrompt($event, item);" plain>
+                        <span v-if="setting.en">{{ item.en }}</span>
+                        <span v-if="setting.zh">「{{ item.zh }}」</span>
+                    </el-button>
+                </span>
             </span>
         </span>
     </div>
@@ -29,32 +35,47 @@ export default {
     data() {
         return {}
     },
-    created () {},
+    created() { },
     methods: {
         downWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `[${target.innerText}]`
             }
         },
         upWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `(${target.innerText})`
             }
         },
-        selectPrompt ($event) {
-            let prompt = $event.currentTarget.firstElementChild.firstElementChild;
-            this.$emit('updateSelect', prompt.innerText);
+        selectPrompt($event, item) {
+            let prompt = $event.currentTarget.firstElementChild.firstElementChild
+            this.$emit('updateSelect', prompt.innerText)
+
+            item.checked = !item.checked
+            this.$forceUpdate()
         }
     },
     computed: {
         prompts: function () {
-            return this.setting.adult ? prompts : prompts.filter((item) => item.type !== 'adult');
+            return prompts.map((item) => {
+                if (this.setting.adult) {
+                    if (item.range == 'adult') {
+                        item.visible = true
+                    }
+                } else {
+                    if (item.range == 'adult') {
+                        item.visible = false
+                    }
+                }
+
+                return item
+            });
         }
     }
 }

diff --git a/src/components/Character.vue b/src/components/Character.vue
@@ -1,18 +1,24 @@
 <template>
     <div class="app-container" style="height: 600px;overflow-y: auto;">
         <span v-for="prompt in prompts">
-            <el-divider content-position="left">{{ prompt.name }}</el-divider>
-            <span v-for="item in prompt.items" class="prompt">
-                <el-button type="warning" v-if="setting.down" @click="downWeight" plain>
-                    <el-icon><Remove /></el-icon>
-                </el-button>
-                <el-button type="warning" v-if="setting.up" @click="upWeight" plain>
-                    <el-icon><CirclePlus /></el-icon>
-                </el-button>
-                <el-button @click="selectPrompt" plain>
-                    <span v-if="setting.en">{{ item.en }}</span>
-                    <span v-if="setting.zh">「{{ item.zh }}」</span>
-                </el-button>
+            <span v-if="prompt.visible">
+                <el-divider content-position="left">{{ prompt.name }}</el-divider>
+                <span v-for="item in prompt.items" class="prompt">
+                    <el-button type="danger" v-if="setting.down" @click="downWeight" plain>
+                        <el-icon>
+                            <Remove />
+                        </el-icon>
+                    </el-button>
+                    <el-button type="success" v-if="setting.up" @click="upWeight" plain>
+                        <el-icon>
+                            <CirclePlus />
+                        </el-icon>
+                    </el-button>
+                    <el-button :type="item.checked ? 'primary' : ''" @click="selectPrompt($event, item);" plain>
+                        <span v-if="setting.en">{{ item.en }}</span>
+                        <span v-if="setting.zh">「{{ item.zh }}」</span>
+                    </el-button>
+                </span>
             </span>
         </span>
     </div>
@@ -29,32 +35,47 @@ export default {
     data() {
         return {}
     },
-    created () {},
+    created() { },
     methods: {
         downWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('(') && target.innerText.endsWith(')')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `[${target.innerText}]`
             }
         },
         upWeight($event) {
-            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild;
-            if(target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
-                target.innerText = target.innerText.substring(1, target.innerText.length -1)
+            let target = $event.currentTarget.parentElement.lastElementChild.firstElementChild.firstElementChild
+            if (target.innerText.startsWith('[') && target.innerText.endsWith(']')) {
+                target.innerText = target.innerText.substring(1, target.innerText.length - 1)
             } else {
                 target.innerText = `(${target.innerText})`
             }
         },
-        selectPrompt ($event) {
-            let prompt = $event.currentTarget.firstElementChild.firstElementChild;
-            this.$emit('updateSelect', prompt.innerText);
+        selectPrompt($event, item) {
+            let prompt = $event.currentTarget.firstElementChild.firstElementChild
+            this.$emit('updateSelect', prompt.innerText)
+
+            item.checked = !item.checked
+            this.$forceUpdate()
         }
     },
     computed: {
         prompts: function () {
-            return this.setting.adult ? prompts : prompts.filter((item) => item.type !== 'adult');
+            return prompts.map((item) => {
+                if (this.setting.adult) {
+                    if (item.range == 'adult') {
+                        item.visible = true
+                    }
+                } else {
+                    if (item.range == 'adult') {
+                        item.visible = false
+                    }
+                }
+
+                return item
+            });
         }
     }
 }
@@ -69,5 +90,4 @@ export default {
 
 .prompt {
     margin: 2px;
-}
-</style>
+}</style>