perf: 优化任务参数配置界面在手机版下的展示效果

2026-05-16 21:27:34 +08:00 · 2025-11-07 00:44:13 +08:00
parent f83fe28a18
commit 0203aa2b6e
14 changed files with 86 additions and 64 deletions
@@ -84,6 +84,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
          edit: {
            show: false,
          },
+          copy: { show: false },
+          view: {
+            async click({ row }) {
+              await router.push({ path: "/certd/pipeline/detail", query: { id: row.pipelineId, historyId: row.id, editMode: "false" } });
+            },
+          },
        },
      },
      columns: {
@@ -1,10 +1,11 @@
 <template>
-  <fs-button icon="mdi:format-list-group" type="link" text="修改分组" @click="openGroupSelectDialog"></fs-button>
+  <fs-button icon="mdi:format-list-group" class="need-plus" type="link" text="修改分组" @click="openGroupSelectDialog"></fs-button>
 </template>
 <script setup lang="ts">
 import * as api from "../api";
 import { notification } from "ant-design-vue";
 import { dict, useFormWrapper } from "@fast-crud/fast-crud";
+import { useSettingStore } from "/@/store/settings";

 const props = defineProps<{
  selectedRowKeys: any[];
@@ -24,8 +25,9 @@ const pipelineGroupDictRef = dict({
  label: "name",
 });
 const { openCrudFormDialog } = useFormWrapper();
-
+const settingStore = useSettingStore();
 async function openGroupSelectDialog() {
+  settingStore.checkPlus();
  const crudOptions: any = {
    columns: {
      groupId: {
@@ -1,11 +1,11 @@
 <template>
-  <fs-button icon="mdi:format-list-group" type="link" text="修改通知" @click="openFormDialog"></fs-button>
+  <fs-button icon="mdi:format-list-group" class="need-plus" type="link" text="修改通知" @click="openFormDialog"></fs-button>
 </template>
 <script setup lang="ts">
-import * as api from "../api";
 import { useFormWrapper } from "@fast-crud/fast-crud";
+import * as api from "../api";
+import { useSettingStore } from "/@/store/settings";
 import NotificationSelector from "/@/views/certd/notification/notification-selector/index.vue";
-import { ref } from "vue";

 const props = defineProps<{
  selectedRowKeys: any[];
@@ -32,8 +32,9 @@ async function batchUpdateRequest(form: any) {
 }

 const { openCrudFormDialog } = useFormWrapper();
-
+const settingStore = useSettingStore();
 async function openFormDialog() {
+  settingStore.checkPlus();
  const crudOptions: any = {
    columns: {
      when: {
@@ -1,12 +1,12 @@
 <template>
-  <fs-button icon="mdi:format-list-group" type="link" :text="t('certd.editSchedule')" @click="openFormDialog"></fs-button>
+  <fs-button icon="mdi:format-list-group" class="need-plus" type="link" :text="t('certd.editSchedule')" @click="openFormDialog"></fs-button>
 </template>

 <script setup lang="ts">
-import * as api from "../api";
 import { useFormWrapper } from "@fast-crud/fast-crud";
+import * as api from "../api";
+import { useSettingStore } from "/@/store/settings";
 import { useI18n } from "/src/locales";
-
 const { t } = useI18n();

 const props = defineProps<{
@@ -27,7 +27,10 @@ async function batchUpdateRequest(form: any) {

 const { openCrudFormDialog } = useFormWrapper();

+const settingStore = useSettingStore();
+
 async function openFormDialog() {
+  settingStore.checkPlus();
  const crudOptions: any = {
    columns: {
      "props.cron": {
@@ -9,9 +9,9 @@
          <span>{{ t("certd.selectedCount", { count: selectedRowKeys.length }) }}</span>
          <fs-button icon="ion:trash-outline" class="color-red" type="link" :text="t('certd.batchDelete')" @click="batchDelete"></fs-button>
          <fs-button icon="icon-park-outline:replay-music" class="need-plus" type="link" :text="t('certd.batchForceRerun')" @click="batchRerun"></fs-button>
-          <change-group class="color-green" :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-group>
-          <change-notification class="color-green" :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-notification>
-          <change-trigger class="color-green" :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-trigger>
+          <change-group :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-group>
+          <change-notification :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-notification>
+          <change-trigger :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-trigger>
        </div>
      </div>
      <template #actionbar-right> </template>
@@ -34,6 +34,7 @@ import { useI18n } from "/src/locales";

 const { t } = useI18n();
 import ChangeNotification from "/@/views/certd/pipeline/components/change-notification.vue";
+import { useSettingStore } from "/@/store/settings";

 defineOptions({
  name: "PipelineManager",
@@ -61,8 +62,10 @@ onActivated(async () => {
  await crudExpose.doRefresh();
 });

+const settingStore = useSettingStore();
+
 function batchFinished() {
-  crudExpose.doRefresh();
+  if (settingStore) crudExpose.doRefresh();
  selectedRowKeys.value = [];
 }
 function batchDelete() {
@@ -79,6 +82,7 @@ function batchDelete() {
 }

 function batchRerun() {
+  settingStore.checkPlus();
  Modal.confirm({
    title: "确认强制重新运行吗",
    content: "确定要强制重新运行选中流水线吗？(20条一批执行)",
@@ -24,7 +24,7 @@
            </a-col>
          </a-row>
        </template>
-        <div class="flex-col h-100 w-100 overflow-hidden">
+        <div class="flex-col h-100 overflow-hidden md:ml-5 md:mr-5 step-form-body">
          <a-tabs v-model:active-key="pluginGroupActive" tab-position="left" class="flex-1 overflow-hidden">
            <template v-for="group of computedPluginGroups" :key="group.key">
              <a-tab-pane v-if="(group.key === 'admin' && userStore.isAdmin) || group.key !== 'admin'" :key="group.key" class="scroll-y">
@@ -464,12 +464,9 @@ defineExpose({
 .step-form-drawer {
  max-width: 100%;

-  .ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab {
-    padding: 8px 10px;
-  }
-
  .ant-tabs-nav .ant-tabs-tab {
    margin-top: 10px !important;
+    padding: 8px 14px !important;
  }

  &.fullscreen {
@@ -9,8 +9,8 @@
      </div>
    </template>
    <template v-if="currentTask">
-      <pi-container>
-        <a-form ref="taskFormRef" class="task-form" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <pi-container class="task-form-container">
+        <a-form ref="taskFormRef" class="task-form md:ml-20 md:mr-20" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol">
          <fs-form-item
            v-model="currentTask.title"
            :item="{
@@ -258,8 +258,8 @@ export default {
    return {
      userStore,
      settingStore,
-      labelCol: { span: 6 },
-      wrapperCol: { span: 16 },
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
      ...useTaskForm(),
      ...useStep(),
    };
@@ -269,8 +269,18 @@ export default {

 <style lang="less">
 .pi-task-form {
+  .task-form-container {
+    .body {
+      .task-form {
+        .ant-form-item-label {
+          text-align: left !important ;
+        }
+      }
+    }
+  }
+
  .steps {
-    margin: 0 50px 0 50px;
+    margin: 0;
  }
  .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
    margin: 0;
@@ -283,7 +293,6 @@ export default {
    }
  }
  .step-list {
-    padding: 10px;
    .icon-button {
      font-size: 18px;
      color: #1677ff;
@@ -291,7 +300,7 @@ export default {
    }

    .step-row {
-      padding: 10px;
+      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
@@ -306,7 +315,7 @@ export default {
        display: flex;
        align-items: center;
        > * {
-          margin-right: 15px;
+          margin-right: 10px;
          font-size: 14px;
        }
      }