xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-04-03 19:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix ai page

Browse Source
This commit is contained in:
Chuck1sn
2025-05-22 11:04:06 +08:00
parent 224a7a6a30
commit a5781c28d3
5 changed files with 98 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/Button.vue
View File

@@ -1,26 +1,58 @@
<template>
<button :disabled="disabled" @click="handleClick" type="button" :class="[
'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 inline-flex items-center',
disabled ? `${disabledStyle}` : 'bg-blue-700 hover:bg-blue-800 '
]">
<button :disabled="disabled" @click="handleClick" type="button" :class="{
'text-white': true,
'focus:ring-4': true,
'focus:outline-none': true,
'focus:ring-blue-300': true,
'font-medium': true,
'rounded-lg': true,
'text-sm': true,
'px-5': true,
'py-2.5': true,
'text-center': true,
'me-2': true,
'dark:bg-blue-600': true,
'inline-flex': true,
'items-center': true,
'bg-blue-700 hover:bg-blue-800': !isLoading,
[loadingStyle]: isLoading
}">
<LoadingIcon v-if="isLoading && !abortable" />
<StopIcon v-if="isLoading && abortable" />
<StopIcon v-else-if="isLoading && abortable" />
{{isLoading ? loadingContent : submitContent}}
</button>
</template>
<script setup lang="ts">
import { computed } from "vue";
import LoadingIcon from "./icons/LoadingIcon.vue";
import StopIcon from "./icons/StopIcon.vue";
const { loadingContent, submitContent, isLoading = false, disabledStyle, disabled = false, abortable = false } =
defineProps<{
loadingContent?: string;
submitContent: string;
isLoading: boolean;
disabledStyle?: string;
disabled: boolean;
abortable: boolean;
handleClick: (event: Event) => void;
}>();
const {
loadingContent,
submitContent,
isLoading = false,
abortable = false,
} = defineProps<{
loadingContent?: string;
submitContent: string;
isLoading: boolean;
abortable: boolean;
handleClick: (event: Event) => void;
}>();
const loadingStyle = computed<string>(() => {
switch (true) {
case isLoading && !abortable:
return "bg-blue-400 cursor-not-allowed";
case isLoading && abortable:
return "bg-blue-700 hover:bg-blue-800";
default:
return "";
}
});
const disabled = computed(() => {
return !abortable && isLoading;
});
</script>