chore: domain import 优化

2026-04-23 19:57:27 +08:00 · 2026-01-25 13:01:12 +08:00
parent 65f9d482f3
commit 662ca19f8f
9 changed files with 139 additions and 49 deletions
@@ -19,8 +19,8 @@ div#app {
  height: 100%;
 }

-pre.pre{
-   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+pre.pre {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

 h1,
@@ -61,16 +61,20 @@ h6 {
  justify-content: center;
  align-items: center;
 }
+
 .flex-vc {
  align-items: center;
 }
+
 .flex-vb {
  align-items: baseline;
 }
+
 .flex-o {
  display: flex !important;
  align-items: center;
 }
+
 .flex-baseline {
  display: flex !important;
  align-items: baseline;
@@ -85,6 +89,7 @@ h6 {
 .flex {
  display: flex;
 }
+
 .flex-inline {
  display: inline-flex;
  align-items: center;
@@ -93,6 +98,7 @@ h6 {
 .flex-1 {
  flex: 1;
 }
+
 .flex-0 {
  flex: 0;
 }
@@ -101,9 +107,11 @@ h6 {
  display: flex;
  flex-direction: column;
 }
+
 .align-left {
  text-align: left;
 }
+
 .align-right {
  text-align: right;
 }
@@ -111,18 +119,23 @@ h6 {
 .scroll-y {
  overflow-y: auto;
 }
+
 .m-0 {
  margin: 0 !important;
 }
+
 .m-2 {
  margin: 2px !important;
 }
+
 .m-3 {
  margin: 3px !important;
 }
+
 .m-5 {
  margin: 5px !important;
 }
+
 .m-10 {
  margin: 10px !important;
 }
@@ -130,6 +143,7 @@ h6 {
 .m-20 {
  margin: 20px !important;
 }
+
 .mb-2 {
  margin-bottom: 2px !important;
 }
@@ -137,6 +151,7 @@ h6 {
 .mb-5 {
  margin-bottom: 5px !important;
 }
+
 .ml-5 {
  margin-left: 5px !important;
 }
@@ -192,6 +207,7 @@ h6 {
 .p-20 {
  padding: 20px !important;
 }
+
 .ellipsis {
  white-space: nowrap;
  overflow: hidden;
@@ -220,6 +236,7 @@ h6 {
 .color-plus {
  color: #c5913f;
 }
+
 .color-blue {
  color: #1890ff;
 }
@@ -231,6 +248,7 @@ h6 {
 .color-green {
  color: green;
 }
+
 .color-gray {
  color: gray;
 }
@@ -274,6 +292,7 @@ h6 {
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
+
  &.error {
    color: #ff4d4f;
  }
@@ -281,6 +300,7 @@ h6 {

 .fs-copyable {
  display: inline-flex;
+
  .text {
    flex: 1;
  }
@@ -309,29 +329,29 @@ h6 {
  color: #6e6e6e;
 }

-.ant-modal-body{
-  .fs-form-body{
+.ant-modal-body {
+  .fs-form-body {
    max-height: 66vh;
    overflow-y: auto;
  }

 }

-.ant-input-number{
+.ant-input-number {
  min-width: 100px;
 }


 .cd-table {
-  /* 我的客户样式 */
  width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
  overflow: auto;

-  .fs-loading{
+  .fs-loading {
    position: absolute;
-    left :0;  
-    top :0;
+    left: 0;
+    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
@@ -343,6 +363,7 @@ h6 {
    min-width: 100%;
    table-layout: fixed;
    font-size: 16px;
+    
  }

  thead {
@@ -379,11 +400,12 @@ h6 {
  }

  th {
-    padding: 15px 5px;
-    background: #f5f7ff;
+    padding: 10px 5px;
+    background: #fbfbfb;
    font-weight: 600;
-    color: #6e8efb;
+    color: #000000;
    font-size: 14px;
+    border-top: 1px solid #eee;

    &:last-child {
      border-right: 1px solid #eee;
@@ -5,6 +5,7 @@ export type FormOptionReq = {
  columns?: any;
  onSubmit?: any;
  body?: any;
+  initialForm?: any;
 };

 export function useFormDialog() {
@@ -16,6 +17,7 @@ export function useFormDialog() {
        crudOptions: {
          columns: req.columns,
          form: {
+            initialForm: req.initialForm,
            wrapper: {
              title: req.title,
              saveRemind: false,
@@ -58,9 +58,9 @@ export async function DeleteBatch(ids: any[]) {
  });
 }

-export async function ImportTaskAdd(body: any) {
+export async function ImportTaskSave(body: any) {
  return await request({
-    url: apiPrefix + "/import/add",
+    url: apiPrefix + "/import/save",
    method: "post",
    data: body,
  });
@@ -1,21 +1,29 @@
 <template>
-  <div class="domain-import-task-status min-h-[400px]">
-    <div class="action">
+  <div class="domain-import-task-status min-h-[300px]">
+    <div class="action mb-5">
      <fs-button type="primary" icon="ion:add-outline" @click="addTask">添加导入任务</fs-button>
      <fs-button type="primary" icon="ion:refresh-outline" class="ml-2" @click="loadImportTaskStatus">刷新</fs-button>
    </div>
-    <div class="table-container overflow-auto mt-2">
+    <div class="table-container overflow-auto mb-10">
      <table class="cd-table border-gray-300 w-full">
        <thead>
          <tr>
-            <th class="w-20%">来源</th>
-            <th>进度</th>
-            <th class="w-20%">操作</th>
+            <th class="w-[220px]">来源</th>
+            <th class="">进度</th>
+            <th class="w-[220px]">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.key">
-            <td class="ellipsis">{{ item.title }}</td>
+            <td class="ellipsis">
+              <span class="flex items-center pointer" @click="editTask(item)">
+                <span class="flex-1 ellipsis flex items-center">
+                  <fs-icon :icon="item.icon" class="mr-2"></fs-icon>
+                  {{ item.title }}
+                </span>
+                <fs-icon icon="ant-design:edit-outlined" class="ml-2" />
+              </span>
+            </td>
            <td>
              <div v-if="item.task">
                <div>
@@ -49,6 +57,7 @@ import { onMounted, ref } from "vue";
 import * as api from "./api";
 import { Modal } from "ant-design-vue";
 import { useDomainImport } from "./use";
+import { Dicts } from "/@/components/plugins/lib/dicts";
 defineOptions({
  name: "DomainImportTaskStatus",
 });
@@ -58,6 +67,10 @@ const list = ref([]);
 async function loadImportTaskStatus() {
  const res = await api.ImportTaskStatus();
  list.value = res || [];
+  for (let item of list.value) {
+    const provider = Dicts.dnsProviderTypeDict.dataMap[item.dnsProviderType];
+    item.icon = provider?.icon || "ion:cloud-outline";
+  }
 }

 async function startTask(item: any) {
@@ -87,6 +100,15 @@ async function addTask() {
  });
 }

+async function editTask(item: any) {
+  await openDomainImportDialog({
+    afterSubmit: async () => {
+      await loadImportTaskStatus();
+    },
+    form: item,
+  });
+}
+
 onMounted(async () => {
  await loadImportTaskStatus();
 });
@@ -95,7 +117,11 @@ onMounted(async () => {
 <style lang="less">
 .domain-import-task-status {
  .table-container {
-    height: 60vh;
+    height: 50vh;
+  }
+
+  .ant-progress {
+    margin-bottom: 0px;
  }
 }
 </style>
@@ -18,7 +18,6 @@ export function useDomainImport() {
            //@ts-ignore
            selectedChange: ({ form, $event }) => {
              form.dnsProviderAccessType = $event.accessType;
-              form.dnsProviderTitle = $event.label;
            },
          },
        },
@@ -45,26 +44,23 @@ export function useDomainImport() {
          type: compute(({ form }) => {
            return form.dnsProviderAccessType || form.dnsProviderType;
          }),
-          on: {
-            //@ts-ignore
-            selectedChange({ form, $event }) {
-              form.accessTitle = $event.name;
-            },
-          },
        },
      },
    },
  };

-  return function openDomainImportDialog(req: { afterSubmit?: () => void }) {
+  return function openDomainImportDialog(req: { afterSubmit?: () => void; form?: any }) {
    openFormDialog({
      title: "从域名提供商导入域名",
      columns: columns,
+      initialForm: {
+        ...req.form,
+      },
      onSubmit: async (form: any) => {
-        await api.ImportTaskAdd({
+        await api.ImportTaskSave({
+          key: form.key,
          dnsProviderType: form.dnsProviderType,
          dnsProviderAccessId: form.dnsProviderAccessId,
-          title: form.dnsProviderTitle + "_" + form.accessTitle,
        });
        if (req.afterSubmit) {
          req.afterSubmit();