mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-21 17:29:17 +08:00
149 lines
6.5 KiB
Vue
149 lines
6.5 KiB
Vue
|
<template>
|
|||
|
<LayoutContent>
|
|||
|
<div class="brief">
|
|||
|
<el-row :gutter="20">
|
|||
|
<el-col :span="4">
|
|||
|
<div class="icon">
|
|||
|
<el-image class="image" :src="getImageUrl(appDetail.icon)"></el-image>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
<el-col :span="20">
|
|||
|
<div class="a-detail">
|
|||
|
<div class="a-name">
|
|||
|
<font size="5" style="font-weight: 800">{{ appDetail.name }}</font>
|
|||
|
</div>
|
|||
|
<div class="a-description">
|
|||
|
<span>
|
|||
|
<font>
|
|||
|
{{ appDetail.description }}
|
|||
|
</font>
|
|||
|
</span>
|
|||
|
</div>
|
|||
|
<el-descriptions :column="1">
|
|||
|
<el-descriptions-item :label="$t('app.version')">
|
|||
|
<el-select v-model="appSelect.version">
|
|||
|
<el-option
|
|||
|
v-for="(v, index) in appDetail.versions"
|
|||
|
:key="index"
|
|||
|
:value="v"
|
|||
|
:label="v"
|
|||
|
>
|
|||
|
{{ v }}
|
|||
|
</el-option>
|
|||
|
</el-select>
|
|||
|
</el-descriptions-item>
|
|||
|
<el-descriptions-item :label="'链接'">
|
|||
|
<el-link>source</el-link>
|
|||
|
</el-descriptions-item>
|
|||
|
<el-descriptions-item :label="'来源'">FIT2CLOUD</el-descriptions-item>
|
|||
|
</el-descriptions>
|
|||
|
<div>
|
|||
|
<el-button type="primary">安装</el-button>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
</el-row>
|
|||
|
</div>
|
|||
|
<el-divider border-style="double" />
|
|||
|
<div class="detail">
|
|||
|
<v-md-preview :text="readme"></v-md-preview>
|
|||
|
</div>
|
|||
|
</LayoutContent>
|
|||
|
</template>
|
|||
|
|
|||
|
<script lang="ts" setup>
|
|||
|
import LayoutContent from '@/layout/layout-content.vue';
|
|||
|
import { getAssetsFile } from '@/utils/image';
|
|||
|
import { reactive, ref } from 'vue';
|
|||
|
import detail from './detail.json';
|
|||
|
|
|||
|
let appDetail = ref<any>();
|
|||
|
appDetail.value = detail;
|
|||
|
|
|||
|
let appSelect = reactive({
|
|||
|
version: '',
|
|||
|
});
|
|||
|
appSelect.version = appDetail.value.versions[0];
|
|||
|
|
|||
|
let readme = ref<string>(`<p align="center">
|
|||
|
<a href="https://halo.run" target="_blank" rel="noopener noreferrer">
|
|||
|
<img width="100" src="https://halo.run/logo" alt="Halo logo" />
|
|||
|
</a>
|
|||
|
</p>
|
|||
|
<p align="center"><b>Halo</b> [ˈheɪloʊ],一款现代化的开源博客/CMS系统,值得一试。</p>
|
|||
|
|
|||
|
<p align="center">
|
|||
|
<a href="https://github.com/halo-dev/halo/releases"><img alt="GitHub release" src="https://img.shields.io/github/release/halo-dev/halo.svg?style=flat-square" /></a>
|
|||
|
<a href="https://github.com/halo-dev/halo/releases"><img alt="GitHub All Releases" src="https://img.shields.io/github/downloads/halo-dev/halo/total.svg?style=flat-square" /></a>
|
|||
|
<a href="https://hub.docker.com/r/halohub/halo"><img alt="Docker pulls" src="https://img.shields.io/docker/pulls/halohub/halo?style=flat-square" /></a>
|
|||
|
<a href="https://github.com/halo-dev/halo/commits"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/halo-dev/halo.svg?style=flat-square" /></a>
|
|||
|
<a href="https://github.com/halo-dev/halo/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/halo-dev/halo/Halo%20CI?style=flat-square" /></a>
|
|||
|
<br />
|
|||
|
<a href="https://halo.run">官网</a>
|
|||
|
<a href="https://docs.halo.run">文档</a>
|
|||
|
<a href="https://bbs.halo.run">社区</a>
|
|||
|
<a href="https://gitee.com/halo-dev">Gitee</a>
|
|||
|
<a href="https://t.me/halo_dev">Telegram 频道</a>
|
|||
|
</p>
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
## 快速开始
|
|||
|
|
|||
|
详细部署文档请查阅:<https://docs.halo.run>
|
|||
|
|
|||
|
## 在线体验
|
|||
|
|
|||
|
- 环境地址:<https://demo.halo.run>
|
|||
|
- 后台地址:<https://demo.halo.run/admin>
|
|||
|
- 用户名:demo
|
|||
|
- 密码:P@ssw0rd123..
|
|||
|
- 使用前请阅读:<https://demo.halo.run/archives/tips>
|
|||
|
|
|||
|
## 生态
|
|||
|
|
|||
|
| 项目 | 状态 | 描述 |
|
|||
|
| --- | --- | --- |
|
|||
|
| [halo-admin](https://github.com/halo-dev/halo-admin) | <a href="https://github.com/halo-dev/halo-admin/releases"><img alt="GitHub release" src="https://img.shields.io/github/release/halo-dev/halo-admin.svg?style=flat-square" /></a> | Web 管理端 UI,已内置在主应用 |
|
|||
|
| [js-sdk](https://github.com/halo-dev/js-sdk) | <a href="https://github.com/halo-dev/js-sdk"><img alt="npm release" src="https://img.shields.io/npm/v/@halo-dev/content-api?style=flat-square"/></a> | JavaScript SDK |
|
|||
|
| [halo-comment](https://github.com/halo-dev/halo-comment) | <a href="https://www.npmjs.com/package/halo-comment"><img alt="npm release" src="https://img.shields.io/npm/v/halo-comment?style=flat-square"/></a> | 独立评论组件,可以非常方便的集成到主题中 |
|
|||
|
| [halo-comment-normal](https://github.com/halo-dev/halo-comment-normal) | <a href="https://www.npmjs.com/package/halo-comment-normal"><img alt="npm release" src="https://img.shields.io/npm/v/halo-comment-normal?style=flat-square"/></a> | 另外一款评论组件 |
|
|||
|
| [halo-mobile-app](https://github.com/halo-dev/halo-mobile-app) | 已停止维护 | 移动端管理 APP |
|
|||
|
| [tencent-cloudbase-halo](https://github.com/halo-dev/tencent-cloudbase-halo) | 无 | 腾讯云 CloudBase 一键部署配置 |
|
|||
|
| [halo-theme-\*](https://github.com/topics/halo-theme) | 无 | GitHub 上开源的 Halo 主题集合 |
|
|||
|
|
|||
|
## 许可证
|
|||
|
|
|||
|
[![license](https://img.shields.io/github/license/halo-dev/halo.svg?style=flat-square)](https://github.com/halo-dev/halo/blob/master/LICENSE)
|
|||
|
|
|||
|
Halo 使用 GPL-v3.0 协议开源,请遵守开源协议。
|
|||
|
|
|||
|
## 贡献
|
|||
|
|
|||
|
参考 [CONTRIBUTING](https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md)。
|
|||
|
|
|||
|
<a href="https://github.com/halo-dev/halo/graphs/contributors"><img src="https://opencollective.com/halo/contributors.svg?width=890&button=false" /></a>
|
|||
|
|
|||
|
## 状态
|
|||
|
|
|||
|
![Repobeats analytics](https://repobeats.axiom.co/api/embed/ad008b2151c22e7cf734d2688befaa795d593b95.svg 'Repobeats analytics image')
|
|||
|
|
|||
|
`);
|
|||
|
|
|||
|
const getImageUrl = (name: string) => {
|
|||
|
return getAssetsFile(name);
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
.brief {
|
|||
|
height: 30vh;
|
|||
|
.icon {
|
|||
|
.image {
|
|||
|
width: auto;
|
|||
|
height: 20vh;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|