refactor: Refactor code to enhance maintainability and readability

src/components/ds/CreateEditDataSourceDialog.vue → src/components/core/ds/CreateEditDataSourceDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getStore } from '@/store';
-import useDataSource from '@/components/ds/useDataSource';
+import useDataSource from '@/components/core/ds/useDataSource';
 
 const store = getStore();
 

src/components/ds/DataSourceForm.vue → src/components/core/ds/DataSourceForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { getStore } from '@/store';
-import useDataSource from '@/components/ds/useDataSource';
+import useDataSource from '@/components/core/ds/useDataSource';
 import { useI18n } from 'vue-i18n';
 import useDataSourceDetail from '@/views/ds/detail/useDataSourceDetail';
 import {

src/components/ds/useDataSource.ts → src/components/core/ds/useDataSource.ts

@@ -15,7 +15,7 @@ import {
 } from '@/constants/ds';
 import useDataSourceService from '@/services/ds/dataSourceService';
 import { getDefaultFormComponentData, plainClone, translate } from '@/utils';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 
 // i18n
 const t = translate;

src/components/environment/CreateEditEnvironmentDialog.vue → src/components/core/environment/CreateEditEnvironmentDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import useEnvironment from '@/components/environment/useEnvironment';
+import useEnvironment from '@/components/core/environment/useEnvironment';
 import { getStore } from '@/store';
 
 const {

src/components/environment/EnvironmentForm.vue → src/components/core/environment/EnvironmentForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getStore } from '@/store';
-import useEnvironment from '@/components/environment/useEnvironment';
+import useEnvironment from '@/components/core/environment/useEnvironment';
 import { useI18n } from 'vue-i18n';
 
 defineProps<{

src/components/environment/useEnvironment.ts → src/components/core/environment/useEnvironment.ts

@@ -1,7 +1,7 @@
 import { Store } from 'vuex';
 import useEnvironmentService from '@/services/environment/environmentService';
 import { getDefaultFormComponentData, translate } from '@/utils';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 
 // i18n
 const t = translate;

src/components/git/CreateEditGitDialog.vue → src/components/core/git/CreateEditGitDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useGit from '@/components/git/useGit';
+import useGit from '@/components/core/git/useGit';
 
 // store
 const store = useStore();

src/components/git/CreateGitBranchDialog.vue → src/components/core/git/CreateGitBranchDialog.vue

@@ -3,7 +3,7 @@ import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
-import Form from '@/components/form/Form.vue';
+import Form from '@/components/ui/form/Form.vue';
 
 const t = translate;
 

src/components/git/GitFileDiffDialog.vue → src/components/core/git/GitFileDiffDialog.vue

@@ -3,7 +3,7 @@ import { ref, computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import { translate } from '@/utils';
-import useGit from '@/components/git/useGit';
+import useGit from '@/components/core/git/useGit';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 
 const t = translate;

src/components/git/GitForm.vue → src/components/core/git/GitForm.vue

@@ -2,7 +2,7 @@
 import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
-import useGit from '@/components/git/useGit';
+import useGit from '@/components/core/git/useGit';
 
 // i18n
 const t = translate;

src/components/git/GitLogsDialog.vue → src/components/core/git/GitLogsDialog.vue

@@ -3,7 +3,7 @@ import { ref, watch, computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
 import { GIT_STATUS_CLONING } from '@/constants';
-import useGit from '@/components/git/useGit';
+import useGit from '@/components/core/git/useGit';
 import ClLogsView from '@/views/deps/task/LogsView.vue';
 
 const t = translate;

src/components/git/useGit.ts → src/components/core/git/useGit.ts

@@ -1,5 +1,5 @@
 import { Store } from 'vuex';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useGitService from '@/services/git/gitService';
 import { getDefaultFormComponentData } from '@/utils/form';
 

src/components/node/CreateEditNodeDialog.vue → src/components/core/node/CreateEditNodeDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useNode from '@/components/node/useNode';
+import useNode from '@/components/core/node/useNode';
 
 // store
 const store = useStore();

src/components/node/NodeForm.vue → src/components/core/node/NodeForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useNode from '@/components/node/useNode';
+import useNode from '@/components/core/node/useNode';
 import { useI18n } from 'vue-i18n';
 
 defineProps<{

src/components/node/useNode.ts → src/components/core/node/useNode.ts

@@ -1,5 +1,5 @@
 import { Store } from 'vuex';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useNodeService from '@/services/node/nodeService';
 import { getDefaultFormComponentData } from '@/utils/form';
 

src/components/core/notification/channel/CreateEditNotificationChannelDialog.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import useNotificationChannel from '@/components/core/notification/channel/useNotificationChannel';
+
+// store
+const store = useStore();
+
+const {
+  actionFunctions,
+  activeDialogKey,
+  confirmDisabled,
+  confirmLoading,
+  createEditDialogVisible,
+} = useNotificationChannel(store);
+defineOptions({ name: 'ClCreateEditNotificationChannelDialog' });
+</script>
+
+<template>
+  <cl-create-edit-dialog
+    :type="activeDialogKey"
+    :visible="createEditDialogVisible"
+    :action-functions="actionFunctions"
+    :confirm-disabled="confirmDisabled"
+    :confirm-loading="confirmLoading"
+  >
+    <template #default>
+      <cl-notification-channel-form />
+    </template>
+  </cl-create-edit-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/components/core/notification/channel/NotificationChannelForm.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import useNotificationChannel from '@/components/core/notification/channel/useNotificationChannel';
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+// i18n
+const { t } = useI18n();
+
+// store
+const store = useStore();
+
+const { form, formRef, isSelectiveForm } = useNotificationChannel(store);
+defineOptions({ name: 'ClNotificationChannelForm' });
+</script>
+
+<template>
+  <cl-form v-if="form" ref="formRef" :model="form" :selective="isSelectiveForm">
+    <cl-form-item
+      :span="2"
+      :label="t('views.notification.channels.form.name')"
+      prop="name"
+      required
+    >
+      <el-input
+        v-model="form.name"
+        :placeholder="t('views.notification.channels.form.name')"
+      />
+    </cl-form-item>
+    <cl-form-item
+      :span="2"
+      :label="t('views.notification.channels.form.enabled')"
+      prop="enabled"
+    >
+      <cl-switch v-model="form.enabled" />
+    </cl-form-item>
+    <cl-form-item
+      :span="4"
+      :label="t('views.notification.channels.form.description')"
+      prop="description"
+    >
+      <el-input
+        v-model="form.description"
+        type="textarea"
+        :placeholder="t('views.notification.channels.form.description')"
+      />
+    </cl-form-item>
+  </cl-form>
+</template>
+
+<style scoped></style>

src/components/core/notification/channel/useNotificationChannel.ts

@@ -0,0 +1,33 @@
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+import { Store } from 'vuex';
+import useForm from '@/components/ui/form/useForm';
+import useNotificationChannelService from '@/services/notification/useNotificationChannelService';
+import { getDefaultFormComponentData } from '@/utils/form';
+
+// form component data
+const formComponentData = getDefaultFormComponentData<NotificationChannel>();
+
+const useNotificationChannel = (store: Store<RootStoreState>) => {
+  const { notificationChannel: state } = store.state as RootStoreState;
+  // route
+  const route = useRoute();
+
+  // notification id
+  const id = computed(() => route.params.id);
+
+  const form = computed(() => state.form);
+
+  return {
+    ...useForm(
+      'notificationChannel',
+      store,
+      useNotificationChannelService(store),
+      formComponentData
+    ),
+    id,
+    form,
+  };
+};
+
+export default useNotificationChannel;

src/components/notification/CreateEditNotificationSettingDialog.vue → src/components/core/notification/setting/CreateEditNotificationSettingDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useNotificationSetting from '@/components/notification/useNotificationSetting';
+import useNotificationSetting from '@/components/core/notification/setting/useNotificationSetting';
 
 // store
 const store = useStore();

src/components/notification/NotificationSettingForm.vue → src/components/core/notification/setting/NotificationSettingForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import useNotificationSetting from '@/components/notification/useNotificationSetting';
+import useNotificationSetting from '@/components/core/notification/setting/useNotificationSetting';
 
 defineProps<{
   readonly?: boolean;

src/components/notification/useNotificationSetting.ts → src/components/core/notification/setting/useNotificationSetting.ts

@@ -1,7 +1,7 @@
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 import { Store } from 'vuex';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useNotificationSettingService from '@/services/notification/useNotificationSettingService';
 import { getDefaultFormComponentData } from '@/utils/form';
 

src/components/project/CreateEditProjectDialog.vue → src/components/core/project/CreateEditProjectDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useProject from '@/components/project/useProject';
+import useProject from '@/components/core/project/useProject';
 
 // store
 const store = useStore();

src/components/project/ProjectForm.vue → src/components/core/project/ProjectForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
-import useProject from '@/components/project/useProject';
+import useProject from '@/components/core/project/useProject';
 
 // i18n
 const { t } = useI18n();

src/components/project/useProject.ts → src/components/core/project/useProject.ts

@@ -1,7 +1,7 @@
 import { computed, readonly } from 'vue';
 import { Store } from 'vuex';
 import { isDuplicated } from '@/utils/array';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useProjectService from '@/services/project/projectService';
 import { getDefaultFormComponentData } from '@/utils/form';
 import {

src/components/schedule/CreateEditScheduleDialog.vue → src/components/core/schedule/CreateEditScheduleDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useSchedule from '@/components/schedule/useSchedule';
+import useSchedule from '@/components/core/schedule/useSchedule';
 
 // store
 const store = useStore();

src/components/schedule/ScheduleForm.vue → src/components/core/schedule/ScheduleForm.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useSchedule from '@/components/schedule/useSchedule';
-import useSpider from '@/components/spider/useSpider';
+import useSchedule from '@/components/core/schedule/useSchedule';
+import useSpider from '@/components/core/spider/useSpider';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
-import useNode from '@/components/node/useNode';
+import useNode from '@/components/core/node/useNode';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
-import useTask from '@/components/task/useTask';
+import useTask from '@/components/core/task/useTask';
 
 const { t } = useI18n();
 

src/components/schedule/useSchedule.ts → src/components/core/schedule/useSchedule.ts

@@ -1,11 +1,11 @@
 import { computed, watch } from 'vue';
 import { Store } from 'vuex';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useScheduleService from '@/services/schedule/scheduleService';
 import { getDefaultFormComponentData } from '@/utils/form';
 import { parseExpression } from 'cron-parser';
 import { getModeOptions } from '@/utils/task';
-import useSpider from '@/components/spider/useSpider';
+import useSpider from '@/components/core/spider/useSpider';
 import { translate } from '@/utils/i18n';
 import useScheduleDetail from '@/views/schedule/detail/useScheduleDetail';
 

src/components/spider/CreateEditSpiderDialog.vue → src/components/core/spider/CreateEditSpiderDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/useSpider';
+import useSpider from '@/components/core/spider/useSpider';
 
 // store
 const store = useStore();

src/components/spider/RunSpiderDialog.vue → src/components/core/spider/RunSpiderDialog.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/useSpider';
-import useNode from '@/components/node/useNode';
+import useSpider from '@/components/core/spider/useSpider';
+import useNode from '@/components/core/node/useNode';
 import { TASK_MODE_RANDOM, TASK_MODE_SELECTED_NODES } from '@/constants/task';
-import useTask from '@/components/task/useTask';
+import useTask from '@/components/core/task/useTask';
 import { ElMessage } from 'element-plus';
 import { translate } from '@/utils';
 

src/components/spider/SpiderForm.vue → src/components/core/spider/SpiderForm.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-
 import { ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/useSpider';
-import useNode from '@/components/node/useNode';
-import useProject from '@/components/project/useProject';
+import useSpider from '@/components/core/spider/useSpider';
+import useNode from '@/components/core/node/useNode';
+import useProject from '@/components/core/project/useProject';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
 import pinyin, { STYLE_NORMAL } from 'pinyin';
 import { isZeroObjectId } from '@/utils/mongo';
 import useSpiderDetail from '@/views/spider/detail/useSpiderDetail';
-import useTask from '@/components/task/useTask';
+import useTask from '@/components/core/task/useTask';
 import { translate } from '@/utils';
 
 // i18n

src/components/spider/useSpider.ts → src/components/core/spider/useSpider.ts

@@ -1,7 +1,7 @@
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 import { Store } from 'vuex';
-import useForm from '@/components/form/useForm';
+import useForm from '@/components/ui/form/useForm';
 import useSpiderService from '@/services/spider/spiderService';
 import { getDefaultFormComponentData } from '@/utils/form';
 import useRequest from '@/services/request';

src/components/task/CreateTaskDialog.vue → src/components/core/task/CreateTaskDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
-import useTask from '@/components/task/useTask';
+import useTask from '@/components/core/task/useTask';
 
 defineProps<{
   title?: string;