搭建私有仓库Nexus的流程以及npm包的开发和发布

搭建私有仓库 Nexus 的流程（Ubuntu）以及 npm 包的开发和发布

本文档是关于在 Ubuntu 上面搭建 Nexus，以及制作 npm 包并发布到 Nexus 的流程说明。

关于 Ubuntu

Ubuntu 是一个基于 Linux 的操作系统，通常会用在服务器或者嵌入式设备。当然也有桌面端版本（Ubuntu Desktop），带界面的，用于个人 PC 使用。如果你的电脑操作系统是 Ubuntu（或者其他 Linux 操作系统），你可以直接在电脑上进行该文档的流程。如果是 Windows 或者 Mac，建议使用虚拟机软件（VirtualBox， VM Ware等， 当然使用 Windows 操作系统部署 Nexus 也是可以的，但是一般人不会这样干，毕竟谁的服务器用 Windows）。

安装 Ubuntu 虚拟机

安装 Ubuntu 虚拟机的流程很简单，这里以 VirtualBox 为例，直接去官网下载安装包并安装，然后直接安装。然后再去Ubuntu官网下载 Ubuntu镜像，然后再 VirtualBox 里面建一个虚拟机实例，运行并安装系统即可。这里就不具体阐述步骤了。

关于 Nexus

因为我看公司运维给到我们的制品仓库使用的是 Nexus，因此我这边也是去大概了解了下。这是我查到的一些介绍：

这是由Sonatype公司开发的一款强大的仓库管理器，用于组织内部的依赖关系和工件（如Maven、npm、NuGet、Docker等）存储。
它简化了软件开发中的依赖管理，提供了组件的存储、版本控制、以及安全分发等功能，是持续集成和持续部署（CI/CD）流程中常用的工具。

Nexus 开源版具有以下优点：

  • 占用内存小（28 M 左右）
  • 具有基于 ExtJs 得操作界面，用户体验较好
  • 使用基于 Restlet 的完全 REST API
  • 支持代理仓库、宿主仓库和仓库组
  • 基于文件系统，不需要依赖数据库
  • 支持仓库管理
  • 支持构件搜索
  • 支持在界面上上传构件

下载安装包

直接去官网下载安装包，这里注意选择版本，因为我们使用 Ubuntu 安装，因此选择第三个。
在这里插入图片描述

安装 Java 运行环境

Nexus需要Java环境来运行，需要我们的系统中安装了 Java 运行环境 JDK，可以通过以下命令安装 OpenJDK：

sudo apt install openjdk-8-jdk-headless

按照提示安装完成后使用 version 命令验证安装是否成功

java -version

注意这里的命令是一个 - 而不是两个，安装成功的话会看到：

tribiani@tribiani-VirtualBox:/web$ java -version
openjdk version "1.8.0_402"
OpenJDK Runtime Environment (build 1.8.0_402-8u402-ga-2ubuntu1~20.04-b06)
OpenJDK 64-Bit Server VM (build 25.402-b06, mixed mode)
tribiani@tribiani-VirtualBox:/web$

安装 Nexus

解压安装包

将我们之前下载的 Nexus 安装包解压到我们希望的安装的目录，例如我安装在 /web/servers/

sudo tar -xvzf nexus-3.43.0-01-unix.tar.gz -C /web/servers/

设置 Nexus 用户和权限

sudo useradd -r -d /web/servers/nexus-3.43.0-01/ -s /bin/false nexus
sudo chown -R nexus:nexus /web/servers/nexus-3.43.0-1/

这里需要注意这里的路径是你自己自定义的安装路径。

配置 Nexus 服务

创建Systemd服务文件，方便管理 Nexus

sudo nano /etc/systemd/systemd/system/nexus.service

当然如果你习惯使用 vim 的话也可以使用 vim 来编辑。
注：这里可能会遇到没有权限创建文件或者编辑文件的问题，大家自行百度解决办法。实在不行先用 touch 命令创建这个文件，再使用 vim 命令编辑。

创建这个文件后写入以下配置：

