update 一系列功能

This commit is contained in:
2021-04-27 14:13:28 +08:00
parent 62e32bb8fd
commit 2945ecb3b8
16 changed files with 230 additions and 35 deletions

View File

@@ -13,6 +13,7 @@
"core-js": "^3.6.5",
"crypto-js": "^4.0.0",
"echarts": "^5.0.2",
"highlight.js": "^10.7.2",
"less": "^3.12.2",
"less-loader": "4.1.0",
"lodash": "^4.17.21",
@@ -20,6 +21,7 @@
"swiper": "^6.5.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-highlight.js": "^3.1.0",
"vue-router": "^3.5.1"
},
"devDependencies": {

View File

@@ -0,0 +1,2 @@
const a = 2;
const b = 3;

View File

@@ -0,0 +1,53 @@
<template>
<container>
<template v-for="(doc, index) in docs">
<component :codes="codes" :is="doc.component" :key="index" />
</template>
<a-anchor>
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
<a-anchor-link
href="#components-anchor-demo-basic"
target="_blank"
title="Basic demo with Target"
/>
<a-anchor-link href="#API" title="API">
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
<a-anchor-link href="#Link-Props" title="Link Props" />
</a-anchor-link>
</a-anchor>
</container>
</template>
<script>
export default {
data() {
return {
docs: [
{
title: '开始使用',
name: 'use',
},
],
codes: {},
};
},
mounted() {
this.docs.forEach((doc) => {
this.$set(doc, 'component', () => import(`./${doc.name}`));
});
const files = require.context('@/../public/doc-part', true, /\.(js|html)(\?.*)?$/);
const codes = {};
files.keys().forEach((p) => {
const fileName = p.slice(1);
const xhr = new XMLHttpRequest();
xhr.open('GET', `./doc-part${fileName}`, false);
xhr.overrideMimeType('text/plain;charset=utf-8');
xhr.send(null);
codes[fileName] = xhr.responseText;
});
this.codes = codes;
},
};
</script>

View File

@@ -1,17 +0,0 @@
body {
font-weight: 100;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
.ant-card-meta-title {
font-weight: inherit;
}
.ant-table-thead > tr > th {
font-weight: 500;
}

View File

@@ -1,30 +1,20 @@
@import (reference) '~@/assets/style/extend.less';
.ant-modal-content {
background-color: fade(@primary-color, 20%);
background-color: fade(@white, 90%);
backdrop-filter: blur(10px);
backdrop-filter: blur(5px);
}
.ant-modal-header {
padding: @padding-sm @padding-md;
background-color: transparent;
}
.ant-modal-title {
color: fade(@white, 85%);
}
.ant-modal-body {
background-color: @white;
}
.ant-modal-footer {
background-color: @white;
}
.ant-modal-close {
color: fade(@white, 45%);
&:focus,
&:hover {
color: fade(@white, 75%);
}
}
.ant-modal-close-x {
line-height: 46px;

View File

@@ -29,7 +29,7 @@
}
.swiper-container {
position: absolute;
top: @layout-header-height - 20px;
top: @layout-header-height;
left: 0;
bottom: 0;
@@ -38,6 +38,32 @@
height: auto;
min-height: 100%;
}
.swiper-scrollbar {
transition: @animation-duration-slow opacity;
opacity: 0;
}
&:hover {
.swiper-scrollbar {
opacity: 1;
}
}
}
}
&--bar {
line-height: 20px;
height: 20px;
padding: 0 @padding-md;
text-align: right;
>.anticon {
cursor: pointer;
color: fade(@black, 50%);
&:hover {
color: fade(@black, 80%);
}
}
}
}

View File

