no message
This commit is contained in:
parent
2a6672613a
commit
67d99ccd42
@ -28,7 +28,7 @@
|
|||||||
"unplugin-auto-import": "^19.3.0",
|
"unplugin-auto-import": "^19.3.0",
|
||||||
"unplugin-vue-components": "^28.8.0",
|
"unplugin-vue-components": "^28.8.0",
|
||||||
"vue": "^3.5.17",
|
"vue": "^3.5.17",
|
||||||
"vue-i18n": "9.14.3",
|
"vue-i18n": "11",
|
||||||
"vue-router": "^4.5.1"
|
"vue-router": "^4.5.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -1,10 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<n-code :code="recode" :language="language" show-line-numbers style="width: fit-content !important; padding: 10px" />
|
||||||
<n-code :code="recode" :language="language" show-line-numbers />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
const recode = ref('');
|
const recode = computed(() => {
|
||||||
|
if (typeof prop.code === 'object') {
|
||||||
|
return JSON.stringify(prop.code, null, 2);
|
||||||
|
} else {
|
||||||
|
return prop.code;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
code: {
|
code: {
|
||||||
@ -13,13 +17,5 @@ const prop = defineProps({
|
|||||||
},
|
},
|
||||||
language: String,
|
language: String,
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (typeof prop.code === 'object') {
|
|
||||||
recode.value = JSON.stringify(prop.code, null, 2);
|
|
||||||
} else {
|
|
||||||
recode.value = prop.code;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@ -1,194 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<n-tabs v-model:value="tabValue" :bar-width="28" placement="left" style="height: 100%" type="line">
|
|
||||||
<n-tab-pane name="api信息" tab="api信息">
|
|
||||||
<NCard>
|
|
||||||
<div class="title">
|
|
||||||
<label class="lable">{{ data?.info.title }}</label>
|
|
||||||
<n-tag :bordered="false" style="font-weight: 900" type="success">V{{ data?.info.version }}</n-tag>
|
|
||||||
<n-tag :bordered="false" style="font-weight: 900" type="info">openapi-{{ data?.openapi }}</n-tag>
|
|
||||||
</div>
|
|
||||||
<div style="margin-bottom: 20px">
|
|
||||||
<a :href="apiUrl">{{ apiUrl }}</a>
|
|
||||||
</div>
|
|
||||||
<div style="margin-bottom: 20px">{{ data?.info.summary }}</div>
|
|
||||||
<div style="margin-bottom: 20px">{{ data?.info.description }}</div>
|
|
||||||
<div><a :href="data?.info.termsOfService">Terms of service</a></div>
|
|
||||||
<div>
|
|
||||||
<a :href="data?.info.contact?.url">{{ data?.info.contact?.name }} - Website</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a :href="data?.info.contact?.url">Send email to {{ data?.info.contact?.name }}</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a :href="data?.info.license?.url">{{ data?.info.license?.name }}</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a :href="data?.externalDocs?.url">{{ data?.externalDocs?.description }}</a>
|
|
||||||
</div>
|
|
||||||
</NCard>
|
|
||||||
</n-tab-pane>
|
|
||||||
<n-tab-pane v-for="(v, k) in tags" :name="k" :tab="k">
|
|
||||||
<NCard
|
|
||||||
:segmented="{
|
|
||||||
content: true,
|
|
||||||
footer: 'soft',
|
|
||||||
}">
|
|
||||||
<template #header>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 27px">{{ k }}</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 20px">{{ v.description }}</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<n-collapse accordion default-expanded-names="1">
|
|
||||||
<template v-for="(v2, k2) in v.data">
|
|
||||||
<template v-for="(v3, k3) in v2">
|
|
||||||
<OpenApiDocMethod :id="`${k}+${k3}-${k2}`" :type="k3" :url="k2" :data="v3" />
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</n-collapse>
|
|
||||||
</NCard>
|
|
||||||
</n-tab-pane>
|
|
||||||
<n-tab-pane name="schema" tab="架构">
|
|
||||||
<NCard
|
|
||||||
:segmented="{
|
|
||||||
content: true,
|
|
||||||
footer: 'soft',
|
|
||||||
}">
|
|
||||||
<template #header>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 27px">架构</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 20px">一些类型而已</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<n-collapse accordion default-expanded-names="2">
|
|
||||||
<OpenApiDocSchema :id="`schema+${k}`" v-for="(v, k) in
|
|
||||||
data?.components?.schemas"
|
|
||||||
:data="v" :name="k" />
|
|
||||||
</n-collapse>
|
|
||||||
</NCard>
|
|
||||||
</n-tab-pane>
|
|
||||||
<n-tab-pane name="权限验证" tab="权限验证">
|
|
||||||
<NCard
|
|
||||||
:segmented="{
|
|
||||||
content: true,
|
|
||||||
footer: 'soft',
|
|
||||||
}">
|
|
||||||
<template #header>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 27px">权限验证</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label style="font-weight: 700; font-size: 20px">验证你的权限</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<n-collapse accordion default-expanded-names="3">
|
|
||||||
<OpenApiDocSecuritySchemes v-for="(v, k) in data?.components?.securitySchemes" :data="v" :name="k" />
|
|
||||||
</n-collapse>
|
|
||||||
</NCard>
|
|
||||||
</n-tab-pane>
|
|
||||||
</n-tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { onMounted, type PropType, ref } from 'vue';
|
|
||||||
import { NTag } from 'naive-ui';
|
|
||||||
import type { OpenAPIV3_1 } from 'openapi-types';
|
|
||||||
import OpenApiDocMethod from '@/components/OpenApiDocMethod.vue';
|
|
||||||
import { router } from '@/plugin';
|
|
||||||
import type { RouteLocationNormalizedGeneric } from 'vue-router';
|
|
||||||
import OpenApiDocSchema from '@/components/OpenApiDocSchema.vue';
|
|
||||||
import OpenApiDocSecuritySchemes from '@/components/OpenApiDocSecuritySchemes.vue';
|
|
||||||
|
|
||||||
const data = ref<OpenAPIV3_1.Document>();
|
|
||||||
const tags = ref<{
|
|
||||||
[key: string]: {
|
|
||||||
data: { [key: string]: OpenAPIV3_1.PathItemObject };
|
|
||||||
description: string;
|
|
||||||
};
|
|
||||||
}>({});
|
|
||||||
export type TFunctionType = (args: string) => string;
|
|
||||||
export type getApiFunType = (args: string) => PromiseLike<string>;
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
prop
|
|
||||||
.getApiFun(prop.apiUrl)
|
|
||||||
.then((res) => {
|
|
||||||
data.value = JSON.parse(res);
|
|
||||||
return data.value;
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
for (const pathsKey in res?.paths) {
|
|
||||||
const models = res?.paths[pathsKey];
|
|
||||||
for (const model in models) {
|
|
||||||
for (const i of models[model]?.tags) {
|
|
||||||
if (!tags.value[i]) {
|
|
||||||
tags.value[i] = {
|
|
||||||
data: {},
|
|
||||||
description: data.value?.tags?.find((is) => is.name === i)?.description,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
tags.value[i].data[pathsKey] = models;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
hashback(router.currentRoute.value);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function hashback(to: RouteLocationNormalizedGeneric) {
|
|
||||||
if (!to.hash) return;
|
|
||||||
const tab = to.hash.split('+')?.[0].replace('#', '');
|
|
||||||
setTimeout(() => {
|
|
||||||
tabValue.value = tab;
|
|
||||||
setTimeout(()=>{
|
|
||||||
const ele = document.getElementById(to.hash.replace('#', ''));
|
|
||||||
ele?.scrollIntoView();
|
|
||||||
const ele2 = ele?.children[0].children[0];
|
|
||||||
ele2?.click()
|
|
||||||
},100)
|
|
||||||
}, 100 );
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeAfterEach = router.afterEach(hashback);
|
|
||||||
|
|
||||||
onUnmounted(() => removeAfterEach());
|
|
||||||
|
|
||||||
const tabValue = ref<string>('api信息');
|
|
||||||
|
|
||||||
const prop = defineProps({
|
|
||||||
apiUrl: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
getApiFun: {
|
|
||||||
type: Function as PropType<getApiFunType>,
|
|
||||||
default: async (url: string) => (await fetch(url)).text(),
|
|
||||||
},
|
|
||||||
i18nFun: {
|
|
||||||
type: Function as PropType<TFunctionType>,
|
|
||||||
default: (s: string) => s,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.lable {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
justify-content: left;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-collapse-item :name="name" :title="name" class="datas">
|
|
||||||
<template #header>
|
|
||||||
<div f n-c style="padding: 10px; height: calc(100% - 10px); display: flex; gap: 20px">
|
|
||||||
<label style="font-weight: 700">{{ name }}</label>
|
|
||||||
<label style="font-weight: 700;color:var(--color-des-text);"></label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div></div>
|
|
||||||
</n-collapse-item>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const props = defineProps({
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@mixin method-style($color) {
|
|
||||||
background: rgba($color, 0.1);
|
|
||||||
border-radius: 3px;
|
|
||||||
--color-des-text: rgba(var(--text-color), 0.5);
|
|
||||||
border: 1px solid $color !important;
|
|
||||||
--color: #{$color};
|
|
||||||
}
|
|
||||||
|
|
||||||
.datas {
|
|
||||||
@include method-style(#4182b8);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-collapse-item :name="name" :title="name" class="datas">
|
|
||||||
<template #header>
|
|
||||||
<div f n-c style="padding: 10px; height: calc(100% - 10px); display: flex; gap: 20px">
|
|
||||||
<label style="font-weight: 700">{{ name }}</label>
|
|
||||||
<label style="font-weight: 700;color:var(--color-des-text);">{{ data?.description
|
|
||||||
}}</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div></div>
|
|
||||||
</n-collapse-item>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { PropType } from 'vue';
|
|
||||||
import type { OpenAPIV3_1 } from 'openapi-types';
|
|
||||||
const props = defineProps({
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
data:{
|
|
||||||
type:Object as PropType<OpenAPIV3_1.SecuritySchemeObject>
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(props.data);
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@mixin method-style($color) {
|
|
||||||
background: rgba($color, 0.1);
|
|
||||||
--color-des-text: rgba(var(--text-color), 0.5);
|
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid $color !important;
|
|
||||||
--color: #{$color};
|
|
||||||
}
|
|
||||||
|
|
||||||
.datas {
|
|
||||||
@include method-style(#ac44af);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<OpenApiDoc api-url="/apis/swagger/api.json" style="margin: 20px; height: calc(100% - 30px)" />
|
<div id="swaggerContainer"></div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import OpenApiDoc from '@/components/OpenApiDoc.vue';
|
import 'swagger-ui-dist/swagger-ui.css';
|
||||||
|
import '@/assets/SwaggerDark.scss';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { SwaggerUIBundle } from 'swagger-ui-dist';
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
SwaggerUIBundle({
|
||||||
|
dom_id: '#swaggerContainer',
|
||||||
|
url: '/apis/swagger/api.json',
|
||||||
|
presets: [SwaggerUIBundle.presets.apis, SwaggerUIBundle.SwaggerUIStandalonePreset],
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user