Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
xuliangzhan committed Sep 2, 2024
1 parent 6b331e6 commit 627f58a
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 62 deletions.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta name="description" content="xe-utils 函数库、工具类,vxe-table 表格解决方案.">
<title>xe-utils 函数库、工具类</title>
<title>XE Utils 函数库、工具类</title>
<script>var _hmt=_hmt||[];(function(){if(location.host.indexOf("localhost")===-1){var b=document.createElement("script");b.src="https://hm.baidu.com/hm.js?1eb3cea61a6e722c5e3dd0114830306c";b.onload=function(){_hmt.push(["_requirePlugin","UrlChangeTracker",{shouldTrackUrlChange:function(c,d){return c&&d}}])};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)}})();</script>
<script data-mode="hash" type="text/javascript" charset="UTF-8" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
<style>.pagead-right {position: fixed;right: 20px;top: 50px;width: 280px;z-index: 99;}</style>
Expand Down
83 changes: 59 additions & 24 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<style lang="scss">
#app {
height: 100%;
overflow: auto;
}
html, body {
height: 100%;
min-width: 1200px;
margin: 0;
padding: 0;
color: #000;
Expand Down Expand Up @@ -42,34 +42,65 @@ html, body {
height: 100%;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
.page-header {
display: flex;
flex-direction: row;
align-items: center;
min-height: 50px;
border-bottom: 1px solid #ecf0f7;
.header-left,
.header-right {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 0;
}
.header-middle {
flex-grow: 1;
}
}
.header-left {
padding: 0 16px;
.logo {
text-decoration: none;
color: var(--vxe-ui-docs-font-color);
padding: 0 0.4em;
font-weight: 700;
font-size: 18px;
padding: 0 8px;
cursor: pointer;
img {
height: 20px;
margin-right: 16px;
}
img,
span {
display: inline-block;
vertical-align: middle;
}
}
}
.page-body {
flex-grow: 1;
overflow: auto;
display: flex;
flex-direction: row;
}
.aside {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 240px;
height: 100%;
flex-shrink: 0;
overflow: auto;
float: left;
border-right: 1px solid #dcdfe6;
padding: 100px 0 30px 0;
padding: 0 0 30px 0;
.header {
position: fixed;
top: 0;
left: 0;
flex-shrink: 0;
text-align: center;
width: 220px;
background-color: #fff;
.title {
font-size: 28px;
margin: 10px 0 0 0;
text-align: center;
a {
color: #409eff;
text-decoration: none;
cursor: pointer;
}
}
.search-wrapper {
padding: 10px 0;
.search-input {
Expand Down Expand Up @@ -107,11 +138,15 @@ html, body {
}
}
.body {
width: 100%;
height: 100%;
flex-grow: 1;
overflow: auto;
float: left;
padding: 0 10px 0 280px;
padding-right: 300px;
.body-inner {
max-width: 1000px;
min-width: 600px;
margin: 0 auto;
padding: 0 16px 0 24px;
}
.api-item {
.title {
font-weight: 700;
Expand Down
12 changes: 12 additions & 0 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,18 @@ Vue.use(Router)
export default new Router({
mode: 'hash',
routes: [
{
path: '*',
redirect: {
name: 'API'
}
},
{
path: '/',
redirect: {
name: 'API'
}
},
{
path: '/',
name: 'API',
Expand Down
119 changes: 82 additions & 37 deletions src/views/API.vue
Original file line number Diff line number Diff line change
@@ -1,47 +1,61 @@
<template>
<div class="page-container">
<div class="aside">
<div class="header">
<h1 class="title">
<a href="https://github.com/xuliangzhan/xe-utils">xe-utils</a>
</h1>
<div class="search-wrapper">
<input class="search-input" v-model="filterName" type="search" placeholder="API 搜索">
</div>
<div class="page-header">
<div class="header-left">
<a class="logo" href="/">
<img src="/logo.png">
<span class="title">XE Utils</span>
</a>
<a :href='`https://gitee.com/x-extends/xe-utils/stargazers`'>
<img :src='`https://gitee.com/x-extends/xe-utils/badge/star.svg?theme=gvp`' alt='star'>
</a>
<a :href="`http://npm-stat.com/charts.html?package=xe-utils`">
<img :src="`https://img.shields.io/npm/dm/xe-utils.svg`">
</a>
<a :href="`https://github.com/x-extends/xe-utils/stargazers`">
<img :src="`https://img.shields.io/github/stars/x-extends/xe-utils.svg`">
</a>
</div>
<div class="header-middle"></div>
<div class="header-right">
</div>
<ul>
<li class="menu-item" v-for="group in apiList" :key="group.id">
<a class="menu-link" @click="group.expand = !group.expand">{{ group.label }}</a>
<ul class="child-menu" v-show="group.expand">
<li class="menu-item" v-for="item in group.children" :key="item.id" :class="{active: selected === item}">
<a class="menu-link" @click="menuLinkEvent(item)" v-html="item.name"></a>
</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div v-for="group in apiList" :key="group.id">
<div class="api-item" v-for="item in group.children" :key="item.id">
<p class="title" :id="item.name" v-html="`${item.name } (${ item.args }) ${ item.title}`"></p>
<p class="desc" v-html="item.desc"></p>
<table class="param-table" border="0" v-if="item.params && item.params.length">
<tr v-for="(rows, pIndex) in item.params" :key="pIndex">
<td v-for="(val, vIndex) in rows" :key="vIndex">{{ val }}</td>
</tr>
</table>
<pre>
<code class="javascript" v-for="(code,cIndex) in item.codes" :key="cIndex">{{ code }}</code>
</pre>
<div class="page-body">
<div class="aside">
<div class="header">
<div class="search-wrapper">
<input class="search-input" v-model="filterName" type="search" placeholder="API 搜索">
</div>
</div>
<ul>
<li class="menu-item" v-for="group in apiList" :key="group.id">
<a class="menu-link" @click="group.expand = !group.expand">{{ group.label }}</a>
<ul class="child-menu" v-show="group.expand">
<li class="menu-item" v-for="item in group.children" :key="item.id" :class="{active: selected === item}">
<a class="menu-link" @click="menuLinkEvent(item)" v-html="item.name"></a>
</li>
</ul>
</li>
</ul>
</div>
<!-- <div>
<div id="donation" class="donation-item">
<p>如果您觉得我们的开源软件对你有所帮助,请扫下方二维码打赏我们一杯咖啡☕</p>
<p>由于维护一个开源项目需要花费非常大的精力与时间,如果您正在使用该项目,您的捐赠会帮助该项目能持续发展下去</p>
<img src="static/donation/pay.jpg">
<div class="body">
<div class="body-inner">
<div v-for="group in apiList" :key="group.id">
<div class="api-item" v-for="item in group.children" :key="item.id">
<p class="title" :id="item.name" v-html="`${item.name } (${ item.args }) ${ item.title}`"></p>
<p class="desc" v-html="item.desc"></p>
<table class="param-table" border="0" v-if="item.params && item.params.length">
<tr v-for="(rows, pIndex) in item.params" :key="pIndex">
<td v-for="(val, vIndex) in rows" :key="vIndex">{{ val }}</td>
</tr>
</table>
<pre>
<code class="javascript" v-for="(code,cIndex) in item.codes" :key="cIndex">{{ code }}</code>
</pre>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
Expand All @@ -55,6 +69,37 @@ export default {
selected: null,
filterName: '',
list: [
{
label: '开发指南',
value: 'insert',
expand: true,
children: [
{
name: 'NPM 安装',
args: '',
title: '使用 npm 的方式安装',
desc: '',
params: [],
codes: [
`
npm install xe-utils
`
]
},
{
name: 'CDN 安装',
args: '',
title: '可以通过第三方开放的 CDN 来引用',
desc: '',
params: [],
codes: [
`
${decodeURIComponent('%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fxe-utils%22%3E%3C%2Fscript%3E')}
`
]
}
]
},
{
label: 'Base',
value: 'base',
Expand Down

0 comments on commit 627f58a

Please sign in to comment.