[Unit]
Description=Nexus Repository Manager
After=network.target[Service]
User=nexus
Group=nexus
ExecStart=/web/servers/nexus-3.68.0-04/bin/nexus start
ExecStop=/web/servers/nexus-3.68.0-04/bin/nexus stop
Restart=always
RestartSec=10[Install]

注意：这里的路径是你自己自定义的安装路径。
编辑后保存并退出编辑，然后分别执行以下命令来配置和启动 Nexus：

sudo systemctl daemon-reload
sudo systemctl enable nexus
sudo systemctl start nexus

遇到的坑

上面操作完成后就可以访问 http://localhost:8081 来看一下是否启动完成了。 这里如果不出意外，Nexus 是无法正常启动的，实际上是报错了，但是 start 命令不会输出报错日志，这里我们就可以进入安装目录并使用 status 命令查看 Nexus的状态：

cd /web/servers/nexus-3.68.0-04/bin/
./nexus status

如果正常运行着会看到：

nexus is running

否则就代表没有启动成功，前面说了使用 start 命令没有日志输出，因此我们可以使用 run 命令来启动（run 命令只是在当前终端启动，终端关闭服务也会关闭）：
这里可能会输出日志告诉我们 java 在读取某些文件报没权限了，因此我们需要给这些文件配置访问权限，我的做法比较暴力，直接给出问题的根目录递归给到所有的权限：

sudo chmod -R 777 xxxxx

完成后再执行 run 命令，应该是可以正常启动了（测试用 run，真正运行用 start）。访问http://localhost:8081应该就可以看到对应的界面了。

登录以及配置权限

启动完成后就可以通过 web 界面访问，点击登录输入用户名和密码登录，Nexus 会默认创建用户名为 admin的用户，随便输入一个密码，界面会提示你默认的密码在哪里，然后按照提示在对应的文件里面去找到即可，建议登录后更改密码。

配置权限

admin用户是默认的超级管理员用户，我们可以在设置界面创建用户：
在这里插入图片描述

创建用户后可以给用户分配权限角色等。
踩坑记录：
本以为我创建了用户给了对应的角色和权限就可以发布包了，但是一直被一个报错困扰：
在这里插入图片描述

整了半天才知道需要配置这块儿（最开始问运维运维也没弄好，因此我才开始本地搭建 Nexus 的）：
在这里插入图片描述
弄好了后发包终于成功了。访问 web 界面也能正常看到该包了：

在这里插入图片描述

使用命令行登录也是正常的了：
在这里插入图片描述

注：这里可能会出现用户名和密码都正确但是登录还是失败的情况，使用以下命令

npm config ls

找到 User config from xxxxx/.npmrc 这个路径对应的文件，删除文件内容再登录即可（具体原因未知）。

创建 npm 仓库

Nexus默认没有创建 npm 仓库，因此我们第一步需要先创建 npm 仓库：
在这里插入图片描述

至此，Nexus 的安装就完成了。接下来介绍怎么封装自己的工具库或者组件库并且发布到npm仓库。

自己封装 vue3+ts 组件库并且发布到 NPM

创建项目

pnpm create vite

如果我们将文档和组件库放到一个项目中，我们还可以引入 vitepress:

pnpm add -D vitepress
pnpm vitepress init

按照提示完成即可。这里关于 vitepress 有关的就不多讲了。因为我们目前是有用它搭建的文档的，因此这里不需要（但是从技术的角度讲，这些都是可以整合到这一个项目的）。

配置 package.json

按照提示创建好项目，然后再 package.json 中进行如下配置：

{"name": "@gl/main","private": false,"version": "0.0.01","type": "module","repository": {},"types": "dist/lib/main.d.ts","module": "dist/main.es.js","files": ["dist"],"scripts": {"dev": "vite","build": "vue-tsc && vite build","pub": "vue-tsc && vite build && npm publish","preview": "vite preview","docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:preview": "vitepress preview docs"},"dependencies": {"ant-design-vue": "^4.2.1","vue": "^3.4.21"},"devDependencies": {"@types/node": "^20.12.10","@vitejs/plugin-vue": "^5.0.4","sass": "^1.77.1","typescript": "^5.2.2","vite": "^5.2.0","vite-plugin-dts": "^3.9.1","vitepress": "^1.1.4","vue-tsc": "^2.0.6"}
}

