refactor: Update spider router paths

Refactor the code to enhance maintainability and readability.
crawlab-team · Jul 18, 2024 · a0463ef · a0463ef
1 parent 70657f3
commit a0463ef
Show file tree

Hide file tree

Showing 61 changed files with 867 additions and 471 deletions.
diff --git a/src/assets/svg/icons/163.svg b/src/assets/svg/icons/163.svg
diff --git a/src/components/core/ds/DataSourceConnectType.vue b/src/components/core/ds/DataSourceConnectType.vue
@@ -5,7 +5,7 @@ import {
   DATA_SOURCE_CONNECT_TYPE_URL,
   DATA_SOURCE_CONNECT_TYPE_HOSTS,
 } from '@/constants/ds';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = defineProps<{
   dataSource?: DataSource;
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 const data = computed<TagProps>(() => {
   const { dataSource } = props;

diff --git a/src/components/core/ds/DataSourceForm.vue b/src/components/core/ds/DataSourceForm.vue
@@ -2,20 +2,20 @@
 import { computed } from 'vue';
 import { getStore } from '@/store';
 import useDataSource from '@/components/core/ds/useDataSource';
-import { useI18n } from 'vue-i18n';
 import useDataSourceDetail from '@/views/ds/detail/useDataSourceDetail';
 import {
   DATA_SOURCE_CONNECT_TYPE_HOSTS,
   DATA_SOURCE_CONNECT_TYPE_STANDARD,
   DATA_SOURCE_CONNECT_TYPE_URL,
 } from '@/constants/ds';
+import { translate } from '@/utils';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 // store
 const store = getStore();

diff --git a/src/components/core/ds/DataSourceStatus.vue b/src/components/core/ds/DataSourceStatus.vue
@@ -4,7 +4,7 @@ import {
   DATA_SOURCE_STATUS_OFFLINE,
   DATA_SOURCE_STATUS_ONLINE,
 } from '@/constants/ds';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -21,7 +21,7 @@ const emit = defineEmits<{
   (e: 'click'): void;
 }>();
 
-const { t } = useI18n();
+const t = translate;
 
 const data = computed<TagProps>(() => {
   const { status, error } = props;

diff --git a/src/components/core/ds/DataSourceType.vue b/src/components/core/ds/DataSourceType.vue
@@ -10,7 +10,7 @@ import {
   DATA_SOURCE_TYPE_ELASTICSEARCH,
   DATA_SOURCE_TYPE_KAFKA,
 } from '@/constants/ds';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = defineProps<{
   dataSource?: DataSource;
@@ -21,7 +21,7 @@ const emit = defineEmits<{
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 const data = computed<TagProps>(() => {
   const { dataSource } = props;

diff --git a/src/components/core/environment/EnvironmentForm.vue b/src/components/core/environment/EnvironmentForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { getStore } from '@/store';
 import useEnvironment from '@/components/core/environment/useEnvironment';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 // store
 const store = getStore();

diff --git a/src/components/core/git/GitStatus.vue b/src/components/core/git/GitStatus.vue
@@ -9,7 +9,7 @@ import {
   GIT_STATUS_PULLING,
   GIT_STATUS_PUSHING,
 } from '@/constants/git';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = defineProps<{
   id?: string;
@@ -23,7 +23,7 @@ const emit = defineEmits<{
   (e: 'retry'): void;
 }>();
 
-const { t } = useI18n();
+const t = translate;
 
 const ns = 'git';
 const store = useStore();

diff --git a/src/components/core/node/NodeForm.vue b/src/components/core/node/NodeForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
 import useNode from '@/components/core/node/useNode';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 // store
 const store = useStore();

diff --git a/src/components/core/node/NodeRunners.vue b/src/components/core/node/NodeRunners.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (e: 'click'): void;
 }>();
 
-const { t } = useI18n();
+const t = translate;
 
 const running = computed<number>(() => {
   const { available, max } = props;

diff --git a/src/components/core/node/NodeStatus.vue b/src/components/core/node/NodeStatus.vue
@@ -6,7 +6,7 @@ import {
   NODE_STATUS_REGISTERED,
   NODE_STATUS_UNREGISTERED,
 } from '@/constants/node';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = defineProps<{
   status: NodeStatus;
@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (e: 'click'): void;
 }>();
 
-const { t } = useI18n();
+const t = translate;
 
 const data = computed<TagProps>(() => {
   const { status } = props;

diff --git a/src/components/core/node/NodeType.vue b/src/components/core/node/NodeType.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { translate } from '@/utils';
 
 const props = defineProps<{
   isMaster?: boolean;
   label?: string;
 }>();
 
-const { t } = useI18n();
+const t = translate;
 
 const type = computed<BasicType>(() => {
   const { isMaster } = props;

diff --git a/src/components/core/notification/channel/NotificationChannelForm.vue b/src/components/core/notification/channel/NotificationChannelForm.vue
@@ -1,19 +1,31 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import useNotificationChannel from '@/components/core/notification/channel/useNotificationChannel';
+import { translate } from '@/utils';
+import { ref } from 'vue';
+import ClFormItem from '@/components/ui/form/FormItem.vue';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
 // i18n
-const { t } = useI18n();
+const t = translate;
 
 // store
 const store = useStore();
 
-const { form, formRef, isSelectiveForm } = useNotificationChannel(store);
+const {
+  form,
+  formRef,
+  isSelectiveForm,
+  typeOptions,
+  providerOptionGroups,
+  activeProviderOption,
+} = useNotificationChannel(store);
+
+const smtpPasswordVisible = ref(false);
+
 defineOptions({ name: 'ClNotificationChannelForm' });
 </script>
 
@@ -30,13 +42,130 @@ defineOptions({ name: 'ClNotificationChannelForm' });
         :placeholder="t('views.notification.channels.form.name')"
       />
     </cl-form-item>
+
+    <cl-form-item
+      :span="2"
+      :label="t('views.notification.channels.form.provider')"
+      prop="provider"
+      required
+    >
+      <el-select v-model="form.provider" filterable clearable>
+        <template #label>
+          <span class="icon-wrapper">
+            <cl-icon :icon="activeProviderOption.icon" />
+          </span>
+          {{ activeProviderOption.label }}
+        </template>
+        <el-option-group
+          v-for="group in providerOptionGroups"
+          :key="group.value"
+          :label="group.label"
+        >
+          <el-option
+            v-for="op in group.children"
+            :key="op.value"
+            :value="op.value"
+          >
+            <span class="icon-wrapper">
+              <cl-icon :icon="op.icon" />
+            </span>
+            {{ op.label }}
+          </el-option>
+        </el-option-group>
+      </el-select>
+    </cl-form-item>
+
     <cl-form-item
       :span="2"
-      :label="t('views.notification.channels.form.enabled')"
-      prop="enabled"
+      :offset="2"
+      :label="t('views.notification.channels.form.type')"
+      prop="type"
+      required
     >
-      <cl-switch v-model="form.enabled" />
+      <el-radio-group v-model="form.type">
+        <el-radio-button
+          v-for="op in typeOptions"
+          :key="op.value"
+          :value="op.value"
+        >
+          <cl-icon :icon="op.icon" />
+          {{ op.label }}
+        </el-radio-button>
+      </el-radio-group>
     </cl-form-item>
+
+    <template v-if="form.type === 'mail'">
+      <cl-form-item
+        :span="2"
+        :label="t('views.notification.channels.form.smtpServer')"
+        prop="smtp_port"
+        required
+      >
+        <el-input
+          v-model="form.smtp_server"
+          :placeholder="t('views.notification.channels.form.smtpServer')"
+        />
+      </cl-form-item>
+      <cl-form-item
+        :span="2"
+        :label="t('views.notification.channels.form.smtpPort')"
+        prop="smtp_port"
+        required
+      >
+        <el-input
+          v-model="form.smtp_port"
+          type="number"
+          :placeholder="t('views.notification.channels.form.smtpPort')"
+        />
+      </cl-form-item>
+      <cl-form-item
+        :span="2"
+        :label="t('views.notification.channels.form.smtpUsername')"
+        prop="smtp_username"
+        required
+      >
+        <el-input
+          v-model="form.smtp_username"
+          :placeholder="t('views.notification.channels.form.smtpUsername')"
+        />
+      </cl-form-item>
+      <cl-form-item
+        :span="2"
+        :label="t('views.notification.channels.form.smtpPassword')"
+        prop="smtp_password"
+        required
+      >
+        <el-input
+          v-model="form.smtp_password"
+          :type="smtpPasswordVisible ? 'text' : 'password'"
+          :placeholder="t('views.notification.channels.form.smtpPassword')"
+        >
+          <template #suffix>
+            <span
+              style="cursor: pointer"
+              @click="smtpPasswordVisible = !smtpPasswordVisible"
+            >
+              <cl-icon v-if="!smtpPasswordVisible" :icon="['fa', 'eye']" />
+              <cl-icon v-else :icon="['fa', 'eye-slash']" />
+            </span>
+          </template>
+        </el-input>
+      </cl-form-item>
+    </template>
+    <template v-else-if="form.type === 'im'">
+      <cl-form-item
+        :span="4"
+        :label="t('views.notification.channels.form.webhookUrl')"
+        prop="webhook_url"
+        required
+      >
+        <el-input
+          v-model="form.webhook_url"
+          :placeholder="t('views.notification.channels.form.webhookUrl')"
+        />
+      </cl-form-item>
+    </template>
+
     <cl-form-item
       :span="4"
       :label="t('views.notification.channels.form.description')"
@@ -51,4 +180,11 @@ defineOptions({ name: 'ClNotificationChannelForm' });
   </cl-form>
 </template>
 
-<style scoped></style>
+<style scoped>
+.icon-wrapper {
+  display: inline-block;
+  text-align: center;
+  width: 18px;
+  margin-right: 2px;
+}
+</style>