|
1 | 1 | <template> |
2 | 2 | <div class="editor-action-card"> |
| 3 | + <p class="des-label"> |
| 4 | + {{ $t(`editorPage.subConfig.nodeActions['${type}'].des[1]`) }} |
| 5 | + </p> |
| 6 | + <nut-radiogroup direction="horizontal" v-model="mode"> |
| 7 | + <nut-radio v-for="(key, index) in opt[type].mode" :label="key" :key="index" |
| 8 | + >{{ |
| 9 | + $t(`editorPage.subConfig.nodeActions['${type}'].modeOptions[${index}]`) |
| 10 | + }} |
| 11 | + </nut-radio> |
| 12 | + </nut-radiogroup> |
| 13 | + <p class="des-label"> |
| 14 | + {{ $t(`editorPage.subConfig.nodeActions['${type}'].des[0]`) }} |
| 15 | + </p> |
3 | 16 | <nut-checkboxgroup class="checkbox-group" v-model="value"> |
4 | 17 | <nut-checkbox |
5 | 18 | :icon-size="16" |
6 | | - v-for="(item, index) in opt[type]" |
| 19 | + v-for="(item, index) in opt[type].value" |
7 | 20 | :key="item" |
8 | 21 | :label="item" |
9 | 22 | > |
|
17 | 30 | </template> |
18 | 31 |
|
19 | 32 | <script lang="ts" setup> |
20 | | - import { inject, ref, onMounted } from 'vue'; |
| 33 | + import { inject, ref, watch, onMounted } from 'vue'; |
21 | 34 | import tw from '@/assets/icons/tw.png'; |
| 35 | + import semverGt from 'semver/functions/gt'; |
| 36 | + import { useAppNotifyStore } from '@/store/appNotify'; |
| 37 | + import { storeToRefs } from 'pinia'; |
| 38 | + import { useGlobalStore } from '@/store/global'; |
| 39 | +
|
| 40 | + const globalStore = useGlobalStore(); |
| 41 | + const { env } = storeToRefs(globalStore); |
| 42 | +
|
| 43 | + const { showNotify } = useAppNotifyStore(); |
22 | 44 |
|
23 | 45 | const { type, id } = defineProps<{ |
24 | 46 | type: string; |
|
30 | 52 | // 此处 key 需要与 i18n 的 actions 中的 key 相同 |
31 | 53 | // 值的次序需要与该选项的 options 值 顺序相同 |
32 | 54 | const opt = { |
33 | | - 'Region Filter': ['HK', 'TW', 'SG', 'JP', 'UK', 'US', 'DE', 'KR'], |
34 | | - 'Type Filter': [ |
35 | | - 'ss', |
36 | | - 'ssr', |
37 | | - 'vmess', |
38 | | - 'vless', |
39 | | - 'trojan', |
40 | | - 'http', |
41 | | - 'socks5', |
42 | | - 'snell', |
43 | | - 'tuic', |
44 | | - 'hysteria', |
45 | | - 'hysteria2', |
46 | | - 'juicity', |
47 | | - 'mieru', |
48 | | - 'anytls', |
49 | | - 'wireguard', |
50 | | - 'ssh', |
51 | | - 'external', |
52 | | - 'direct' |
53 | | - ], |
| 55 | + 'Region Filter': { |
| 56 | + mode: [0, 1], |
| 57 | + value: ['HK', 'TW', 'SG', 'JP', 'UK', 'US', 'DE', 'KR'] |
| 58 | + }, |
| 59 | + 'Type Filter': { |
| 60 | + mode: [0, 1], |
| 61 | + value: [ |
| 62 | + 'ss', |
| 63 | + 'ssr', |
| 64 | + 'vmess', |
| 65 | + 'vless', |
| 66 | + 'trojan', |
| 67 | + 'http', |
| 68 | + 'socks5', |
| 69 | + 'snell', |
| 70 | + 'tuic', |
| 71 | + 'hysteria', |
| 72 | + 'hysteria2', |
| 73 | + 'juicity', |
| 74 | + 'mieru', |
| 75 | + 'anytls', |
| 76 | + 'wireguard', |
| 77 | + 'ssh', |
| 78 | + 'external', |
| 79 | + 'direct' |
| 80 | + ] |
| 81 | + }, |
54 | 82 | }; |
55 | 83 |
|
56 | 84 | const value = ref([]); |
| 85 | + const mode = ref(); |
| 86 | +
|
| 87 | + // try { |
| 88 | + // if(!semverGt(env.value.version, '2.16.63')) { |
| 89 | + // showNotify({ |
| 90 | + // title: `请更新后端, 版本应大于 2.16.63`, |
| 91 | + // type: 'danger', |
| 92 | + // }); |
| 93 | + // } |
| 94 | + // } catch (e) {} |
57 | 95 |
|
58 | 96 | // 挂载时将 value 值指针指向 form 对应的数据 |
59 | 97 | onMounted(() => { |
60 | 98 | const item = form.process.find(item => item.id === id); |
61 | | - if (item) value.value = item.args; |
| 99 | + if (item) { |
| 100 | + let v = item.args?.value || item.args; |
| 101 | + if (!Array.isArray(v)){ |
| 102 | + v = []; |
| 103 | + } |
| 104 | + const keep = item.args?.keep ?? true; |
| 105 | + item.args = { keep, value: v }; |
| 106 | + value.value = item.args.value; |
| 107 | + mode.value = item.args.keep ? 0 : 1; |
| 108 | + } |
| 109 | + }); |
| 110 | +
|
| 111 | + watch(mode, () => { |
| 112 | + const item = form.process.find(item => item.id === id); |
| 113 | + item.args.keep = !mode.value; |
62 | 114 | }); |
63 | 115 | </script> |
64 | 116 |
|
65 | 117 | <style lang="scss" scoped> |
| 118 | + .des-label { |
| 119 | + font-size: 12px; |
| 120 | + margin-bottom: 8px; |
| 121 | + color: var(--comment-text-color); |
| 122 | +
|
| 123 | + &:not(:first-child) { |
| 124 | + margin-top: 16px; |
| 125 | + } |
| 126 | + } |
66 | 127 | .checkbox-group { |
67 | 128 | display: grid; |
68 | 129 | grid-template-columns: 1fr 1fr; |
|
0 commit comments