@@ -122,6 +122,10 @@ export default {
this.onUpdateSwiper()
},
onUnexpandAll() {
this.expandedKeys = []
},
onSearch(value) {
const expandedKeys = this.list
.map(p => {
@@ -136,6 +140,10 @@ export default {
this.expandedKeys = expandedKeys
this.autoExpandParent = true
this.$nextTick(() => {
this.onUpdateSwiper()
})
},
onSelect(selectedKeys) {
@@ -238,6 +246,11 @@ export default {
<a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
</div>
</a-layout-header>
<div class="yo-tree-layout--bar">
<a-tooltip placement="bottom" title="折叠全部">
<a-icon type="switcher" onClick={this.onUnexpandAll} />
</a-tooltip>
</div>
<div class="swiper-container" ref="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">

View File

@@ -25,6 +25,10 @@ import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
Vue.use(getAwesomeSwiper(SwiperClass))
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
Vue.use(hljs.vuePlugin);
/**
* api全局化
*/

View File

@@ -1,3 +0,0 @@
<template>
<div></div>
</template>

View File

@@ -0,0 +1,16 @@
export default {
props: {
code: {
type: String
}
},
render() {
const props = {
...this.$props,
...this.$attrs
}
return props.code && <highlightjs {...{ props }} />
}
}

View File

@@ -0,0 +1,53 @@
<template>
<container>
<template v-for="(doc, index) in docs">
<component :codes="codes" :is="doc.component" :key="index" />
</template>
<a-anchor>
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
<a-anchor-link
href="#components-anchor-demo-basic"
target="_blank"
title="Basic demo with Target"
/>
<a-anchor-link href="#API" title="API">
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
<a-anchor-link href="#Link-Props" title="Link Props" />
</a-anchor-link>
</a-anchor>
</container>
</template>
<script>
export default {
data() {
return {
docs: [
{
title: '开始使用',
name: 'use',
},
],
codes: {},
};
},
mounted() {
this.docs.forEach((doc) => {
this.$set(doc, 'component', () => import(`./${doc.name}`));
});
const files = require.context('@/../public/doc-part', true, /\.(js|html|vue|css|less)(\?.*)?$/);
const codes = {};
files.keys().forEach((p) => {
const fileName = p.slice(1);
const xhr = new XMLHttpRequest();
xhr.open('GET', `./doc-part${fileName}`, false);
xhr.overrideMimeType('text/plain;charset=utf-8');
xhr.send(null);
codes[fileName] = xhr.responseText;
});
console.log(codes);
this.codes = codes;
},
};
</script>

View File

@@ -0,0 +1,21 @@
<template>
<section>
<h3>开始使用</h3>
<Highlight :code="codes['/use/a.js'] || ''" language="javascript" />
<Highlight :code="codes['/use/test.vue'] || ''" language="javascript" />
</section>
</template>
<script>
import Highlight from './highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

View File

@@ -260,6 +260,9 @@ export default {
} else {
this.$message.error(message);
}
})
.finally(() => {
record.statusChanging = false;
});
},

View File

@@ -127,7 +127,7 @@ export default {
<template slot="dataSource">
{this.renderSelect(this.searchResult)}
</template>
<a-input>
<a-input allow-clear>
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
</a-auto-complete>

View File

@@ -3241,6 +3241,11 @@ destroy@~1.0.4:
resolved "https://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
detect-indent@^5.0.0:
version "5.0.0"
resolved "https://registry.nlark.com/detect-indent/download/detect-indent-5.0.0.tgz?cache=0&sync_timestamp=1618847240598&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdetect-indent%2Fdownload%2Fdetect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
detect-node@^2.0.4:
version "2.0.5"
resolved "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
@@ -4418,6 +4423,11 @@ highlight.js@^10.0.0:
resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
integrity sha1-qOxBUtsk6mMMkJJ9bK4qRfjsuVU=
highlight.js@^10.7.2:
version "10.7.2"
resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.2.tgz?cache=0&sync_timestamp=1619160938319&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhighlight.js%2Fdownload%2Fhighlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
integrity sha1-iTGbhh7cZsSIVO0ebaIeqJ+Ec2A=
hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4688,6 +4698,11 @@ imurmurhash@^0.1.4:
resolved "https://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
indent-string@^3.0.0:
version "3.2.0"
resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-3.2.0.tgz?cache=0&sync_timestamp=1618679561483&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Findent-string%2Fdownload%2Findent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
indent-string@^4.0.0:
version "4.0.0"
resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -7054,6 +7069,14 @@ readdirp@~3.5.0:
dependencies:
picomatch "^2.2.1"
redent@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/redent/download/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
dependencies:
indent-string "^3.0.0"
strip-indent "^2.0.0"
regenerate-unicode-properties@^8.2.0:
version "8.2.0"
resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -8169,7 +8192,7 @@ tslib@2.0.3:
resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1617647442601&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
tslib@^1.10.0, tslib@^1.9.0:
tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
version "1.14.1"
resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887785854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=
@@ -8482,6 +8505,15 @@ vue-eslint-parser@^7.0.0:
esquery "^1.4.0"
lodash "^4.17.15"
vue-highlight.js@^3.1.0:
version "3.1.0"
resolved "https://registry.npm.taobao.org/vue-highlight.js/download/vue-highlight.js-3.1.0.tgz#87b60b4931fd310b318f2b2c9116fe71b69dd053"
integrity sha1-h7YLSTH9MQsxjysskRb+cbad0FM=
dependencies:
detect-indent "^5.0.0"
redent "^2.0.0"
tslib "^1.9.3"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"