Compare commits

..

No commits in common. "master" and "Auto-Releases-0.1-2a6672613a" have entirely different histories.

19 changed files with 420 additions and 217 deletions

View File

@ -25,12 +25,12 @@
"id": {
"type": "string",
"description": "语言ID",
"pattern": "^[a-z]{2}-[A-Z]{2}$"
"pattern": "^[a-z]{2}-[a-z]{2}$"
},
"file": {
"type": "string",
"description": "语言文件在language文件夹的位置",
"pattern": "^[a-z]{2}-[A-Z]{2}\\.json$"
"pattern": "^[A-Z]{2}_[A-Z]{2}\\.json$"
},
"icon": {
"type": "string",

View File

@ -28,7 +28,7 @@
"unplugin-auto-import": "^19.3.0",
"unplugin-vue-components": "^28.8.0",
"vue": "^3.5.17",
"vue-i18n": "11",
"vue-i18n": "9.14.3",
"vue-router": "^4.5.1"
},
"devDependencies": {

View File

@ -1,14 +1,10 @@
<template>
<n-code :code="recode" :language="language" show-line-numbers style="width: fit-content !important; padding: 10px" />
<div>
<n-code :code="recode" :language="language" show-line-numbers />
</div>
</template>
<script lang="ts" setup>
const recode = computed(() => {
if (typeof prop.code === 'object') {
return JSON.stringify(prop.code, null, 2);
} else {
return prop.code;
}
});
const recode = ref('');
const prop = defineProps({
code: {
@ -17,5 +13,13 @@ const prop = defineProps({
},
language: String,
});
onMounted(() => {
if (typeof prop.code === 'object') {
recode.value = JSON.stringify(prop.code, null, 2);
} else {
recode.value = prop.code;
}
});
</script>
<style lang="scss" scoped></style>
<style scoped></style>

View File

@ -0,0 +1,194 @@
<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>

View File

@ -0,0 +1,90 @@
<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>

View File

@ -0,0 +1,32 @@
<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>

View File

@ -0,0 +1,40 @@
<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>

View File

@ -0,0 +1,7 @@
{
"nav": {
"title": {
"home": "Home"
}
}
}

View File

@ -0,0 +1,7 @@
{
"nav": {
"title": {
"home": "主页"
}
}
}

View File

@ -3,28 +3,16 @@
"iconsUrl": "https://icones.js.org/collection/emojione-v1?category=Flags",
"languages": [
{
"title": "zh-CN 简体中文",
"id": "zh-CN",
"file": "zh-CN.json",
"title": "中国-汉语",
"id": "zh-cn",
"file": "ZH_CN.json",
"icon": "emojione-v1:flag-for-china"
},
{
"title": "zh-TW 简体中文",
"id": "zh-TW",
"file": "zh-TW.json",
"icon": "emojione-v1:flag-for-china"
},
{
"title": "en-US English",
"id": "en-US",
"file": "en-US.json",
"title": "US-English",
"id": "en-us",
"file": "EN_US.json",
"icon": "emojione-v1:flag-for-united-states"
},
{
"title": "ja-JP 日本語",
"id": "ja-JP",
"file": "ja-JP.json",
"icon": "emojione-v1:flag-for-japan"
}
]
}

View File

@ -1,35 +0,0 @@
{
"message": {
"login": {
"plaselogin": "Plase login."
}
},
"nav": {
"title": {
"api": "API",
"file": "file",
"home": "Home",
"setting": "setting",
"user": "user"
}
},
"setting": {
"language": {
"title": "language"
},
"theme": {
"auto": "auto",
"dark": "dark",
"light": "light",
"title": "theme"
},
"title": "setting"
},
"view": {
"login": {
"password": "password",
"title": "login",
"username": "username"
}
}
}

View File

@ -1,35 +0,0 @@
{
"message": {
"login": {
"plaselogin": "ログインしてください"
}
},
"nav": {
"title": {
"api": "API",
"file": "ファイル",
"home": "ホーム",
"setting": "設定",
"user": "ユーザー"
}
},
"setting": {
"language": {
"title": "言語設定"
},
"theme": {
"auto": "自動",
"dark": "ダークモード",
"light": "ライトモード",
"title": "テーマ設定"
},
"title": "設定"
},
"view": {
"login": {
"password": "パスワード",
"title": "ログイン",
"username": "ユーザー名"
}
}
}

View File

@ -1,35 +0,0 @@
{
"message": {
"login": {
"plaselogin": "请登陆"
}
},
"nav": {
"title": {
"api": "API",
"file": "文件",
"home": "主页",
"setting": "设置",
"user": "用户"
}
},
"setting": {
"language": {
"title": "语言配置"
},
"theme": {
"auto": "自动",
"dark": "暗色",
"light": "亮色",
"title": "主题配置"
},
"title": "设置"
},
"view": {
"login": {
"password": "密码",
"title": "登陆",
"username": "用户名"
}
}
}

View File

@ -1,35 +0,0 @@
{
"message": {
"login": {
"plaselogin": "請登入"
}
},
"nav": {
"title": {
"api": "API",
"file": "檔案",
"home": "首頁",
"setting": "設定",
"user": "使用者"
}
},
"setting": {
"language": {
"title": "語言設定"
},
"theme": {
"auto": "自動",
"dark": "深色",
"light": "淺色",
"title": "主題設定"
},
"title": "設定"
},
"view": {
"login": {
"password": "密碼",
"title": "登入",
"username": "使用者名稱"
}
}
}

View File

@ -1,7 +1,7 @@
<template>
<nav class="navmain">
<router-link :to="{ name: 'home' }" c-c f style="color: inherit; height: 100%; text-decoration: none">
<img alt="@/assets/index.svg" height="50" src="@/assets/index.svg" width="50" />
<img height="50" src="@/assets/index.svg" width="50" />
<div>
<label style="font-size: 20px; margin-left: 10px; cursor: pointer">{{ useSettingStore.appName }}</label>
<label style="margin-left: 5px; font-size: 12px; cursor: pointer">V{{ useSettingStore.appVersion }}</label>
@ -26,7 +26,7 @@
}"
@click="openFile()">
<Icon icon="material-symbols:folder-rounded" />
{{ t('nav.title.file') }}
文件
<div class="after"></div>
</div>
<div
@ -36,7 +36,7 @@
}"
@click="router.push({ name: 'user' })">
<Icon icon="material-symbols:person-rounded" />
{{ t('nav.title.user') }}
用户
<div class="after"></div>
</div>
<div
@ -46,7 +46,7 @@
}"
@click="router.push({ name: 'api' })">
<icon icon="mdi:api" />
{{ t('nav.title.api') }}
API
<div class="after"></div>
</div>
<div
@ -55,23 +55,23 @@
}"
@click="activeSetting.on()">
<Icon icon="material-symbols:settings" />
{{ t('nav.title.setting') }}
设置
<div class="after"></div>
</div>
</div>
</nav>
<nav class="nav">
<n-drawer v-model:show="activeSetting.value" placement="right" width="auto">
<n-drawer-content :title="t('setting.title')">
<n-divider>{{ t('setting.theme.title') }}</n-divider>
<n-drawer v-model:show="activeSetting.value" placement="right">
<n-drawer-content title="设置">
<n-divider>主题配置</n-divider>
<div c-c f>
<n-radio-group v-model:value="useSettingStore.themeMode" name="team">
<n-radio-button value="light">{{ t('setting.theme.light') }}</n-radio-button>
<n-radio-button value="dark">{{ t('setting.theme.dark') }}</n-radio-button>
<n-radio-button value="auto">{{ t('setting.theme.auto') }}</n-radio-button>
<n-radio-button value="light">亮色</n-radio-button>
<n-radio-button value="dark">暗色</n-radio-button>
<n-radio-button value="auto">自动</n-radio-button>
</n-radio-group>
</div>
<n-divider>{{ t('setting.language.title') }}</n-divider>
<n-divider>语言配置</n-divider>
<n-select
:options="messageData"
:render-label="renderLabel"
@ -87,11 +87,11 @@
import Icon from '@/components/Icon.vue';
import { UseBoolRef } from '@/util';
import {
i18n,
type languageIndexItemValueType,
message,
messageData,
router,
t,
UseAuthStore,
UseSettingStore,
} from '@/plugin';
@ -156,13 +156,15 @@ function openFile() {
path: `/file/${useAuthStore.username}`,
});
} else {
message.error(() => t('message.login.plaselogin'));
message.error('请先登录');
router.push({
path: `/login`,
});
}
}
const t = i18n.global.t;
window.i18n = i18n;
console.log(t);
</script>
<style lang="scss" scoped>

