custom select menu

lorypelli · Mar 19, 2024 · 3256403 · 3256403
1 parent 35b6ea2
commit 3256403
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 73 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
  },
  "dependencies": {
  "@element-plus/icons-vue": "^2.3.1",
+ "@imengyu/vue3-context-menu": "^1.3.9",
  "element-plus": "^2.6.1",
  "primevue": "^3.49.1",
  "vue": "^3.4.21"

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ElTabPane, ElTabs } from 'element-plus';
+import { ElNotification, ElTabPane, ElTabs } from 'element-plus';
 import HTTP from './components/HTTP.vue';
 import WS from './components/WS.vue';
 import 'element-plus/dist/index.css';
 import 'primevue/resources/themes/aura-light-green/theme.css';
+import { ref } from 'vue';
+import { handleTab as HTTPTab } from './components/HTTP.vue';
+import { handleTab as WSTab } from './components/WS.vue';
 defineOptions({
  name: 'App',
  components: {
@@ -15,12 +18,60 @@ defineOptions({
 });
 </script>
 
+<script lang="ts">
+const selectedTab = ref('HTTP');
+export default {
+ methods: {
+ onContextMenu(e: MouseEvent) {
+ e.preventDefault();
+ this.$contextmenu({
+ x: e.x,
+ y: e.y,
+ theme: 'dark',
+ items: [
+ {
+ label: 'New',
+ children: [
+ {
+ label: 'HTTP',
+ onClick: () => {
+ selectedTab.value = 'HTTP';
+ HTTPTab(undefined, 'add');
+ }
+ },
+ {
+ label: 'WS',
+ onClick: () => {
+ selectedTab.value = 'WS';
+ WSTab(undefined, 'add');
+ }
+ }
+ ]
+ },
+ {
+ label: 'Open Devtools',
+ onClick: () => {
+ ElNotification({
+ title: 'Devtools',
+ message: 'To open devtools use CMD/CTRL + SHIFT + F12',
+ type: 'info',
+ position: 'bottom-right'
+ });
+ }
+ }
+ ]
+ });
+ }
+ }
+};
+</script>
+
 <template>
- <ElTabs>
- <ElTabPane label="HTTP">
+ <ElTabs v-model="selectedTab" v-on:contextmenu="onContextMenu($event)">
+ <ElTabPane label="HTTP" name="HTTP">
  <HTTP />
  </ElTabPane>
- <ElTabPane label="WS">
+ <ElTabPane label="WS" name="WS">
  <WS />
  </ElTabPane>
  </ElTabs>

diff --git a/frontend/src/components/HTTP.vue b/frontend/src/components/HTTP.vue
@@ -15,48 +15,6 @@ defineOptions({
  ElTabPane
  }
 });
-let tabIndex = 1;
-const selectedTab = ref('1');
-const tabs = ref([
- {
- name: '1',
- select: 'GET',
- input: ''
- }
-]);
-function handleTab(targetName: TabPaneName | undefined, action: 'add' | 'remove') {
- switch (action) {
- case 'add': {
- const newTabIndex = `${++tabIndex}`;
- tabs.value.push({
- name: newTabIndex,
- select: 'GET',
- input: ''
- });
- selectedTab.value = newTabIndex;
- break;
- }
- case 'remove': {
- const t = tabs.value;
- if (t.length > 1) {
- let activeTab = selectedTab.value;
- if (activeTab == targetName) {
- t.forEach((tab, index) => {
- if (tab.name == targetName) {
- const nextTab = t[index + 1] || t[index - 1];
- if (nextTab) {
- activeTab = nextTab.name;
- }
- }
- });
- }
- selectedTab.value = activeTab;
- tabs.value = t.filter((tab) => tab.name != targetName);
- }
- break;
- }
- }
-}
 </script>
 
 <script lang="ts">
@@ -113,6 +71,48 @@ export default {
  }
  }
 };
+let tabIndex = 1;
+const selectedTab = ref('1');
+const tabs = ref([
+ {
+ name: '1',
+ select: 'GET',
+ input: ''
+ }
+]);
+export function handleTab(targetName: TabPaneName | undefined, action: 'add' | 'remove') {
+ switch (action) {
+ case 'add': {
+ const newTabIndex = `${++tabIndex}`;
+ tabs.value.push({
+ name: newTabIndex,
+ select: 'GET',
+ input: ''
+ });
+ selectedTab.value = newTabIndex;
+ break;
+ }
+ case 'remove': {
+ const t = tabs.value;
+ if (t.length > 1) {
+ let activeTab = selectedTab.value;
+ if (activeTab == targetName) {
+ t.forEach((tab, index) => {
+ if (tab.name == targetName) {
+ const nextTab = t[index + 1] || t[index - 1];
+ if (nextTab) {
+ activeTab = nextTab.name;
+ }
+ }
+ });
+ }
+ selectedTab.value = activeTab;
+ tabs.value = t.filter((tab) => tab.name != targetName);
+ }
+ break;
+ }
+ }
+}
 </script>
 
 <template>

diff --git a/frontend/src/components/WS.vue b/frontend/src/components/WS.vue
@@ -15,6 +15,32 @@ defineOptions({
  ElTabPane
  }
 });
+</script>
+
+<script lang="ts">
+interface Header {
+ enabled: boolean,
+ name: string,
+ value: string
+}
+interface Query {
+ enabled: boolean,
+ name: string,
+ value: string
+}
+interface Response {
+ Status: string,
+ Header: [],
+ Message: string
+}
+let headers: Header[] = [
+ {
+ enabled: true,
+ name: 'User-Agent',
+ value: 'FetchTTP'
+ }
+];
+let query: Query[] = [];
 let tabIndex = 1;
 const selectedTab = ref('1');
 const tabs = ref([
@@ -24,7 +50,8 @@ const tabs = ref([
  connected: false
  }
 ]);
-function handleTab(targetName: TabPaneName | undefined, action: 'add' | 'remove') {
+export function handleTab(targetName: TabPaneName | undefined, action: 'add' | 'remove') {
+ console.log(targetName);
  switch (action) {
  case 'add': {
  const newTabIndex = `${++tabIndex}`;
@@ -57,32 +84,6 @@ function handleTab(targetName: TabPaneName | undefined, action: 'add' | 'remove'
  }
  }
 }
-</script>
-
-<script lang="ts">
-interface Header {
- enabled: boolean,
- name: string,
- value: string
-}
-interface Query {
- enabled: boolean,
- name: string,
- value: string
-}
-interface Response {
- Status: string,
- Header: [],
- Message: string
-}
-let headers: Header[] = [
- {
- enabled: true,
- name: 'User-Agent',
- value: 'FetchTTP'
- }
-];
-let query: Query[] = [];
 export default {
  data() {
  return {

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -2,5 +2,8 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './style.css';
 import 'element-plus/theme-chalk/dark/css-vars.css';
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';
+import ContextMenu from '@imengyu/vue3-context-menu';
 const app = createApp(App);
+app.use(ContextMenu);
 app.mount('#app');