#4 feat: remove connection work

src/lang/index.ts

@@ -22,10 +22,18 @@ const enUS = {
       hostRequired: 'Host is required',
       portRequired: 'Port is required',
     },
+    operations: {
+      connect: 'Connect',
+      edit: 'Edit',
+      remove: 'Remove',
+    },
   },
-  form: {
+  dialogOps: {
+    warning: 'Warning',
+    removeNotice: 'Remove the connection permanently?',
     confirm: 'Confirm',
     cancel: 'Cancel',
+    removeSuccess: 'Connection removed successfully',
   },
 };
 
@@ -52,10 +60,18 @@ const zhCN = {
       hostRequired: '请输入主机地址',
       portRequired: '请输入端口号',
     },
+    operations: {
+      connect: '连接',
+      edit: '编辑',
+      remove: '删除',
+    },
   },
-  form: {
+  dialogOps: {
+    warning: '提示',
+    removeNotice: '确认删除该连接？',
     confirm: '确认',
     cancel: '取消',
+    removeSuccess: '连接删除成功',
   },
 };
 

src/views/connect/components/add-dialog.vue

@@ -93,14 +93,14 @@
             </n-button>
           </div>
           <div class="right">
-            <n-button @click="closeModal">{{ $t('form.cancel') }}</n-button>
+            <n-button @click="closeModal">{{ $t('dialogOps.cancel') }}</n-button>
             <n-button
               type="primary"
               :loading="saveLoading"
               :disabled="!validationPassed"
               @click="saveConnect"
             >
-              {{ $t('form.confirm') }}
+              {{ $t('dialogOps.confirm') }}
             </n-button>
           </div>
         </div>

src/views/connect/components/connect-list.vue

@@ -16,7 +16,7 @@
             </n-icon>
           </div>
           <div class="name">{{ con.name }}</div>
-          <div class="opration">
+          <div class="operation">
             <n-dropdown
               trigger="hover"
               :options="options"
@@ -37,70 +37,57 @@
 import { MoreOutlined } from '@vicons/antd';
 import { ConnectionSignal, ConnectionSignalOff } from '@vicons/carbon';
 import { storeToRefs } from 'pinia';
-import { useAppStore } from '../../../store';
-import { useConnectionStore } from '../../../store/connectionStore';
+import { Connection, useConnectionStore } from '../../../store/connectionStore';
+import { useLang } from '../../../lang';
 
 const emits = defineEmits(['edit-connect']);
 
-const appStore = useAppStore();
 const dialog = useDialog();
 const message = useMessage();
+const lang = useLang();
 
-const isZhCN = computed(() => {
-  return appStore.languageType === 'zhCN';
-});
 const options = reactive([
-  {
-    key: 1,
-    label: isZhCN.value ? '连接' : 'Connect',
-  },
-  {
-    key: 2,
-    label: isZhCN.value ? '编辑' : 'Edit',
-  },
-  {
-    key: 3,
-    label: isZhCN.value ? '删除' : 'Delete',
-  },
+  { key: 1, label: lang.t('connection.operations.connect') },
+  { key: 2, label: lang.t('connection.operations.edit') },
+  { key: 3, label: lang.t('connection.operations.remove') },
 ]);
 
 const connectionStore = useConnectionStore();
-const { fetchConnections } = connectionStore;
+const { fetchConnections, removeConnection } = connectionStore;
 const { connections } = storeToRefs(connectionStore);
-
 fetchConnections();
 
-// dropdown select handler
-const handleSelect = (key: number, row: object) => {
+const handleSelect = (key: number, connection: Connection) => {
   switch (key) {
     case 1:
-      connectItem(row);
+      establishConnect(connection);
       break;
     case 2:
-      editCconnect(row);
+      editConnect(connection);
       break;
     case 3:
-      deleteConnect(row);
+      removeConnect(connection);
       break;
   }
 };
 // TODO:connect to the item
-const connectItem = (row: object) => {
-  console.log(row);
+const establishConnect = (connection: Connection) => {
+  // eslint-disable-next-line no-console
+  console.log(connection);
 };
 // edit connect info
-const editCconnect = (row: object) => {
-  emits('edit-connect', row);
+const editConnect = (connection: Connection) => {
+  emits('edit-connect', connection);
 };
-// TODO:delete connect
-const deleteConnect = (row: object) => {
+const removeConnect = (connection: Connection) => {
   dialog.warning({
-    title: isZhCN ? '错误' : 'Warning',
-    content: isZhCN ? '确定删除此连接？' : 'Are you sure to delete this connection?',
-    positiveText: isZhCN ? '确定' : 'Sure',
-    negativeText: isZhCN ? '取消' : 'Cancel',
+    title: lang.t('dialogOps.warning'),
+    content: lang.t('dialogOps.removeNotice'),
+    positiveText: lang.t('dialogOps.confirm'),
+    negativeText: lang.t('dialogOps.cancel'),
     onPositiveClick: () => {
-      message.success('我就知道');
+      removeConnection(connection);
+      message.success(lang.t('dialogOps.removeSuccess'));
     },
   });
 };
@@ -111,16 +98,19 @@ const deleteConnect = (row: object) => {
   flex: 1;
   height: 0;
   padding-bottom: 10px;
+
   .scroll-container {
     padding: 0 10px;
   }
+
   .list-item {
     width: 100%;
     height: 32px;
     border-radius: 5px;
     display: flex;
     align-items: center;
     cursor: pointer;
+
     .icon {
       height: 100%;
       width: 22px;
@@ -129,6 +119,7 @@ const deleteConnect = (row: object) => {
       justify-content: center;
       color: var(--dange-color);
     }
+
     .name {
       flex: 1;
       width: 0;
@@ -137,27 +128,32 @@ const deleteConnect = (row: object) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .opration {
+
+    .operation {
       height: 100%;
       width: 20px;
       display: none;
       align-items: center;
       justify-content: center;
     }
   }
+
   .list-item + .list-item {
     margin-top: 5px;
   }
+
   .list-item:hover {
     background-color: var(--connect-list-hover-bg);
-    .opration {
+
+    .operation {
       display: flex;
     }
   }
+
   .list-item.active {
     .icon,
     .name,
-    .opration {
+    .operation {
       color: var(--theme-color);
     }
   }