initial
This commit is contained in:
@@ -1,351 +1,343 @@
|
||||
<template>
|
||||
<article
|
||||
class="one-demo"
|
||||
:class="{ codeExpanded }"
|
||||
>
|
||||
<section class="demo">
|
||||
<browser-window
|
||||
v-if="browser"
|
||||
:url="browser"
|
||||
width="calc(100% - 40px)"
|
||||
height="400px"
|
||||
>
|
||||
<one-iframe global-style="body { margin: 0 !important; } .veui-layout { min-width: auto !important; }">
|
||||
<slot/>
|
||||
</one-iframe>
|
||||
</browser-window>
|
||||
<slot v-else/>
|
||||
</section>
|
||||
<section
|
||||
v-if="$slots.desc"
|
||||
class="desc"
|
||||
>
|
||||
<slot name="desc"/>
|
||||
</section>
|
||||
<section class="actions">
|
||||
<veui-button
|
||||
v-tooltip="t('playInCodeSandbox')"
|
||||
ui="icon"
|
||||
@click="play('CodeSandbox')"
|
||||
>
|
||||
<veui-icon name="one-demo-codesandbox"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('playInStackBlitz')"
|
||||
ui="icon"
|
||||
@click="play('StackBlitz')"
|
||||
>
|
||||
<veui-icon name="one-demo-stackblitz"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
|
||||
ui="icon"
|
||||
@click="codeExpanded = !codeExpanded"
|
||||
>
|
||||
<veui-icon
|
||||
scale="1.2"
|
||||
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
|
||||
class="toggle-editor"
|
||||
ui="text"
|
||||
@click="editing = !editing"
|
||||
>
|
||||
Live
|
||||
</veui-button>
|
||||
<one-edit-link
|
||||
class="edit"
|
||||
variant="quiet"
|
||||
type="demo"
|
||||
:path="path"
|
||||
/>
|
||||
</section>
|
||||
<section
|
||||
v-if="$slots.source"
|
||||
ref="source"
|
||||
class="source"
|
||||
:style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
|
||||
>
|
||||
<div class="source-toolbar">
|
||||
<veui-button
|
||||
v-tooltip="t('@onelive.copyCode')"
|
||||
ui="icon reverse"
|
||||
@click="copy"
|
||||
<article class="one-demo" :class="{ codeExpanded }">
|
||||
<section class="demo">
|
||||
<browser-window
|
||||
v-if="browser"
|
||||
:url="browser"
|
||||
width="calc(100% - 40px)"
|
||||
height="400px"
|
||||
>
|
||||
<veui-icon name="copy"/>
|
||||
<one-iframe
|
||||
global-style="body { margin: 0 !important; } .veui-layout { min-width: auto !important; }"
|
||||
>
|
||||
<slot />
|
||||
</one-iframe>
|
||||
</browser-window>
|
||||
<slot v-else />
|
||||
</section>
|
||||
<section v-if="$slots.desc" class="desc">
|
||||
<slot name="desc" />
|
||||
</section>
|
||||
<section class="actions">
|
||||
<veui-button
|
||||
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
|
||||
ui="icon"
|
||||
@click="codeExpanded = !codeExpanded"
|
||||
>
|
||||
<veui-icon
|
||||
scale="1.2"
|
||||
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
/>
|
||||
</veui-button>
|
||||
</div>
|
||||
<slot name="source"/>
|
||||
</section>
|
||||
<transition name="editor">
|
||||
<one-repl
|
||||
v-if="editing"
|
||||
class="one-demo-editor"
|
||||
:class="{
|
||||
'one-demo-editor-shrink': !editorExpanded
|
||||
}"
|
||||
:code="code"
|
||||
:expanded="editorExpanded"
|
||||
:browser="!!browser"
|
||||
@close="handleEditorClose"
|
||||
@toggle="handleEditorToggle"
|
||||
/>
|
||||
</transition>
|
||||
</article>
|
||||
<veui-button
|
||||
v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
|
||||
class="toggle-editor"
|
||||
ui="text"
|
||||
@click="editing = !editing"
|
||||
>
|
||||
Live
|
||||
</veui-button>
|
||||
<!-- 禁用跳转Github -->
|
||||
<!-- <one-edit-link class="edit" variant="quiet" type="demo" :path="path" /> -->
|
||||
</section>
|
||||
<section
|
||||
v-if="$slots.source"
|
||||
ref="source"
|
||||
class="source"
|
||||
:style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
|
||||
>
|
||||
<div class="source-toolbar">
|
||||
<veui-button
|
||||
v-tooltip="t('@onelive.copyCode')"
|
||||
ui="icon reverse"
|
||||
@click="copy"
|
||||
>
|
||||
<veui-icon name="copy" />
|
||||
</veui-button>
|
||||
</div>
|
||||
<slot name="source" />
|
||||
</section>
|
||||
<transition name="editor">
|
||||
<one-repl
|
||||
v-if="editing"
|
||||
class="one-demo-editor"
|
||||
:class="{
|
||||
'one-demo-editor-shrink': !editorExpanded,
|
||||
}"
|
||||
:code="code"
|
||||
:expanded="editorExpanded"
|
||||
:browser="!!browser"
|
||||
@close="handleEditorClose"
|
||||
@toggle="handleEditorToggle"
|
||||
/>
|
||||
</transition>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { Button, Icon } from 'veui'
|
||||
import tooltip from 'veui/directives/tooltip'
|
||||
import modal from 'veui/managers/modal'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import toast from 'veui/plugins/toast'
|
||||
import { BrowserWindow } from 'vue-windows'
|
||||
import { getLocale } from '../common/i18n'
|
||||
import { play } from '../common/play'
|
||||
import OneIframe from './OneIframe'
|
||||
import OneEditLink from './OneEditLink'
|
||||
import OneRepl from './OneRepl'
|
||||
import 'veui-theme-dls-icons/copy'
|
||||
import Vue from "vue";
|
||||
import { Button, Icon } from "veui";
|
||||
import tooltip from "veui/directives/tooltip";
|
||||
import modal from "veui/managers/modal";
|
||||
import i18n from "veui/mixins/i18n";
|
||||
import toast from "veui/plugins/toast";
|
||||
import { BrowserWindow } from "vue-windows";
|
||||
import { getLocale } from "../common/i18n";
|
||||
import { play } from "../common/play";
|
||||
import OneIframe from "./OneIframe";
|
||||
import OneEditLink from "./OneEditLink";
|
||||
import OneRepl from "./OneRepl";
|
||||
import "veui-theme-dls-icons/copy";
|
||||
|
||||
Vue.use(toast)
|
||||
Vue.use(toast);
|
||||
|
||||
export default {
|
||||
name: 'one-demo',
|
||||
name: "one-demo",
|
||||
directives: {
|
||||
tooltip
|
||||
tooltip,
|
||||
},
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon,
|
||||
"veui-button": Button,
|
||||
"veui-icon": Icon,
|
||||
BrowserWindow,
|
||||
OneIframe,
|
||||
OneEditLink,
|
||||
OneRepl
|
||||
OneRepl,
|
||||
},
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
browser: String,
|
||||
path: String
|
||||
path: String,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
code: "",
|
||||
sourceHeight: 0,
|
||||
codeExpanded: false,
|
||||
editing: false,
|
||||
editorExpanded: true
|
||||
}
|
||||
editorExpanded: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lock () {
|
||||
return this.editing && this.editorExpanded
|
||||
}
|
||||
lock() {
|
||||
return this.editing && this.editorExpanded;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
lock (value) {
|
||||
lock(value) {
|
||||
if (value) {
|
||||
modal.open()
|
||||
modal.open();
|
||||
} else {
|
||||
modal.close()
|
||||
modal.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
let source = this.$refs.source
|
||||
let style = source.style
|
||||
style.height = ''
|
||||
style.height = source.offsetHeight
|
||||
this.sourceHeight = source.offsetHeight
|
||||
style.height = '0'
|
||||
mounted() {
|
||||
let source = this.$refs.source;
|
||||
let style = source.style;
|
||||
style.height = "";
|
||||
style.height = source.offsetHeight;
|
||||
this.sourceHeight = source.offsetHeight;
|
||||
style.height = "0";
|
||||
|
||||
this.code = this.$refs.source?.querySelector('pre')?.textContent || ''
|
||||
this.code = this.$refs.source?.querySelector("pre")?.textContent || "";
|
||||
},
|
||||
destroyed () {
|
||||
modal.close()
|
||||
destroyed() {
|
||||
modal.close();
|
||||
},
|
||||
methods: {
|
||||
play (vendor) {
|
||||
let locale = getLocale(this.$route.path)
|
||||
play(this.$refs.source.textContent, { locale, vendor })
|
||||
play(vendor) {
|
||||
let locale = getLocale(this.$route.path);
|
||||
play(this.$refs.source.textContent, { locale, vendor });
|
||||
},
|
||||
async copy () {
|
||||
async copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.code)
|
||||
this.$toast.success(this.t('@onelive.copySuccess'))
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
this.$toast.success(this.t("@onelive.copySuccess"));
|
||||
} catch (e) {
|
||||
this.$toast.error(this.t('@onelive.copyFailed'))
|
||||
this.$toast.error(this.t("@onelive.copyFailed"));
|
||||
}
|
||||
},
|
||||
handleEditorClose () {
|
||||
this.editing = false
|
||||
handleEditorClose() {
|
||||
this.editing = false;
|
||||
},
|
||||
handleEditorToggle (val) {
|
||||
this.editorExpanded = val
|
||||
}
|
||||
}
|
||||
}
|
||||
handleEditorToggle(val) {
|
||||
this.editorExpanded = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Icon.register({
|
||||
'one-demo-code': {
|
||||
"one-demo-code": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z'
|
||||
d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z",
|
||||
},
|
||||
'one-demo-code-off': {
|
||||
"one-demo-code-off": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
|
||||
d: "M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z",
|
||||
},
|
||||
'one-demo-codesandbox': {
|
||||
"one-demo-codesandbox": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
d:
|
||||
'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
|
||||
d: "M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z",
|
||||
},
|
||||
'one-demo-stackblitz': {
|
||||
"one-demo-stackblitz": {
|
||||
width: 28,
|
||||
height: 28,
|
||||
d:
|
||||
'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z'
|
||||
}
|
||||
})
|
||||
d: "M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style src="vue-windows/dist/vue-windows.css"></style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.one-demo
|
||||
overflow hidden
|
||||
.one-demo {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo
|
||||
border 1px solid #eee
|
||||
border-top-left-radius 4px
|
||||
border-top-right-radius 4px
|
||||
padding 30px
|
||||
.demo {
|
||||
border: 1px solid #eee;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
padding: 30px;
|
||||
|
||||
& >>> .style-module_body__14MV-
|
||||
overflow hidden
|
||||
transform translate(0, 0)
|
||||
padding 0
|
||||
& >>> .style-module_body__14MV- {
|
||||
overflow: hidden;
|
||||
transform: translate(0, 0);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.desc
|
||||
border 1px solid #eee
|
||||
padding 18px 20px
|
||||
background-color #fcfcfc
|
||||
.desc {
|
||||
border: 1px solid #eee;
|
||||
padding: 18px 20px;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
.source
|
||||
position relative
|
||||
overflow hidden
|
||||
transition height 0.3s
|
||||
.source {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s;
|
||||
|
||||
& >>> pre
|
||||
margin-top 0
|
||||
margin-bottom 0
|
||||
border-top-right-radius 0
|
||||
border-top-left-radius 0
|
||||
& >>> pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.desc
|
||||
.source >>> pre
|
||||
.actions
|
||||
margin-top -1px
|
||||
.desc, .source >>> pre, .actions {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.actions
|
||||
position relative
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
line-height 2
|
||||
width 100%
|
||||
height 48px
|
||||
border 1px solid #eee
|
||||
border-bottom-left-radius 4px
|
||||
border-bottom-right-radius 4px
|
||||
background-color #fff
|
||||
transition background-color 0.3s
|
||||
outline none
|
||||
.actions {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border: 1px solid #eee;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background-color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
outline: none;
|
||||
|
||||
.codeExpanded &
|
||||
border-radius 0
|
||||
.codeExpanded & {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.veui-button:not(.toggle-editor)
|
||||
font-size 18px
|
||||
.veui-button:not(.toggle-editor) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.veui-button + .veui-button
|
||||
margin-left 12px
|
||||
.veui-button + .veui-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit
|
||||
position absolute
|
||||
right 30px
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
font-size 12px
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.one-demo-editor
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
z-index 10
|
||||
background-color #fff
|
||||
transition bottom 0.1s, box-shadow 0.2s
|
||||
.one-demo-editor {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
transition: bottom 0.1s, box-shadow 0.2s;
|
||||
|
||||
&-shrink
|
||||
bottom 50vh
|
||||
box-shadow 0 0 4px #0006
|
||||
&-shrink {
|
||||
bottom: 50vh;
|
||||
box-shadow: 0 0 4px #0006;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-enter-active
|
||||
.editor-leave-active
|
||||
transform-origin 50% 50%
|
||||
transition all 0.3s
|
||||
.editor-enter-active, .editor-leave-active {
|
||||
transform-origin: 50% 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.editor-enter
|
||||
.editor-leave-to
|
||||
opacity 0
|
||||
transform scale(0.99) translateY(3px)
|
||||
.editor-enter, .editor-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.99) translateY(3px);
|
||||
}
|
||||
|
||||
.toggle-editor
|
||||
height 20px
|
||||
padding 0 3px
|
||||
font-weight 600
|
||||
.toggle-editor {
|
||||
height: 20px;
|
||||
padding: 0 3px;
|
||||
font-weight: 600;
|
||||
|
||||
&::after
|
||||
content none !important
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
&
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
&:active
|
||||
border 1.5px solid currentColor !important
|
||||
&, &:hover, &[data-focus-visible-added], &:active {
|
||||
border: 1.5px solid currentColor !important;
|
||||
}
|
||||
|
||||
&[data-focus-visible-added]
|
||||
border-color #0052cc !important
|
||||
box-shadow 0 0 0 2px rgba(0, 102, 255, 0.2) !important
|
||||
&[data-focus-visible-added] {
|
||||
border-color: #0052cc !important;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.source-toolbar
|
||||
position absolute
|
||||
top 12px
|
||||
right 28px
|
||||
display flex
|
||||
align-items center
|
||||
.source-toolbar {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.veui-button[ui~="icon"][ui~="reverse"]
|
||||
color #ebedf5
|
||||
.veui-button[ui~='icon'][ui~='reverse'] {
|
||||
color: #ebedf5;
|
||||
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
color #f6f7fa
|
||||
&:hover, &[data-focus-visible-added] {
|
||||
color: #f6f7fa;
|
||||
}
|
||||
|
||||
&:active
|
||||
color #fff
|
||||
&:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width 480px)
|
||||
.toggle-editor
|
||||
display none
|
||||
@media (max-width: 480px) {
|
||||
.toggle-editor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,121 @@
|
||||
<template>
|
||||
<a
|
||||
class="one-edit-link"
|
||||
:class="
|
||||
variant
|
||||
? {
|
||||
[`one-edit-link-${variant}`]: true,
|
||||
}
|
||||
: {}
|
||||
"
|
||||
:href="href"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<slot :label="t('editOnGitHub')">
|
||||
<span class="full">{{ t('editOnGitHub', { item: t(type) }) }}</span>
|
||||
<span class="short">{{ t('edit') }}</span>
|
||||
<veui-icon
|
||||
class="icon"
|
||||
name="external-link"
|
||||
/>
|
||||
</slot>
|
||||
</a>
|
||||
<a
|
||||
class="one-edit-link"
|
||||
:class="
|
||||
variant
|
||||
? {
|
||||
[`one-edit-link-${variant}`]: true,
|
||||
}
|
||||
: {}
|
||||
"
|
||||
:href="href"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<slot :label="t('editOnGitHub')">
|
||||
<span class="full">{{ t("editOnGitHub", { item: t(type) }) }}</span>
|
||||
<span class="short">{{ t("edit") }}</span>
|
||||
<veui-icon class="icon" name="external-link" />
|
||||
</slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from 'veui'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import 'veui-theme-dls-icons/external-link'
|
||||
import { Icon } from "veui";
|
||||
import i18n from "veui/mixins/i18n";
|
||||
import "veui-theme-dls-icons/external-link";
|
||||
import Config from "./../env";
|
||||
|
||||
const BASE_URL = 'https://github.com/ecomfe/veui-docs/edit/master/one/docs/'
|
||||
const BASE_URL = Config.github_repo;
|
||||
|
||||
export default {
|
||||
name: 'one-edit-link',
|
||||
name: "one-edit-link",
|
||||
components: {
|
||||
'veui-icon': Icon
|
||||
"veui-icon": Icon,
|
||||
},
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
default: "default",
|
||||
},
|
||||
path: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'page'
|
||||
}
|
||||
default: "page",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
href () {
|
||||
return `${BASE_URL}${this.path}`
|
||||
}
|
||||
}
|
||||
}
|
||||
href() {
|
||||
return `${BASE_URL}${this.path}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.one-edit-link
|
||||
display inline-flex
|
||||
align-items center
|
||||
text-decoration none
|
||||
transition background 0.2s, color 0.2s, border-color 0.2s
|
||||
.one-edit-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
|
||||
.icon
|
||||
margin-left 4px
|
||||
.icon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&-default
|
||||
display inline-flex
|
||||
align-items center
|
||||
padding 4px 6px
|
||||
border-radius 4px
|
||||
background-color #fff
|
||||
color #848b99
|
||||
border 1px solid #e2e6f0
|
||||
&-default {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #848b99;
|
||||
border: 1px solid #e2e6f0;
|
||||
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
background-color #f6f7fa
|
||||
color #282c33
|
||||
border-color #d3d9e6
|
||||
&:hover, &[data-focus-visible-added] {
|
||||
background-color: #f6f7fa;
|
||||
color: #282c33;
|
||||
border-color: #d3d9e6;
|
||||
}
|
||||
|
||||
&:active
|
||||
background-color #e2e6f0
|
||||
color #000
|
||||
border-color #d3d9e6
|
||||
&:active {
|
||||
background-color: #e2e6f0;
|
||||
color: #000;
|
||||
border-color: #d3d9e6;
|
||||
}
|
||||
}
|
||||
|
||||
&-quiet
|
||||
color #282c33
|
||||
&-quiet {
|
||||
color: #282c33;
|
||||
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
color #545b66
|
||||
&:hover, &[data-focus-visible-added] {
|
||||
color: #545b66;
|
||||
}
|
||||
|
||||
&:active
|
||||
color #000
|
||||
&:active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.full
|
||||
display inline
|
||||
.full {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.short
|
||||
display none
|
||||
.short {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width 480px)
|
||||
.one-edit-link-quiet
|
||||
.full
|
||||
display none
|
||||
.short
|
||||
display inline
|
||||
@media (max-width: 480px) {
|
||||
.one-edit-link-quiet {
|
||||
.full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.short {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,203 +1,190 @@
|
||||
<template>
|
||||
<footer class="one-footer">
|
||||
<nav
|
||||
class="links"
|
||||
:class="{ empty: single }"
|
||||
>
|
||||
<nuxt-link
|
||||
v-if="prev && level > 0"
|
||||
key="prev"
|
||||
class="prev"
|
||||
:to="prev.to"
|
||||
>
|
||||
{{ prev.title }}
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-if="next && level > 0"
|
||||
key="next"
|
||||
class="next"
|
||||
:to="next.to"
|
||||
>
|
||||
{{ next.title }}
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<p class="copyright">
|
||||
© Baidu, Inc. {{ year }}
|
||||
</p>
|
||||
</footer>
|
||||
<footer class="one-footer">
|
||||
<p class="copyright"></p>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compact, find, findIndex } from 'lodash'
|
||||
import i18n from '../common/i18n'
|
||||
import { compact, find, findIndex } from "lodash";
|
||||
import i18n from "../common/i18n";
|
||||
|
||||
export default {
|
||||
name: 'one-footer',
|
||||
name: "one-footer",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
nav: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
year: new Date().getFullYear()
|
||||
}
|
||||
year: new Date().getFullYear(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
links () {
|
||||
let segments = compact(this.canonicalPath.split('/'))
|
||||
return getLinks(this.nav, segments)
|
||||
links() {
|
||||
let segments = compact(this.canonicalPath.split("/"));
|
||||
return getLinks(this.nav, segments);
|
||||
},
|
||||
level () {
|
||||
return this.links ? this.links.level : 0
|
||||
level() {
|
||||
return this.links ? this.links.level : 0;
|
||||
},
|
||||
base () {
|
||||
return this.links ? this.links.base : null
|
||||
base() {
|
||||
return this.links ? this.links.base : null;
|
||||
},
|
||||
prev () {
|
||||
return this.resolve(this.links ? this.links.prev : null)
|
||||
prev() {
|
||||
return this.resolve(this.links ? this.links.prev : null);
|
||||
},
|
||||
next () {
|
||||
return this.resolve(this.links ? this.links.next : null)
|
||||
next() {
|
||||
return this.resolve(this.links ? this.links.next : null);
|
||||
},
|
||||
single() {
|
||||
return (!this.prev && !this.next) || this.level < 1;
|
||||
},
|
||||
single () {
|
||||
return (!this.prev && !this.next) || this.level < 1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
single: {
|
||||
handler (val) {
|
||||
this.$emit('update', {
|
||||
hasLinks: !val
|
||||
})
|
||||
handler(val) {
|
||||
this.$emit("update", {
|
||||
hasLinks: !val,
|
||||
});
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resolve (link) {
|
||||
let { slug, title, link: lk } = link || {}
|
||||
if (typeof slug !== 'string' || lk === false) {
|
||||
return null
|
||||
resolve(link) {
|
||||
let { slug, title, link: lk } = link || {};
|
||||
if (typeof slug !== "string" || lk === false) {
|
||||
return null;
|
||||
}
|
||||
let base = this.base
|
||||
let base = this.base;
|
||||
return {
|
||||
title,
|
||||
to: this.getLocalePath(slug ? `${base}/${slug}` : base)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
to: this.getLocalePath(slug ? `${base}/${slug}` : base),
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function findSibling (items, start, forward) {
|
||||
function findSibling(items, start, forward) {
|
||||
if ((start === 0 && !forward) || (start === items.length - 1 && forward)) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
let candidates = forward
|
||||
? items.slice(start + 1)
|
||||
: items.slice(0, start).reverse()
|
||||
return find(candidates, ({ disabled }) => !disabled)
|
||||
: items.slice(0, start).reverse();
|
||||
return find(candidates, ({ disabled }) => !disabled);
|
||||
}
|
||||
|
||||
function getLinks (nav, remaining, level = 0, base = '') {
|
||||
let [segment = '', ...segments] = [...remaining]
|
||||
function getLinks(nav, remaining, level = 0, base = "") {
|
||||
let [segment = "", ...segments] = [...remaining];
|
||||
|
||||
let i = findIndex(nav, ({ slug }) => slug === segment)
|
||||
let i = findIndex(nav, ({ slug }) => slug === segment);
|
||||
if (i === -1) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
let links = {
|
||||
prev: findSibling(nav, i, false),
|
||||
next: findSibling(nav, i, true),
|
||||
level,
|
||||
base
|
||||
}
|
||||
base,
|
||||
};
|
||||
|
||||
let sub = nav[i].children
|
||||
let sub = nav[i].children;
|
||||
if (!sub) {
|
||||
if (segments.length) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return links
|
||||
return links;
|
||||
}
|
||||
return (
|
||||
getLinks(sub, segments, level + 1, segment ? `${base}/${segment}` : base) ||
|
||||
links
|
||||
)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
arrow()
|
||||
content ""
|
||||
display block
|
||||
width 23px
|
||||
height 33px
|
||||
background #333 url("/icons/angle.svg") no-repeat 50% 50% / auto 21.5px
|
||||
transition background-color 0.3s
|
||||
arrow() {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 33px;
|
||||
background: #333 url('/icons/angle.svg') no-repeat 50% 50% / auto 21.5px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.one-footer
|
||||
clear both
|
||||
padding 0 60px
|
||||
.one-footer {
|
||||
clear: both;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.links
|
||||
border-top 1px solid #eee
|
||||
padding 20px 0 80px
|
||||
overflow hidden
|
||||
.links {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 20px 0 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty
|
||||
display none
|
||||
overflow hidden
|
||||
.empty {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prev
|
||||
.next
|
||||
display block
|
||||
line-height 33px
|
||||
color #333
|
||||
text-decoration none
|
||||
.prev, .next {
|
||||
display: block;
|
||||
line-height: 33px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover
|
||||
&.focus-visible
|
||||
&::before
|
||||
&::after
|
||||
background-color #5b5b5b
|
||||
&:hover, &.focus-visible {
|
||||
&::before, &::after {
|
||||
background-color: #5b5b5b;
|
||||
}
|
||||
}
|
||||
|
||||
&:active
|
||||
&::before
|
||||
&::after
|
||||
background-color #818181
|
||||
&:active {
|
||||
&::before, &::after {
|
||||
background-color: #818181;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev::before
|
||||
.next::after
|
||||
arrow()
|
||||
.prev::before, .next::after {
|
||||
arrow();
|
||||
}
|
||||
|
||||
.prev
|
||||
float left
|
||||
.prev {
|
||||
float: left;
|
||||
|
||||
&::before
|
||||
float left
|
||||
margin-right 15px
|
||||
transform rotate(180deg)
|
||||
&::before {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.next
|
||||
float right
|
||||
.next {
|
||||
float: right;
|
||||
|
||||
&::after
|
||||
float right
|
||||
margin-left 15px
|
||||
&::after {
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright
|
||||
margin 0
|
||||
padding 25px 0 20px
|
||||
border-top 1px solid #eee
|
||||
line-height 1
|
||||
font-size 12px
|
||||
text-align center
|
||||
.copyright {
|
||||
margin: 0;
|
||||
padding: 25px 0 20px;
|
||||
border-top: 1px solid #eee;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,78 +1,60 @@
|
||||
<template>
|
||||
<v-splitpanes class="one-live">
|
||||
<v-pane
|
||||
min-size="30"
|
||||
class="live-editor"
|
||||
>
|
||||
<v-monaco-editor
|
||||
v-model="localCode"
|
||||
style="height: 100%"
|
||||
language="html"
|
||||
:theme="theme"
|
||||
:options="{
|
||||
automaticLayout: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
scrollBeyondLastLine: false
|
||||
}"
|
||||
/>
|
||||
<div class="editor-toolbar">
|
||||
<veui-button
|
||||
v-tooltip="t('@onedemo.playInCodeSandbox')"
|
||||
:ui="iconUi"
|
||||
@click="play('CodeSandbox')"
|
||||
>
|
||||
<veui-icon name="one-demo-codesandbox"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('@onedemo.playInStackBlitz')"
|
||||
:ui="iconUi"
|
||||
@click="play('StackBlitz')"
|
||||
>
|
||||
<veui-icon name="one-demo-stackblitz"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('reset')"
|
||||
:ui="iconUi"
|
||||
@click="reset"
|
||||
>
|
||||
<veui-icon name="anticlockwise"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('copyCode')"
|
||||
:ui="iconUi"
|
||||
@click="copy"
|
||||
>
|
||||
<veui-icon name="copy"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t(colorSchemeLabelKey)"
|
||||
:ui="iconUi"
|
||||
@click="switchColorScheme"
|
||||
>
|
||||
<veui-icon
|
||||
:name="colorSchemeIcon"
|
||||
scale="1.2"
|
||||
/>
|
||||
</veui-button>
|
||||
<div class="editor-live-badge">
|
||||
<span>Live</span>
|
||||
<v-splitpanes class="one-live">
|
||||
<v-pane min-size="30" class="live-editor">
|
||||
<v-monaco-editor
|
||||
v-model="localCode"
|
||||
style="height: 100%"
|
||||
language="html"
|
||||
:theme="theme"
|
||||
:options="{
|
||||
automaticLayout: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
scrollBeyondLastLine: false,
|
||||
}"
|
||||
/>
|
||||
<div class="editor-toolbar">
|
||||
<veui-button v-tooltip="t('reset')" :ui="iconUi" @click="reset">
|
||||
<veui-icon name="anticlockwise" />
|
||||
</veui-button>
|
||||
<veui-button v-tooltip="t('copyCode')" :ui="iconUi" @click="copy">
|
||||
<veui-icon name="copy" />
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t(colorSchemeLabelKey)"
|
||||
:ui="iconUi"
|
||||
@click="switchColorScheme"
|
||||
>
|
||||
<veui-icon :name="colorSchemeIcon" scale="1.2" />
|
||||
</veui-button>
|
||||
<!-- <div class="editor-live-badge">
|
||||
<span>Live</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</v-pane>
|
||||
<v-pane
|
||||
min-size="40"
|
||||
class="live-preview"
|
||||
:class="{
|
||||
'live-preview-browser': browser
|
||||
}"
|
||||
>
|
||||
<one-iframe
|
||||
v-if="browser"
|
||||
global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }"
|
||||
</v-pane>
|
||||
<v-pane
|
||||
min-size="40"
|
||||
class="live-preview"
|
||||
:class="{
|
||||
'live-preview-browser': browser,
|
||||
}"
|
||||
>
|
||||
<one-iframe
|
||||
v-if="browser"
|
||||
global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }"
|
||||
>
|
||||
<v-live-preview
|
||||
class="editor-preview"
|
||||
:code="transformedCode"
|
||||
:requires="imports"
|
||||
:check-variable-availability="false"
|
||||
@success="dismissError"
|
||||
@error="handleError"
|
||||
/>
|
||||
</one-iframe>
|
||||
<v-live-preview
|
||||
v-else
|
||||
class="editor-preview"
|
||||
:code="transformedCode"
|
||||
:requires="imports"
|
||||
@@ -80,338 +62,343 @@
|
||||
@success="dismissError"
|
||||
@error="handleError"
|
||||
/>
|
||||
</one-iframe>
|
||||
<v-live-preview
|
||||
v-else
|
||||
class="editor-preview"
|
||||
:code="transformedCode"
|
||||
:requires="imports"
|
||||
:check-variable-availability="false"
|
||||
@success="dismissError"
|
||||
@error="handleError"
|
||||
/>
|
||||
<transition name="editor-error">
|
||||
<veui-alert
|
||||
v-if="error"
|
||||
v-tooltip="t('dismiss')"
|
||||
ui="s"
|
||||
type="error"
|
||||
class="editor-error"
|
||||
@click.native="dismissError"
|
||||
>
|
||||
<code>{{ errorMessage }}</code>
|
||||
</veui-alert>
|
||||
</transition>
|
||||
</v-pane>
|
||||
</v-splitpanes>
|
||||
<transition name="editor-error">
|
||||
<veui-alert
|
||||
v-if="error"
|
||||
v-tooltip="t('dismiss')"
|
||||
ui="s"
|
||||
type="error"
|
||||
class="editor-error"
|
||||
@click.native="dismissError"
|
||||
>
|
||||
<code>{{ errorMessage }}</code>
|
||||
</veui-alert>
|
||||
</transition>
|
||||
</v-pane>
|
||||
</v-splitpanes>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { VueLivePreview } from 'vue-live'
|
||||
import MonacoEditor from 'vue-monaco'
|
||||
import { editor } from 'monaco-editor/esm/vs/editor/editor.api'
|
||||
import NightOwl from 'monaco-themes/themes/Night Owl.json'
|
||||
import { Button, Icon, Alert } from 'veui'
|
||||
import * as veui from 'veui'
|
||||
import lodash from 'lodash'
|
||||
import 'veui-theme-dls-icons'
|
||||
import tooltip from 'veui/directives/tooltip'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import toast from 'veui/plugins/toast'
|
||||
import 'veui-theme-dls-icons/copy'
|
||||
import 'veui-theme-dls-icons/anticlockwise'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { getLocale } from '../common/i18n'
|
||||
import { play } from '../common/play'
|
||||
import { transformLessCode } from '../common/transform'
|
||||
import { loadPref, savePref } from '../common/util'
|
||||
import OneIframe from './OneIframe'
|
||||
import Vue from "vue";
|
||||
import { VueLivePreview } from "vue-live";
|
||||
import MonacoEditor from "vue-monaco";
|
||||
import { editor } from "monaco-editor/esm/vs/editor/editor.api";
|
||||
import NightOwl from "monaco-themes/themes/Night Owl.json";
|
||||
import { Button, Icon, Alert } from "veui";
|
||||
import * as veui from "veui";
|
||||
import lodash from "lodash";
|
||||
import "veui-theme-dls-icons";
|
||||
import tooltip from "veui/directives/tooltip";
|
||||
import i18n from "veui/mixins/i18n";
|
||||
import toast from "veui/plugins/toast";
|
||||
import "veui-theme-dls-icons/copy";
|
||||
import "veui-theme-dls-icons/anticlockwise";
|
||||
import { Splitpanes, Pane } from "splitpanes";
|
||||
import "splitpanes/dist/splitpanes.css";
|
||||
import { getLocale } from "../common/i18n";
|
||||
import { play } from "../common/play";
|
||||
import { transformLessCode } from "../common/transform";
|
||||
import { loadPref, savePref } from "../common/util";
|
||||
import OneIframe from "./OneIframe";
|
||||
|
||||
Vue.use(toast)
|
||||
Vue.use(toast);
|
||||
|
||||
editor.defineTheme('night-owl', NightOwl)
|
||||
editor.defineTheme("night-owl", NightOwl);
|
||||
|
||||
Icon.register({
|
||||
'one-live-color-scheme-auto': {
|
||||
"one-live-color-scheme-auto": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34z'
|
||||
d: "M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34z",
|
||||
},
|
||||
'one-live-color-scheme-light': {
|
||||
"one-live-color-scheme-light": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z'
|
||||
d: "M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z",
|
||||
},
|
||||
'one-live-color-scheme-dark': {
|
||||
"one-live-color-scheme-dark": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z'
|
||||
}
|
||||
})
|
||||
d: "M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z",
|
||||
},
|
||||
});
|
||||
|
||||
const iconPackage = 'veui-theme-dls-icons'
|
||||
const iconPackage = "veui-theme-dls-icons";
|
||||
const iconNames = Object.keys(Icon.icons).filter(
|
||||
name => !name.startsWith('one-demo-') && Icon.icons[name]
|
||||
)
|
||||
(name) => !name.startsWith("one-demo-") && Icon.icons[name]
|
||||
);
|
||||
const iconModules = [iconPackage].concat(
|
||||
iconNames.map(name => `${iconPackage}/${name}`)
|
||||
)
|
||||
iconNames.map((name) => `${iconPackage}/${name}`)
|
||||
);
|
||||
|
||||
const colorSchemeOptions = ['dark', 'light', 'auto']
|
||||
const colorSchemeOptions = ["dark", "light", "auto"];
|
||||
|
||||
export default {
|
||||
name: 'one-live',
|
||||
name: "one-live",
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon,
|
||||
'veui-alert': Alert,
|
||||
'v-splitpanes': Splitpanes,
|
||||
'v-pane': Pane,
|
||||
'v-monaco-editor': MonacoEditor,
|
||||
'v-live-preview': VueLivePreview,
|
||||
OneIframe
|
||||
"veui-button": Button,
|
||||
"veui-icon": Icon,
|
||||
"veui-alert": Alert,
|
||||
"v-splitpanes": Splitpanes,
|
||||
"v-pane": Pane,
|
||||
"v-monaco-editor": MonacoEditor,
|
||||
"v-live-preview": VueLivePreview,
|
||||
OneIframe,
|
||||
},
|
||||
directives: {
|
||||
tooltip
|
||||
tooltip,
|
||||
},
|
||||
mixins: [i18n],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
browser: Boolean
|
||||
browser: Boolean,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
localCode: this.code,
|
||||
transformedCode: '',
|
||||
transformedCode: "",
|
||||
error: null,
|
||||
imports: {
|
||||
veui,
|
||||
lodash,
|
||||
...iconModules.reduce((mocks, module) => {
|
||||
mocks[module] = true
|
||||
return mocks
|
||||
}, {})
|
||||
mocks[module] = true;
|
||||
return mocks;
|
||||
}, {}),
|
||||
},
|
||||
colorSchemeOption: loadPref('prefers-color-scheme'),
|
||||
colorSchemeSystemPref: null
|
||||
}
|
||||
colorSchemeOption: loadPref("prefers-color-scheme"),
|
||||
colorSchemeSystemPref: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
errorMessage () {
|
||||
const { error } = this
|
||||
errorMessage() {
|
||||
const { error } = this;
|
||||
|
||||
if (!error) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return error.name ? `${error.name}: ${error.message}` : error.message
|
||||
return error.name ? `${error.name}: ${error.message}` : error.message;
|
||||
},
|
||||
colorScheme () {
|
||||
colorScheme() {
|
||||
if (!this.colorSchemeOption) {
|
||||
return 'dark'
|
||||
return "dark";
|
||||
}
|
||||
|
||||
if (this.colorSchemeOption === 'auto') {
|
||||
return this.colorSchemeSystemPref
|
||||
if (this.colorSchemeOption === "auto") {
|
||||
return this.colorSchemeSystemPref;
|
||||
}
|
||||
|
||||
return this.colorSchemeOption
|
||||
return this.colorSchemeOption;
|
||||
},
|
||||
theme () {
|
||||
return this.colorScheme === 'dark' ? 'night-owl' : 'vs'
|
||||
theme() {
|
||||
return this.colorScheme === "dark" ? "night-owl" : "vs";
|
||||
},
|
||||
iconUi () {
|
||||
const ui = 's square icon'
|
||||
return this.colorScheme === 'dark' ? `${ui} reverse` : ui
|
||||
iconUi() {
|
||||
const ui = "s square icon";
|
||||
return this.colorScheme === "dark" ? `${ui} reverse` : ui;
|
||||
},
|
||||
colorSchemeIcon () {
|
||||
colorSchemeIcon() {
|
||||
if (!this.colorSchemeOption) {
|
||||
return 'one-live-color-scheme-dark'
|
||||
return "one-live-color-scheme-dark";
|
||||
}
|
||||
|
||||
return {
|
||||
light: 'one-live-color-scheme-light',
|
||||
dark: 'one-live-color-scheme-dark',
|
||||
auto: 'one-live-color-scheme-auto'
|
||||
}[this.colorSchemeOption]
|
||||
light: "one-live-color-scheme-light",
|
||||
dark: "one-live-color-scheme-dark",
|
||||
auto: "one-live-color-scheme-auto",
|
||||
}[this.colorSchemeOption];
|
||||
},
|
||||
colorSchemeLabelKey () {
|
||||
colorSchemeLabelKey() {
|
||||
if (!this.colorSchemeOption) {
|
||||
return 'darkMode'
|
||||
return "darkMode";
|
||||
}
|
||||
|
||||
return {
|
||||
light: 'lightMode',
|
||||
dark: 'darkMode',
|
||||
auto: 'followSystem'
|
||||
}[this.colorSchemeOption]
|
||||
}
|
||||
light: "lightMode",
|
||||
dark: "darkMode",
|
||||
auto: "followSystem",
|
||||
}[this.colorSchemeOption];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
localCode: {
|
||||
immediate: true,
|
||||
handler (code) {
|
||||
handler(code) {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
this.transformedCode = transformLessCode(code)
|
||||
this.transformedCode = transformLessCode(code);
|
||||
} catch (e) {
|
||||
this.error = e
|
||||
return
|
||||
this.error = e;
|
||||
return;
|
||||
}
|
||||
this.error = null
|
||||
})
|
||||
}
|
||||
}
|
||||
this.error = null;
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.mql = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
this.mql.addEventListener('change', this.handleColorSchemeChange)
|
||||
this.colorSchemeSystemPref = this.mql.matches ? 'dark' : 'light'
|
||||
mounted() {
|
||||
this.mql = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
this.mql.addEventListener("change", this.handleColorSchemeChange);
|
||||
this.colorSchemeSystemPref = this.mql.matches ? "dark" : "light";
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.mql.removeEventListener('change', this.handleColorSchemeChange)
|
||||
beforeDestroy() {
|
||||
this.mql.removeEventListener("change", this.handleColorSchemeChange);
|
||||
},
|
||||
methods: {
|
||||
play (vendor) {
|
||||
let locale = getLocale(this.$route.path)
|
||||
play(this.localCode, { locale, vendor })
|
||||
play(vendor) {
|
||||
let locale = getLocale(this.$route.path);
|
||||
play(this.localCode, { locale, vendor });
|
||||
},
|
||||
async copy () {
|
||||
async copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.code)
|
||||
this.$toast.success(this.t('copySuccess'))
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
this.$toast.success(this.t("copySuccess"));
|
||||
} catch (e) {
|
||||
this.$toast.error(this.t('copyFailed'))
|
||||
this.$toast.error(this.t("copyFailed"));
|
||||
}
|
||||
},
|
||||
switchColorScheme () {
|
||||
switchColorScheme() {
|
||||
if (!this.colorSchemeOption) {
|
||||
this.colorSchemeOption = 'light'
|
||||
this.colorSchemeOption = "light";
|
||||
} else {
|
||||
this.colorSchemeOption = colorSchemeOptions[
|
||||
(colorSchemeOptions.indexOf(this.colorSchemeOption) + 1) %
|
||||
colorSchemeOptions.length
|
||||
]
|
||||
this.colorSchemeOption =
|
||||
colorSchemeOptions[
|
||||
(colorSchemeOptions.indexOf(this.colorSchemeOption) + 1) %
|
||||
colorSchemeOptions.length
|
||||
];
|
||||
}
|
||||
|
||||
savePref('prefers-color-scheme', this.colorSchemeOption)
|
||||
savePref("prefers-color-scheme", this.colorSchemeOption);
|
||||
},
|
||||
handleColorSchemeChange () {
|
||||
this.colorSchemeSystemPref = this.mql.matches ? 'dark' : 'light'
|
||||
handleColorSchemeChange() {
|
||||
this.colorSchemeSystemPref = this.mql.matches ? "dark" : "light";
|
||||
},
|
||||
reset () {
|
||||
this.localCode = this.code
|
||||
reset() {
|
||||
this.localCode = this.code;
|
||||
},
|
||||
handleChange (code) {
|
||||
this.localCode = code
|
||||
handleChange(code) {
|
||||
this.localCode = code;
|
||||
},
|
||||
handleError (error) {
|
||||
this.error = error
|
||||
handleError(error) {
|
||||
this.error = error;
|
||||
},
|
||||
dismissError () {
|
||||
this.error = null
|
||||
}
|
||||
}
|
||||
}
|
||||
dismissError() {
|
||||
this.error = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.one-live
|
||||
& >>> .splitpanes__pane
|
||||
position relative
|
||||
.one-live {
|
||||
& >>> .splitpanes__pane {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& >>> .splitpanes__splitter
|
||||
width 6px
|
||||
background #eee
|
||||
transition all 0.3s
|
||||
& >>> .splitpanes__splitter {
|
||||
width: 6px;
|
||||
background: #eee;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover
|
||||
background #ccc
|
||||
transform scaleX(2)
|
||||
&:hover {
|
||||
background: #ccc;
|
||||
transform: scaleX(2);
|
||||
}
|
||||
}
|
||||
|
||||
& >>> .live-preview
|
||||
overflow auto
|
||||
& >>> .live-preview {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.live-preview-browser
|
||||
transform translate(0, 0)
|
||||
padding 0 !important
|
||||
.live-preview-browser {
|
||||
transform: translate(0, 0);
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.editor-toolbar
|
||||
position absolute
|
||||
top 12px
|
||||
right 28px
|
||||
display flex
|
||||
align-items center
|
||||
.editor-toolbar {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editor-live-badge
|
||||
display flex
|
||||
align-items center
|
||||
position relative
|
||||
margin-left 8px
|
||||
padding 0 4px 0 20px
|
||||
border-radius 2px
|
||||
font-size 12px
|
||||
background-color #00bf5c
|
||||
color #fff
|
||||
height 18px
|
||||
.editor-live-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding: 0 4px 0 20px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
background-color: #00bf5c;
|
||||
color: #fff;
|
||||
height: 18px;
|
||||
|
||||
&::before
|
||||
content ""
|
||||
position absolute
|
||||
left 7px
|
||||
top 6px
|
||||
width 6px
|
||||
height 6px
|
||||
border-radius 50%
|
||||
background-color #fff
|
||||
box-shadow 0 0 0 0 rgba(255, 255, 255, 1)
|
||||
animation pulse 2s infinite
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 6px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-error
|
||||
position absolute
|
||||
bottom 16px
|
||||
right 16px
|
||||
left 16px
|
||||
cursor pointer
|
||||
transition all 0.3s
|
||||
.editor-error {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover
|
||||
opacity 0.8
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-error-enter
|
||||
.editor-error-leave-to
|
||||
opacity 0
|
||||
transform translateY(10px)
|
||||
.editor-error-enter, .editor-error-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
@keyframes pulse
|
||||
0%
|
||||
transform scale(0.95)
|
||||
box-shadow 0 0 0 0 rgba(255, 255, 255, 0.9)
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
70%
|
||||
transform scale(1)
|
||||
box-shadow 0 0 0 12px rgba(255, 255, 255, 0)
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100%
|
||||
transform scale(0.95)
|
||||
box-shadow 0 0 0 0 rgba(255, 255, 255, 0)
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.veui-button[ui~="icon"][ui~="reverse"]
|
||||
color #ebedf5
|
||||
.veui-button[ui~='icon'][ui~='reverse'] {
|
||||
color: #ebedf5;
|
||||
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
color #f6f7fa
|
||||
&:hover, &[data-focus-visible-added] {
|
||||
color: #f6f7fa;
|
||||
}
|
||||
|
||||
&:active
|
||||
color #fff
|
||||
&:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,124 +1,95 @@
|
||||
<template>
|
||||
<nav
|
||||
v-outside="collapseMenu"
|
||||
class="one-nav"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<header>
|
||||
<h2>VEUI</h2>
|
||||
<section class="desc">
|
||||
<a href="https://github.com/ecomfe/veui">
|
||||
<img
|
||||
alt="VEUI on GitHub"
|
||||
src="https://img.shields.io/github/stars/ecomfe/veui?label=stars&logo=github"
|
||||
height="20"
|
||||
>
|
||||
</a>
|
||||
<nuxt-link
|
||||
:class="{
|
||||
'locale-swith': true,
|
||||
disabled: altLocale.disabled,
|
||||
}"
|
||||
:to="altLocale.disabled ? '' : altLocale.to"
|
||||
>
|
||||
{{ altLocale.label }}
|
||||
</nuxt-link>
|
||||
</section>
|
||||
<section class="search">
|
||||
<one-search/>
|
||||
</section>
|
||||
<div
|
||||
class="toggle"
|
||||
@click="toggleMenu"
|
||||
<nav v-outside="collapseMenu" class="one-nav" :class="{ expanded }">
|
||||
<header>
|
||||
<h2>{{ Config.app_name }}</h2>
|
||||
|
||||
<section class="search">
|
||||
<one-search />
|
||||
</section>
|
||||
<div class="toggle" @click="toggleMenu">
|
||||
<veui-icon class="expanded-icon" name="chevron-left" />
|
||||
<veui-icon class="collapsed-icon" name="hamburger" />
|
||||
</div>
|
||||
</header>
|
||||
<veui-menu
|
||||
class="one-menu"
|
||||
:items="menuItems"
|
||||
:expanded.sync="menuExpanded"
|
||||
>
|
||||
<veui-icon
|
||||
class="expanded-icon"
|
||||
name="chevron-left"
|
||||
/>
|
||||
<veui-icon
|
||||
class="collapsed-icon"
|
||||
name="hamburger"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<veui-menu
|
||||
class="one-menu"
|
||||
:items="menuItems"
|
||||
:expanded.sync="menuExpanded"
|
||||
>
|
||||
<template #item-label="{ label, sub }">
|
||||
{{ label }}<small>{{ sub }}</small>
|
||||
</template>
|
||||
</veui-menu>
|
||||
</nav>
|
||||
<template #item-label="{ label, sub }">
|
||||
{{ label }}<small>{{ sub }}</small>
|
||||
</template>
|
||||
</veui-menu>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '../common/i18n'
|
||||
import OneSearch from './OneSearch'
|
||||
import { Menu, Icon } from 'veui'
|
||||
import outside from 'veui/directives/outside'
|
||||
import 'veui-theme-dls-icons/hamburger'
|
||||
import 'veui-theme-dls-icons/chevron-left'
|
||||
|
||||
import i18n from "../common/i18n";
|
||||
import OneSearch from "./OneSearch";
|
||||
import { Menu, Icon } from "veui";
|
||||
import outside from "veui/directives/outside";
|
||||
import "veui-theme-dls-icons/hamburger";
|
||||
import "veui-theme-dls-icons/chevron-left";
|
||||
import Config from "../env";
|
||||
export default {
|
||||
name: 'one-menu',
|
||||
name: "one-menu",
|
||||
directives: {
|
||||
outside
|
||||
outside,
|
||||
},
|
||||
components: {
|
||||
'one-search': OneSearch,
|
||||
'veui-menu': Menu,
|
||||
'veui-icon': Icon
|
||||
"one-search": OneSearch,
|
||||
"veui-menu": Menu,
|
||||
"veui-icon": Icon,
|
||||
},
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
expanded: Boolean,
|
||||
nav: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
menuExpanded: []
|
||||
}
|
||||
Config,
|
||||
menuExpanded: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
altLocale () {
|
||||
let { canonicalPath, locale, getLocalePath, isPathDisabled } = this
|
||||
let altLocale = locale === 'zh-Hans' ? 'en-US' : 'zh-Hans'
|
||||
let label = locale === 'zh-Hans' ? 'English' : '中文'
|
||||
let disabled = isPathDisabled(canonicalPath, altLocale)
|
||||
altLocale() {
|
||||
let { canonicalPath, locale, getLocalePath, isPathDisabled } = this;
|
||||
let altLocale = locale === "zh-Hans" ? "en-US" : "zh-Hans";
|
||||
let label = locale === "zh-Hans" ? "English" : "中文";
|
||||
let disabled = isPathDisabled(canonicalPath, altLocale);
|
||||
return {
|
||||
to: disabled ? '' : getLocalePath(canonicalPath, altLocale),
|
||||
to: disabled ? "" : getLocalePath(canonicalPath, altLocale),
|
||||
disabled,
|
||||
label
|
||||
}
|
||||
label,
|
||||
};
|
||||
},
|
||||
menuItems() {
|
||||
return this.nav.map((item) => this.normalizeItem(item));
|
||||
},
|
||||
menuItems () {
|
||||
return this.nav.map(item => this.normalizeItem(item))
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.menuExpanded = this.menuItems.map(({ name }) => name)
|
||||
created() {
|
||||
this.menuExpanded = this.menuItems.map(({ name }) => name);
|
||||
},
|
||||
methods: {
|
||||
getTitleDetail (title) {
|
||||
let [main, sub] = title.split(' - ')
|
||||
return [main, sub]
|
||||
getTitleDetail(title) {
|
||||
let [main, sub] = title.split(" - ");
|
||||
return [main, sub];
|
||||
},
|
||||
isActive (path) {
|
||||
let { route = {} } = this.$router.resolve(path) || {}
|
||||
return route.name === this.$route.name
|
||||
isActive(path) {
|
||||
let { route = {} } = this.$router.resolve(path) || {};
|
||||
return route.name === this.$route.name;
|
||||
},
|
||||
normalizeItem ({ title, children, slug, link, disabled }, base = '') {
|
||||
const fullSlug = `${base}/${slug}`
|
||||
const localePath = this.getLocalePath(fullSlug)
|
||||
const to = (link !== false && fullSlug && !disabled) ? localePath : null
|
||||
const [main, sub] = this.getTitleDetail(title)
|
||||
normalizeItem({ title, children, slug, link, disabled }, base = "") {
|
||||
const fullSlug = `${base}/${slug}`;
|
||||
const localePath = this.getLocalePath(fullSlug);
|
||||
const to = link !== false && fullSlug && !disabled ? localePath : null;
|
||||
const [main, sub] = this.getTitleDetail(title);
|
||||
|
||||
return {
|
||||
label: main,
|
||||
@@ -126,149 +97,175 @@ export default {
|
||||
to,
|
||||
name: fullSlug,
|
||||
disabled,
|
||||
children: children ? children.map(child => this.normalizeItem(child, fullSlug)) : []
|
||||
}
|
||||
children: children
|
||||
? children.map((child) => this.normalizeItem(child, fullSlug))
|
||||
: [],
|
||||
};
|
||||
},
|
||||
toggleMenu () {
|
||||
this.$emit('toggle', !this.expanded)
|
||||
toggleMenu() {
|
||||
this.$emit("toggle", !this.expanded);
|
||||
},
|
||||
collapseMenu () {
|
||||
this.$emit('toggle', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
collapseMenu() {
|
||||
this.$emit("toggle", false);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.one-nav
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
display flex
|
||||
flex-direction column
|
||||
width 280px
|
||||
z-index 1
|
||||
background-color #fff
|
||||
.one-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
|
||||
header
|
||||
padding 32px 20px 20px
|
||||
flex none
|
||||
header {
|
||||
padding: 32px 20px 20px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
h2
|
||||
display flex
|
||||
align-items center
|
||||
margin 0 0 16px
|
||||
font-size 20px
|
||||
font-weight 500
|
||||
h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 16px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
||||
a
|
||||
display block
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& + .desc
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 20px
|
||||
& + .desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img
|
||||
display block
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.locale-swith
|
||||
display block
|
||||
margin-left 12px
|
||||
padding 0 6px
|
||||
border 1px solid #dbdbdb
|
||||
border-radius 3px
|
||||
line-height 18px
|
||||
font-size 12px
|
||||
text-align center
|
||||
text-decoration none
|
||||
transition all 0.2s
|
||||
.locale-swith {
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 3px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover
|
||||
border-color #999
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.search
|
||||
margin-top 16px
|
||||
margin-right 12px
|
||||
flex-shrink 0
|
||||
.search {
|
||||
margin-top: 16px;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.one-menu
|
||||
flex 1 1 auto
|
||||
width 100%
|
||||
overflow auto
|
||||
background-color #fff
|
||||
.one-menu {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
|
||||
& >>> .DocSearch
|
||||
margin 0
|
||||
border-radius 6px
|
||||
font inherit
|
||||
& >>> .DocSearch {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
small
|
||||
margin-left 8px
|
||||
opacity 0.7
|
||||
small {
|
||||
margin-left: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle
|
||||
display none
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disabled
|
||||
opacity 0.3
|
||||
pointer-events none
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width 480px)
|
||||
.one-nav
|
||||
z-index 20
|
||||
transition transform 0.3s, box-shadow 0.3s
|
||||
transform translateX(-100%)
|
||||
@media (max-width: 480px) {
|
||||
.one-nav {
|
||||
z-index: 20;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
transform: translateX(-100%);
|
||||
|
||||
&.expanded
|
||||
transform translateX(0)
|
||||
box-shadow 0 0 48px rgba(0, 0, 0, 0.2)
|
||||
&.expanded {
|
||||
transform: translateX(0);
|
||||
box-shadow: 0 0 48px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
header
|
||||
position relative
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
width 36px
|
||||
height 36px
|
||||
position absolute
|
||||
top 80px
|
||||
left 100%
|
||||
border 1px solid #e2e6f0
|
||||
border-top-right-radius 4px
|
||||
border-bottom-right-radius 4px
|
||||
background-color #fff
|
||||
box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
|
||||
font-size 20px
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100%;
|
||||
border: 1px solid #e2e6f0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||||
font-size: 20px;
|
||||
|
||||
&::before
|
||||
content ""
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left -19px
|
||||
width 20px
|
||||
background-color #fff
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -19px;
|
||||
width: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-icon
|
||||
.collapsed-icon
|
||||
position absolute
|
||||
transition transform 0.3s, opacity 0.3s
|
||||
.expanded-icon, .collapsed-icon {
|
||||
position: absolute;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.expanded-icon
|
||||
margin-left -4px
|
||||
opacity 0
|
||||
transform translateX(-10px)
|
||||
.expanded-icon {
|
||||
margin-left: -4px;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
|
||||
.expanded &
|
||||
opacity 1
|
||||
transform none
|
||||
.expanded & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed-icon
|
||||
.expanded &
|
||||
opacity 0
|
||||
transform translateX(10px)
|
||||
.collapsed-icon {
|
||||
.expanded & {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,136 +1,134 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<article class="repl">
|
||||
<header class="header">
|
||||
<h1>{{ t('liveEdit') }}</h1>
|
||||
<section class="actions">
|
||||
<veui-button
|
||||
v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
|
||||
ui="strong icon xl"
|
||||
@click="handleToggle"
|
||||
>
|
||||
<veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="strong text"
|
||||
@click="handleClose"
|
||||
>
|
||||
{{ t('exit') }}
|
||||
</veui-button>
|
||||
</section>
|
||||
</header>
|
||||
<one-live
|
||||
class="editor"
|
||||
:code="code"
|
||||
:browser="browser"
|
||||
/>
|
||||
</article>
|
||||
<article class="repl">
|
||||
<header class="header">
|
||||
<h1>实时编辑</h1>
|
||||
<section class="actions">
|
||||
<!-- <veui-button
|
||||
v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
|
||||
ui="strong icon xl"
|
||||
@click="handleToggle"
|
||||
>
|
||||
<veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'" />
|
||||
</veui-button> -->
|
||||
<veui-button ui="strong text" @click="handleClose"> 退出 </veui-button>
|
||||
</section>
|
||||
</header>
|
||||
<one-live class="editor" :code="code" :browser="browser" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Loading, Icon } from 'veui'
|
||||
import tooltip from 'veui/directives/tooltip'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import { Button, Loading, Icon } from "veui";
|
||||
import tooltip from "veui/directives/tooltip";
|
||||
import i18n from "veui/mixins/i18n";
|
||||
|
||||
export default {
|
||||
name: 'one-repl',
|
||||
name: "one-repl",
|
||||
directives: {
|
||||
tooltip
|
||||
tooltip,
|
||||
},
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon,
|
||||
'one-live': () => ({
|
||||
component: import('./OneLive'),
|
||||
"veui-button": Button,
|
||||
"veui-icon": Icon,
|
||||
"one-live": () => ({
|
||||
component: import("./OneLive"),
|
||||
loading: {
|
||||
inheritAttrs: false,
|
||||
render (h) {
|
||||
render(h) {
|
||||
return h(Loading, {
|
||||
props: {
|
||||
loading: true,
|
||||
ui: 'strong'
|
||||
ui: "strong",
|
||||
},
|
||||
class: 'loading'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
class: "loading",
|
||||
});
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
expanded: Boolean,
|
||||
browser: Boolean
|
||||
browser: Boolean,
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$emit('close')
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
handleToggle () {
|
||||
this.$emit('toggle', !this.expanded)
|
||||
}
|
||||
}
|
||||
}
|
||||
handleToggle() {
|
||||
this.$emit("toggle", !this.expanded);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Icon.register({
|
||||
'one-repl-shrink': {
|
||||
"one-repl-shrink": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z'
|
||||
d: "M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z",
|
||||
},
|
||||
'one-repl-expand': {
|
||||
"one-repl-expand": {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z'
|
||||
}
|
||||
})
|
||||
d: "M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.repl
|
||||
display flex
|
||||
flex-direction column
|
||||
.repl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header
|
||||
display flex
|
||||
align-items center
|
||||
flex none
|
||||
height 48px
|
||||
padding 0 24px
|
||||
box-shadow 0 0 4px #0006
|
||||
position relative
|
||||
z-index 1
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 0 4px #0006;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
h1
|
||||
flex none
|
||||
margin 0
|
||||
font-size 16px
|
||||
h1 {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.actions
|
||||
display flex
|
||||
justify-content flex-end
|
||||
flex 1 1 auto
|
||||
gap 24px
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 auto;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor:not(.loading)
|
||||
position relative
|
||||
flex 1 1 auto
|
||||
height calc(100% - 48px)
|
||||
.editor:not(.loading) {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
& >>> .live-preview
|
||||
padding 24px 36px
|
||||
& >>> .live-preview {
|
||||
padding: 24px 36px;
|
||||
}
|
||||
|
||||
& >>> .VueLive-error
|
||||
display none
|
||||
& >>> .VueLive-error {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loading
|
||||
position absolute
|
||||
top 40vh
|
||||
left 50%
|
||||
transform translateX(-50%)
|
||||
font-size 40px
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 40vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user