配置解读：

属性配置值
name包名称string
private是否私有boolean
types声明文件路径path
module模块path
files包含的文件路径dirs

如果我们是自己发布一些开源的包到开源的仓库，我们通常还会配置 author，keywords，homepage 等字段

配置 vite.config.ts

配置路径别名

为了方便开发的时候引入模块，优化开发体验，我们可以配置路径别名
// vite.config.ts

  resolve: {alias: {"@lib":resolve(__dirname, "./lib"),"@":resolve(__dirname, "./src"),"@libComponents":resolve(__dirname, "./lib/components"),"@components":resolve(__dirname, "./src/components"),}},

配置别名后 tsconfig.json 也需要做对应的配置：
// tsconfig.json

"compilerOptions": {................."paths": {"@lib/*": ["lib/*"],"@/*":["./src/*"],"@libComponents/*":["./lib/components/*"],"@components/*":["./src/components/*"]}},
配置库模式

这里需要配置库模式

 build: {lib: {// vite默认会打es和umd两种包，但是我们web开发只需要es模块的内容formats:['es'],// Could also be a dictionary or array of multiple entry pointsentry: resolve(__dirname, 'lib/main.ts'),name: 'MyLib',// the proper extensions will be added// fileName: 'my-lib',fileName(format, entryName) {return `${entryName}.${format}.js`},},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue", 'ant-design-vue'],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: 'Vue',},},},

注：建议将 external 里面包含的依赖，在安装的时候就安装到 packages.json 里面的 peerDependencies。

使用 vite-plugin-dts 生成对应的声明文件
import dts from "vite-plugin-dts";
export default defineConfig({///plugins: [vue(), dts()],///
});
编写组件

我们简单的封装一个自己的组件和对应的一些方法，我的做法是直接在项目的根目录下面创建 lib 目录，然后创建以下文件和目录：

|-lib
|----components
|----|----HButton.vue
|----|----HClone.vue
|----|----index.ts
|----|----main.css
|----tools
|----|----deepClone.ts
|----|----index.ts
|----|----shallowClone.ts
|----main.ts

我们可以在 HButton 组件里面简单的写一下组件：

<script lang="ts" setup>import { CSSProperties, computed } from "vue";const props = defineProps<{ backgroundColor?: string; color?: string }>();const styleObj = computed<CSSProperties>(() => {return {backgroundColor: props.backgroundColor || "#3f51b5",color: props.color,};});
</script><template><button class="h-button" :style="styleObj"><slot>this is default button</slot></button>
</template><style lang="css" scoped></style>

以及编写 css 文件

.h-button {border-radius: 8px;border: 1px solid transparent;padding: 0.6em 1.2em;font-size: 1em;font-weight: 500;font-family: inherit;background-color: #1a1a1a;cursor: pointer;transition: border-color 0.25s;
}

然后在 index.ts 里面暴露出去

import "./main.css";
export { default as HButton } from "./HButton.vue";
export { default as HClone } from "./HCloneTest.vue";
打包和发布

使用命令直接打包，然后打包的文件会存放在 dist 目录，由于我们已经在 package.json 里面配置了 files 属性只想了 dist 目录，因此我么只需要使用 npm login 登陆到 npm 然后使用 npm publish 命令直接发布包到 npm 即可。
建议我们以这种 @gl/xxx 格式命名我们的仓库，方便后面如果我们有其他的 npm 包发布到仓库的话，我们在配置.npmrc不用重复配置：

@gl:registry=http://192.168.8.149:8081/repository/npm-release/

问题记录

组件国际化

我们的项目是需要国际化双语支持的，假如我们封装的组件有内置的文字，那么也是需要国际化的，但是我们在项目中每个调用组件的地方都去设置国际化的配置显然不合理，因此借用 ant-design-vue的设计，我们可以在我们的组件库暴露一个 ConfigProvider 组件，组件的内容如下：

<template><slot />
</template><script setup lang="ts">import { ConfigProviderProps, Languages } from "@lib/models";import { BASE_PROVIDER_INJECTION_KEY } from "@lib/models/constants";import { provide } from "vue";const props = withDefaults(defineProps<ConfigProviderProps>(), {locale: Languages.EN,});// export const BASE_PROVIDER_INJECTION_KEY = Symbol() as InjectionKey<ConfigProviderProps>;provide(BASE_PROVIDER_INJECTION_KEY, props);
</script><style lang="scss" scoped></style>

这是 ConfigProviderProps的定义：

export interface ConfigProviderProps {locale: Languages;
}

然后我们封装的组件就可以通过 inject 获取到对应的语言配置，这里我们还可以进一步封装 hook：

/
export const BASE_PROVIDER_INJECTION_KEY =Symbol() as InjectionKey<ConfigProviderProps>;/
import { BASE_PROVIDER_INJECTION_KEY } from "@lib/models/constants";
import { inject } from "vue";
import zh from "@lib/locale/zh";
import en from "@lib/locale/en";
import { ConfigProviderProps, Languages } from "@lib/models";const localeMap = new Map([[Languages.EN, en],[Languages.ZH, zh],
]);export default function useGlobalConfigInject() {const config = inject<ConfigProviderProps>(BASE_PROVIDER_INJECTION_KEY);const t = (key: keyof typeof zh) => {return localeMap.get(config.locale)[key];};return { config, t };
}

这个 hook 会帮我们返回所有的全局配置以及一个翻译函数 t，我们在封装组件的时候就可以使用这个 t 方法去做国际化：

<!--* @Description: 公共的抽屉组件* @Author: shufei.han* @LastEditors: shufei.han* @Date: 2024-04-11 09:38:44* @LastEditTime: 2024-05-11 10:08:52
-->
<template><Drawer> ................................... </Drawer>
</template><script setup lang="ts">import useGlobalConfigInject from '@lib/hooks/useGlobalConfig';// const { t } = i18n.globalconst {t} = useGlobalConfigInject()...................................// 底部按钮有关的配置const footerBtnConfig = computed(() => {return {ok: { show: props.showOkButton, text: props.okText || t('confirm') },cancel: { show: props.showCancelButton, text: props.cancelText || t('cancel') 		},}})...................................
</script>

ConfigProvider 组件作为我们组件库的根组件，使用我们组件库的时候，如果需要配置国际化就需要再根组件（App.vue）里面使用该组件（类似于 ant-design-vue）。传入 locale 这个属性即可：

<script setup lang="ts">import { RouterView } from "vue-router";import { Languages } from "@gl/main";import { ref } from "vue";const locale = ref(Languages.EN);const changeLocale = () => {if (locale.value === Languages.EN) {locale.value = Languages.ZH;return;}locale.value = Languages.EN;};
</script><template><ConfigProvider :locale="locale"><RouterView /></ConfigProvider>
</template>
怎么从一个 TS 文件到处其他的 TS 文件
export * from "./tools";
export * from "./components";
export * from "./deepClone";
export { default as shallowClone } from "./shallowClone";
怎么从一个 TS 文件导出多个 vue 组件
export { default as HButton } from "./HButton.vue";
export { default as HClone } from "./HCloneTest.vue";
将公共样式写在 vue 组件里面导致其他项目引入该组件的时候样式不生效

因为我们如果直接在 vue 组件的 style 标签里面写的样式，这些 css 代码是会被 vue 打包的，最终会变成类名假属性的选择器，因此不生效，解决方案就是用单独的 css 文件去写，然后其他项目在用的时候直接引入这个 css 文件即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/835724.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

哈希表第4/9题--检验快乐数

哈希表第4/9题--检验快乐数

题目&#xff1a;leetcode202 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果…
阅读更多...
Django简介

Django简介

Django 1.安装Django pip install djangopython的包的分布 \python- python.exe- Scripts- pip.exe- django-admin.exe [工具&#xff0c;创建django项目]- Lib- 内置模块- site-packages [安装的包]- pymysql- flask- django [框架的源码]2.创建项目 Django项目会有…
阅读更多...
java spring 10 Bean的销毁过程 上 在docreatebean中登记要销毁的bean

java spring 10 Bean的销毁过程 上 在docreatebean中登记要销毁的bean

1.Bean销毁是发送在Spring容器关闭过程中的 AnnotationConfigApplicationContext context new AnnotationConfigApplicationContext(AppConfig.class);UserService userService (UserService) context.getBean("userService");userService.test();// 容器关闭cont…
阅读更多...
Linux函数

Linux函数

目录 一、脚本函数 1.1 创建函数 1.2 使用函数 二、函数返回值 2.1 默认的退出状态码 2.2 使用return命令 2.3 使用函数输出 三、在函数中使用变量 3.1 向函数传达参数 3.2 在函数中处理变量 四、数组变量和函数 4.1 向函数中传递数组 4.2 从函数中返回数组 五、函数…
阅读更多...
【1】STM32·FreeRTOS·新建工程模板【一步到位】

【1】STM32·FreeRTOS·新建工程模板【一步到位】

目录 一、获取FreeRTOS源码 二、FreeRTOS源码简介 2.1、FreeRTOS源码文件内容 2.2、FreeRTOS内核 2.3、Source文件夹 2.4、portable文件夹 三、FreeRTOS手把手移植 3.1、FreeRTOS移植准备 3.2、FreeRTOS移植步骤 3.2.1、将 FreeRTOS 源码添加至基础工程、头文件路径等…
阅读更多...
基于Matplotlib的模型性能可视化工作

基于Matplotlib的模型性能可视化工作

一、项目简介 本项目是科技考古墓葬识别工作的中间过程&#xff0c;因为需要大量复用所以另起一章好了。 主要涉及到数据读取、数据可视化和少量的数据处理过程。 二、相关知识 PandasMatplotlib 三、实验过程 1. 数据探索性分析 1.1 准备工作–导入模块 import pandas…
阅读更多...
用python写个控制MicroSIP自动拨号和定时呼叫功能（可用在小型酒店叫醒服务）MicroSIP定时拨号

用python写个控制MicroSIP自动拨号和定时呼叫功能（可用在小型酒店叫醒服务）MicroSIP定时拨号

首先直接上结果吧&#xff0c;MicroSIP 助手&#xff0c;控制MicroSIP自动拨号&#xff0c;定时呼叫的非常实用小工具&#xff01; 在使用MicroSIP 助手之前&#xff0c;我们需要了解MicroSIP是什么&#xff0c;MicroSIP是一个SIP拨号软件&#xff0c;支持注册任意SIP平台实现拨…
阅读更多...
【xxl-job | 第三篇】SpringBoot整合xxl-job

【xxl-job | 第三篇】SpringBoot整合xxl-job

文章目录 3.SpringBoot整合xxl-job3.1定时任务服务配置3.1.1导入maven依赖3.1.2yml配置3.1.3XxlJobConfig配置类3.1.4定时任务类 3.2xxl-job配置3.2.1新增执行器3.2.2新增任务3.2.3执行任务3.2.4查看日志3.2.5查看任务后台日志 3.3小结 3.SpringBoot整合xxl-job 3.1定时任务服…
阅读更多...
AppBuilder低代码体验：构建雅思大作文组件

AppBuilder低代码体验：构建雅思大作文组件

AppBuilder低代码体验&#xff1a;构建雅思大作文组件 ​ 在4月14日&#xff0c;AppBuilder赢来了一次大更新&#xff0c;具体更新内容见&#xff1a;AppBuilder 2024.04.14发版上线公告 。本次更新最大的亮点就是**新增了工作流&#xff0c;低代码制作组件。**具体包括&#x…
阅读更多...
区块链链底层架构，IPFS，DAPP

区块链链底层架构，IPFS，DAPP

目录 区块链链底层架构 IPFS，DAPP等去中心化应用实现机制和运行原理 DApp到底在哪运行，举例说明
阅读更多...
Python梯度下降算法

Python梯度下降算法

梯度下降&#xff08;Gradient Descent&#xff09;是机器学习中用于最小化损失函数的优化算法。在Python中&#xff0c;可以通过手动实现或使用现有的库&#xff08;如scikit-learn&#xff09;来应用梯度下降算法。以下是手动实现简单线性回归问题的梯度下降算法的示例&#…
阅读更多...
聚合工程搭建、工程依赖导入

聚合工程搭建、工程依赖导入

上一章讲了自动化云测平台的一些环境的准备 如果还未完成云服务器的环境搭建和本地环境的搭建&#xff0c;请点击左侧 -> 传送门 那么正式开始这一章的内容 聚合工程搭建 创建项目 我们先给项目命个名&#xff1a;xxx-meter&#xff0c;构建系统&#xff0c;我们选择M…
阅读更多...
前端开发指导

前端开发指导

前端开发指导 本文介绍了配置前端开发环境需要的软件、配置项等，指导如何开始进行UDM部门前端开发的全流程。本文以Windows系统下在Microsoft Virtual Studio Code中开发为基础。 一、综述 目标：零基础或者新员工依照此文档，能够完成开发环境的搭建及熟悉测试环境的搭建。…
阅读更多...
VBScript字符串赋值注意事项

VBScript字符串赋值注意事项

VBScript中字符串是用双引号来包裹。 单引号在VBScript里是注释符&#xff0c;不过如果要放在字符串里的话&#xff0c;直接写在双引号的字符串里就可以&#xff0c;跟其他字符比起来&#xff0c;并不特殊。 双引号如果要放在字符串里&#xff0c;则需要处理一下&#xff0c;可…
阅读更多...
代码审计平台sonarqube的安装及使用

代码审计平台sonarqube的安装及使用

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…
阅读更多...
【Python 常用脚本及命令系列 1.2 -- python 判断串口是否已经打开】

【Python 常用脚本及命令系列 1.2 -- python 判断串口是否已经打开】

请阅读【嵌入式开发学习必备专栏】 文章目录 判断串口是否打开 判断串口是否打开 要在Python中打印串口的波特率并检查特定的串口&#xff08;例如COM19&#xff09;是否已经打开&#xff0c;你可以使用pyserial库。这个库提供了跨平台的串口通信功能。首先&#xff0c;确保安…
阅读更多...
python之异常机制处理

python之异常机制处理

1.异常机制 1_1 try和except&#xff1a; 异常&#xff1a;程序无法继续执行了&#xff0c;例如&#xff1a;字符串和数字相加&#xff0c;除以0&#xff0c;对None进行操作 中断当前程序执行&#xff0c;然后打印出红字 Exception error 捕捉异常的方式&#xff1a;关键…
阅读更多...
【数据分析】 JupyterNotebook安装及使用简介

【数据分析】 JupyterNotebook安装及使用简介

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 在数据分析中&#xff0c;一般用Pycharm编辑代…
阅读更多...
codeforces round 149 div2(a,b,c,d)

codeforces round 149 div2(a,b,c,d)

手速场&#xff0c;可惜我傻逼卡 c c c了 题目链接 A #include<bits/stdc.h>using namespace std;#define int long long #define PII pair<int,int>void solve() {int n,k;cin>>n>>k;if(n<k){cout<<1<<\n;cout<<n<<\n;}…
阅读更多...
VSCode：设置顶部文件标签页滚动条的宽度

VSCode：设置顶部文件标签页滚动条的宽度

使用VSCode打开多个文件后&#xff0c;顶部的文件标签可以通过滚动条进行滚动&#xff0c;但是缺点是该滚动条太窄了&#xff0c;不好选择。 可以通过如下方法修改改滚动条的宽度&#xff1a; 1.点击设置 2.选择工作台->编辑管理->Title Scrollbar Sizing->Large 3.可…
阅读更多...
最新文章

Copyright @ 2022~2023