pan-disk/web-src/components/OpenApiDocMethod.vue
minglipro 2a6672613a
All checks were successful
Gitea Actions Build / Build (push) Successful in 1m23s
no message
2025-07-01 08:03:23 +08:00

91 lines
1.9 KiB
Vue

<template>
<n-collapse-item
:name="`${url}-${type}`"
:title="url"
v-bind:class="{
get: type === 'get',
put: type === 'put',
post: type === 'post',
delete: type === 'delete',
options: type === 'options',
head: type === 'head',
patch: type === 'patch',
}">
<template #header>
<div f n-c style="padding: 10px; height: calc(100% - 10px); display: flex; gap: 20px">
<div
c-c
f
style="
width: 80px;
height: 30px;
background: var(--color);
border-radius: 2px;
font-weight: 700;
color: #fff;
">
{{ type.toUpperCase() }}
</div>
<label style="font-weight: 700">{{ url }}</label>
<label style="font-weight: 700;color:var(--color-des-text);">{{
data?.summary
}}</label>
</div>
</template>
<div></div>
</n-collapse-item>
</template>
<script lang="ts" setup>
import type { OpenAPIV3_1 } from 'openapi-types';
const prop = defineProps({
type: {
type: String as PropType<'get' | 'post' | 'put' | 'delete' | 'patch' | 'head' | 'options' | 'trace' | 'connect'>,
default: 'get',
},
url: {
type: [String, Number],
required: true,
},
data:Object as PropType<OpenAPIV3_1.PathItemObject>
});
</script>
<style lang="scss" scoped>
@mixin method-style($color) {
background: rgba($color, 0.1);
border-radius: 3px;
border: 1px solid $color !important;
--color: #{$color};
--color-des-text: rgba(var(--text-color), 0.5);
}
.get {
@include method-style(#61affe);
}
.put {
@include method-style(#fca130ff);
}
.post {
@include method-style(#49cc90);
}
.delete {
@include method-style(#f93e3e);
}
.options {
@include method-style(#0d5aa7);
}
.head {
@include method-style(#9012fe);
}
.patch {
@include method-style(#50e3c2);
}
</style>