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

This commit is contained in:
xiaojunnuo
2025-11-07 00:44:13 +08:00
parent f83fe28a18
commit 0203aa2b6e
14 changed files with 86 additions and 64 deletions
@@ -1,4 +1,3 @@
import { notification } from "ant-design-vue";
import { useSettingStore } from "/@/store/settings"; import { useSettingStore } from "/@/store/settings";
export default { export default {
@@ -7,17 +6,15 @@ export default {
const settingStore = useSettingStore(); const settingStore = useSettingStore();
el.className = el.className + " need-plus"; el.className = el.className + " need-plus";
if (!settingStore.isPlus) { if (!settingStore.isPlus) {
function checkPlus() {
// 事件处理代码
notification.warn({
message: "此为专业版功能,请升级到专业版",
});
}
el.addEventListener("click", function (event: any) { el.addEventListener("click", function (event: any) {
checkPlus(); event.stopPropagation();
event.preventDefault();
settingStore.checkPlus();
}); });
el.addEventListener("move", function (event: any) { el.addEventListener("move", function (event: any) {
checkPlus(); event.stopPropagation();
event.preventDefault();
settingStore.checkPlus();
}); });
} }
}, },
@@ -88,4 +88,5 @@ export default {
activation_code_one_use: "Activation code can only be used once. To change site, please ", activation_code_one_use: "Activation code can only be used once. To change site, please ",
bind_account: "bind account", bind_account: "bind account",
transfer_vip: ' then "Transfer VIP"', transfer_vip: ' then "Transfer VIP"',
needVipTip: "This feature requires a professional version, please upgrade to a professional version first.",
}; };
@@ -88,4 +88,5 @@ export default {
activation_code_one_use: "激活码使用过一次之后,不可再次使用,如果要更换站点,请", activation_code_one_use: "激活码使用过一次之后,不可再次使用,如果要更换站点,请",
bind_account: "绑定账号", bind_account: "绑定账号",
transfer_vip: ',然后"转移VIP"即可', transfer_vip: ',然后"转移VIP"即可',
needVipTip: "此为专业版功能,请先开通专业版",
}; };
@@ -232,15 +232,15 @@ function install(app: App, options: any = {}) {
}, },
wrapperCol: { wrapperCol: {
span: null, span: null,
buttons: {
copy: { show: false },
paste: { show: false },
},
}, },
wrapper: { wrapper: {
saveRemind: true, saveRemind: true,
// inner: true, // inner: true,
// innerContainerSelector: "main.fs-framework-content" // innerContainerSelector: "main.fs-framework-content"
buttons: {
copy: { show: false },
paste: { show: false },
},
}, },
}, },
columns: { columns: {
@@ -1,6 +1,5 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { Modal, notification } from "ant-design-vue"; import { Modal, notification } from "ant-design-vue";
import * as _ from "lodash-es";
import * as basicApi from "./api.basic"; import * as basicApi from "./api.basic";
import { AppInfo, HeaderMenus, PlusInfo, SiteEnv, SiteInfo, SuiteSetting, SysInstallInfo, SysPublicSetting } from "./api.basic"; import { AppInfo, HeaderMenus, PlusInfo, SiteEnv, SiteInfo, SuiteSetting, SysInstallInfo, SysPublicSetting } from "./api.basic";
import { useUserStore } from "../user"; import { useUserStore } from "../user";
@@ -11,6 +10,7 @@ import { useTitle } from "@vueuse/core";
import { utils } from "/@/utils"; import { utils } from "/@/utils";
import { cloneDeep, merge } from "lodash-es"; import { cloneDeep, merge } from "lodash-es";
import { useI18n } from "/src/locales"; import { useI18n } from "/src/locales";
import { $t } from "/src/locales";
export interface SettingState { export interface SettingState {
skipReset?: boolean; // 注销登录时,不清空此store的状态 skipReset?: boolean; // 注销登录时,不清空此store的状态
sysPublic?: SysPublicSetting; sysPublic?: SysPublicSetting;
@@ -127,7 +127,8 @@ export const useSettingStore = defineStore({
return this.installInfo; return this.installInfo;
}, },
isPlus(): boolean { isPlus(): boolean {
return this.plusInfo?.isPlus && this.plusInfo?.expireTime > new Date().getTime(); // return this.plusInfo?.isPlus && this.plusInfo?.expireTime > new Date().getTime();
return false;
}, },
isComm(): boolean { isComm(): boolean {
return this.plusInfo?.isComm && this.plusInfo?.expireTime > new Date().getTime(); return this.plusInfo?.isComm && this.plusInfo?.expireTime > new Date().getTime();
@@ -174,19 +175,19 @@ export const useSettingStore = defineStore({
checkPlus() { checkPlus() {
if (!this.isPlus) { if (!this.isPlus) {
notification.warn({ notification.warn({
message: "此为专业版功能,请先升级到专业版", message: $t("vip.needVipTip"),
}); });
throw new Error("此为专业版功能,请升级到专业版"); throw new Error($t("vip.needVipTip"));
} }
}, },
async loadSysSettings() { async loadSysSettings() {
const allSettings = await basicApi.loadAllSettings(); const allSettings = await basicApi.loadAllSettings();
_.merge(this.sysPublic, allSettings.sysPublic || {}); merge(this.sysPublic, allSettings.sysPublic || {});
_.merge(this.installInfo, allSettings.installInfo || {}); merge(this.installInfo, allSettings.installInfo || {});
_.merge(this.siteEnv, allSettings.siteEnv || {}); merge(this.siteEnv, allSettings.siteEnv || {});
_.merge(this.plusInfo, allSettings.plusInfo || {}); merge(this.plusInfo, allSettings.plusInfo || {});
_.merge(this.headerMenus, allSettings.headerMenus || {}); merge(this.headerMenus, allSettings.headerMenus || {});
_.merge(this.suiteSetting, allSettings.suiteSetting || {}); merge(this.suiteSetting, allSettings.suiteSetting || {});
//@ts-ignore //@ts-ignore
this.initSiteInfo(allSettings.siteInfo || {}); this.initSiteInfo(allSettings.siteInfo || {});
this.initAppInfo(allSettings.app || {}); this.initAppInfo(allSettings.app || {});
@@ -206,7 +207,7 @@ export const useSettingStore = defineStore({
siteInfo.loginLogo = `api/basic/file/download?key=${siteInfo.loginLogo}`; siteInfo.loginLogo = `api/basic/file/download?key=${siteInfo.loginLogo}`;
} }
} }
this.siteInfo = _.merge({}, defaultSiteInfo, siteInfo); this.siteInfo = merge({}, defaultSiteInfo, siteInfo);
if (this.siteInfo.logo) { if (this.siteInfo.logo) {
updatePreferences({ updatePreferences({
@@ -300,7 +300,7 @@ h6 {
} }
.ant-drawer-content-wrapper { .ant-drawer-content-wrapper {
max-width: 90vw; max-width: 95vw;
} }
.block-title { .block-title {
@@ -84,6 +84,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
edit: { edit: {
show: false, 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: { columns: {
@@ -1,10 +1,11 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as api from "../api"; import * as api from "../api";
import { notification } from "ant-design-vue"; import { notification } from "ant-design-vue";
import { dict, useFormWrapper } from "@fast-crud/fast-crud"; import { dict, useFormWrapper } from "@fast-crud/fast-crud";
import { useSettingStore } from "/@/store/settings";
const props = defineProps<{ const props = defineProps<{
selectedRowKeys: any[]; selectedRowKeys: any[];
@@ -24,8 +25,9 @@ const pipelineGroupDictRef = dict({
label: "name", label: "name",
}); });
const { openCrudFormDialog } = useFormWrapper(); const { openCrudFormDialog } = useFormWrapper();
const settingStore = useSettingStore();
async function openGroupSelectDialog() { async function openGroupSelectDialog() {
settingStore.checkPlus();
const crudOptions: any = { const crudOptions: any = {
columns: { columns: {
groupId: { groupId: {
@@ -1,11 +1,11 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as api from "../api";
import { useFormWrapper } from "@fast-crud/fast-crud"; 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 NotificationSelector from "/@/views/certd/notification/notification-selector/index.vue";
import { ref } from "vue";
const props = defineProps<{ const props = defineProps<{
selectedRowKeys: any[]; selectedRowKeys: any[];
@@ -32,8 +32,9 @@ async function batchUpdateRequest(form: any) {
} }
const { openCrudFormDialog } = useFormWrapper(); const { openCrudFormDialog } = useFormWrapper();
const settingStore = useSettingStore();
async function openFormDialog() { async function openFormDialog() {
settingStore.checkPlus();
const crudOptions: any = { const crudOptions: any = {
columns: { columns: {
when: { when: {
@@ -1,12 +1,12 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as api from "../api";
import { useFormWrapper } from "@fast-crud/fast-crud"; import { useFormWrapper } from "@fast-crud/fast-crud";
import * as api from "../api";
import { useSettingStore } from "/@/store/settings";
import { useI18n } from "/src/locales"; import { useI18n } from "/src/locales";
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps<{ const props = defineProps<{
@@ -27,7 +27,10 @@ async function batchUpdateRequest(form: any) {
const { openCrudFormDialog } = useFormWrapper(); const { openCrudFormDialog } = useFormWrapper();
const settingStore = useSettingStore();
async function openFormDialog() { async function openFormDialog() {
settingStore.checkPlus();
const crudOptions: any = { const crudOptions: any = {
columns: { columns: {
"props.cron": { "props.cron": {
@@ -9,9 +9,9 @@
<span>{{ t("certd.selectedCount", { count: selectedRowKeys.length }) }}</span> <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="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> <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-group :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-group>
<change-notification class="color-green" :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-notification> <change-notification :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-notification>
<change-trigger class="color-green" :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-trigger> <change-trigger :selected-row-keys="selectedRowKeys" @change="batchFinished"></change-trigger>
</div> </div>
</div> </div>
<template #actionbar-right> </template> <template #actionbar-right> </template>
@@ -34,6 +34,7 @@ import { useI18n } from "/src/locales";
const { t } = useI18n(); const { t } = useI18n();
import ChangeNotification from "/@/views/certd/pipeline/components/change-notification.vue"; import ChangeNotification from "/@/views/certd/pipeline/components/change-notification.vue";
import { useSettingStore } from "/@/store/settings";
defineOptions({ defineOptions({
name: "PipelineManager", name: "PipelineManager",
@@ -61,8 +62,10 @@ onActivated(async () => {
await crudExpose.doRefresh(); await crudExpose.doRefresh();
}); });
const settingStore = useSettingStore();
function batchFinished() { function batchFinished() {
crudExpose.doRefresh(); if (settingStore) crudExpose.doRefresh();
selectedRowKeys.value = []; selectedRowKeys.value = [];
} }
function batchDelete() { function batchDelete() {
@@ -79,6 +82,7 @@ function batchDelete() {
} }
function batchRerun() { function batchRerun() {
settingStore.checkPlus();
Modal.confirm({ Modal.confirm({
title: "确认强制重新运行吗", title: "确认强制重新运行吗",
content: "确定要强制重新运行选中流水线吗?(20条一批执行)", content: "确定要强制重新运行选中流水线吗?(20条一批执行)",
@@ -24,7 +24,7 @@
</a-col> </a-col>
</a-row> </a-row>
</template> </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"> <a-tabs v-model:active-key="pluginGroupActive" tab-position="left" class="flex-1 overflow-hidden">
<template v-for="group of computedPluginGroups" :key="group.key"> <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"> <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 { .step-form-drawer {
max-width: 100%; max-width: 100%;
.ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab {
padding: 8px 10px;
}
.ant-tabs-nav .ant-tabs-tab { .ant-tabs-nav .ant-tabs-tab {
margin-top: 10px !important; margin-top: 10px !important;
padding: 8px 14px !important;
} }
&.fullscreen { &.fullscreen {
@@ -9,8 +9,8 @@
</div> </div>
</template> </template>
<template v-if="currentTask"> <template v-if="currentTask">
<pi-container> <pi-container class="task-form-container">
<a-form ref="taskFormRef" class="task-form" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form ref="taskFormRef" class="task-form md:ml-20 md:mr-20" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol">
<fs-form-item <fs-form-item
v-model="currentTask.title" v-model="currentTask.title"
:item="{ :item="{
@@ -258,8 +258,8 @@ export default {
return { return {
userStore, userStore,
settingStore, settingStore,
labelCol: { span: 6 }, labelCol: { span: 4 },
wrapperCol: { span: 16 }, wrapperCol: { span: 20 },
...useTaskForm(), ...useTaskForm(),
...useStep(), ...useStep(),
}; };
@@ -269,8 +269,18 @@ export default {
<style lang="less"> <style lang="less">
.pi-task-form { .pi-task-form {
.task-form-container {
.body {
.task-form {
.ant-form-item-label {
text-align: left !important ;
}
}
}
}
.steps { .steps {
margin: 0 50px 0 50px; margin: 0;
} }
.ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title { .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
margin: 0; margin: 0;
@@ -283,7 +293,6 @@ export default {
} }
} }
.step-list { .step-list {
padding: 10px;
.icon-button { .icon-button {
font-size: 18px; font-size: 18px;
color: #1677ff; color: #1677ff;
@@ -291,7 +300,7 @@ export default {
} }
.step-row { .step-row {
padding: 10px; margin-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -306,7 +315,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
> * { > * {
margin-right: 15px; margin-right: 10px;
font-size: 14px; font-size: 14px;
} }
} }
+12 -12
View File
@@ -789,19 +789,19 @@ importers:
packages/pro/commercial-core: packages/pro/commercial-core:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../core/basic version: link:../../core/basic
'@certd/lib-server': '@certd/lib-server':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../libs/lib-server version: link:../../libs/lib-server
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-plus': '@certd/plugin-plus':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../plugin-plus version: link:../plugin-plus
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../plus-core version: link:../plus-core
'@midwayjs/core': '@midwayjs/core':
specifier: 3.20.11 specifier: 3.20.11
@@ -886,22 +886,22 @@ importers:
specifier: ^1.0.2 specifier: ^1.0.2
version: 1.0.3 version: 1.0.3
'@certd/basic': '@certd/basic':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../core/basic version: link:../../core/basic
'@certd/lib-k8s': '@certd/lib-k8s':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../libs/lib-k8s version: link:../../libs/lib-k8s
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-cert': '@certd/plugin-cert':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../plugins/plugin-cert version: link:../../plugins/plugin-cert
'@certd/plugin-lib': '@certd/plugin-lib':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../plugins/plugin-lib version: link:../../plugins/plugin-lib
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../plus-core version: link:../plus-core
ali-oss: ali-oss:
specifier: ^6.21.0 specifier: ^6.21.0
@@ -1004,7 +1004,7 @@ importers:
packages/pro/plus-core: packages/pro/plus-core:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.37.2 specifier: ^1.37.4
version: link:../../core/basic version: link:../../core/basic
dayjs: dayjs:
specifier: ^1.11.7 specifier: ^1.11.7