style: Adjust the style of the cronjob status button (#9185)

This commit is contained in:
ssongliu 2025-06-19 17:49:01 +08:00 committed by GitHub
parent d61a77bec7
commit 76c608c703
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 5 deletions

View file

@ -26,10 +26,8 @@
<el-icon v-if="loadingIcon(statusItem)" class="is-loading">
<Loading />
</el-icon>
<el-icon size="15" v-else class="status-icon">
<svg-icon iconName="p-stop" v-if="statusItem == 'stopped' || statusItem == 'exited'"></svg-icon>
<svg-icon iconName="p-start" class="svg-icon" v-if="statusItem == 'running'"></svg-icon>
</el-icon>
<svg-icon iconName="p-stop" className="status-icon" v-if="stopIcon(statusItem)"></svg-icon>
<svg-icon iconName="p-start" className="status-icon" v-if="runningIcon(statusItem)"></svg-icon>
</el-button>
</span>
</template>
@ -103,9 +101,18 @@ const loadingStatus = [
'executing',
];
const stopStatus = ['stopped', 'exited', 'disable'];
const runningStatus = ['running', 'enable'];
const loadingIcon = (status: string): boolean => {
return loadingStatus.indexOf(status) > -1;
};
const stopIcon = (status: string): boolean => {
return stopStatus.indexOf(status.toLocaleLowerCase()) > -1;
};
const runningIcon = (status: string): boolean => {
return runningStatus.indexOf(status.toLocaleLowerCase()) > -1;
};
</script>
<style lang="scss" scoped>

View file

@ -51,8 +51,14 @@
v-if="row.status === 'Enable'"
@click="onChangeStatus(row.id, 'disable')"
:status="row.status"
:operate="true"
/>
<Status
v-else
@click="onChangeStatus(row.id, 'enable')"
:status="row.status"
:operate="true"
/>
<Status v-else @click="onChangeStatus(row.id, 'enable')" :status="row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.cronSpec')" show-overflow-tooltip :min-width="120">