View File

@ -4,7 +4,7 @@ import { ref } from 'vue';
export * from './type';
const languagedatas = import.meta.glob('@/language/**/*.json');
const languagedatas = import.meta.glob('@/language/*.json');
const loadIndexFile = async (): Promise<languageIndexType> => {
try {
@ -20,9 +20,7 @@ const loadIndexFile = async (): Promise<languageIndexType> => {
const loadLanguageFile = async (fileName: string): Promise<languageType> => {
try {
const module = (await languagedatas[`/language/${fileName}`]()) as {
default: languageType;
};
const module = (await languagedatas[`/language/${fileName}`]()) as { default: languageType };
return module.default;
} catch (error) {
console.error(`加载语言文件失败:${fileName}`, error);
@ -49,10 +47,6 @@ export async function installI18n() {
value: i.id,
icon: i.icon,
});
messages[i.id] = await loadLanguageFile(`lang/${i.file}`);
messages[i.id] = await loadLanguageFile(i.file);
}
}
export function t(d: string): string {
return i18n.global.t(d);
}

View File

@ -12,7 +12,7 @@ export const UseSettingStore = defineStore('setting', {
theme: state,
appName: '',
appVersion: '',
language: 'zh-CN',
language: 'zh-cn',
};
},
persist: {
@ -23,12 +23,10 @@ export const UseSettingStore = defineStore('setting', {
setLanguage(data: string | null) {
if (data == null) {
i18n.global.locale.value = this.language;
document.documentElement.lang = this.language;
return;
}
this.language = data;
i18n.global.locale.value = data;
document.documentElement.lang = data;
},
},
});

View File

@ -1,18 +1,7 @@
<template>
<div id="swaggerContainer"></div>
<OpenApiDoc api-url="/apis/swagger/api.json" style="margin: 20px; height: calc(100% - 30px)" />
</template>
<script lang="ts" setup>
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],
});
});
import OpenApiDoc from '@/components/OpenApiDoc.vue';
</script>
<style scoped></style>

View File

@ -6,22 +6,20 @@
content: true,
footer: 'soft',
}"
:title="t('view.login.title')"
style="width: 430px">
style="width: 430px"
title="登录">
<n-form border label-align="right" label-placement="left" label-width="auto">
<n-form-item :label="t('view.login.username')">
<n-form-item label="用户名">
<n-input />
</n-form-item>
<n-form-item :label="t('view.login.password')">
<n-form-item label="密码">
<n-input />
</n-form-item>
</n-form>
<n-button block secondary strong type="primary">{{ t('view.login.title') }}</n-button>
<n-button block secondary strong type="primary">登录</n-button>
</n-card>
</n-spin>
</div>
</template>
<script lang="ts" setup>
import { t } from '@/plugin';
</script>
<script lang="ts" setup></script>
<style scoped></style>