Skip to content

Commit

Permalink
添加设置按钮和设置折叠控件
Browse files Browse the repository at this point in the history
  • Loading branch information
@wherewhere
wherewhere committed Jul 10, 2024
1 parent 847301c commit b29c313
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 67 deletions.
150 changes: 87 additions & 63 deletions source/tools/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,58 +39,47 @@ sitemap: false
{% raw %}
<div id="vue-app">
<div class="stack-vertical" style="row-gap: 0.3rem;">
<fluent-accordion style="width: 100%;">
<fluent-accordion-item>
<div slot="heading">
<settings-presenter style="padding: var(--settings-expander-header-padding);">
<template #icon>
<svg-host
src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/calendar_date_20_regular.svg"></svg-host>
</template>
<template #header>
<h4 class="unset">时间戳转换</h4>
</template>
<template #description>
转换 Unix 时间戳与时间字符串。
</template>
</settings-presenter>
</div>
<div class="setting-expander-content-grid">
<div class="stack-vertical">
<div class="stack-horizontal">
<fluent-number-field v-model="timeStamp" style="flex: 1;"></fluent-number-field>
<fluent-button @click="convertTimeStamp">转换时间戳</fluent-button>
</div>
<div class="stack-horizontal">
<fluent-text-field v-model="timeString" style="flex: 1;"></fluent-text-field>
<fluent-button @click="convertTimeString">转换时间</fluent-button>
</div>
<div class="stack-horizontal" style="justify-content: space-between;">
<fluent-button @click="setDateTimeNow">当前时间</fluent-button>
<fluent-switch ref="isMillisecond">时间戳是否为毫秒</fluent-switch>
</div>
<settings-expander>
<template #icon>
<svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/calendar_date_20_regular.svg"></svg-host>
</template>
<template #header>
<h4 class="unset">时间戳转换</h4>
</template>
<template #description>
转换 Unix 时间戳与时间字符串。
</template>
<div class="setting-expander-content-grid">
<div class="stack-vertical">
<div class="stack-horizontal">
<fluent-number-field v-model="timeStamp" style="flex: 1;"></fluent-number-field>
<fluent-button @click="convertTimeStamp">转换时间戳</fluent-button>
</div>
<div class="stack-horizontal">
<fluent-text-field v-model="timeString" style="flex: 1;"></fluent-text-field>
<fluent-button @click="convertTimeString">转换时间</fluent-button>
</div>
<div class="stack-horizontal" style="justify-content: space-between;">
<fluent-button @click="setDateTimeNow">当前时间</fluent-button>
<fluent-switch ref="isMillisecond">时间戳是否为毫秒</fluent-switch>
</div>
</div>
</fluent-accordion-item>
</fluent-accordion>
<fluent-card class="settings-button" @click="() => navigate('./markdown')" style="cursor: pointer;">
<div class="content-grid">
<settings-presenter style="padding: var(--settings-button-padding);">
<template #icon>
<svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/markdown_20_regular.svg"></svg-host>
</template>
<template #header>
<h4 class="unset">Markdown 预览</h4>
</template>
<template #description>
使用 Marked.JS 解析并预览 Markdown 文本。
</template>
</settings-presenter>
<div class="action-icon-holder">
<svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/chevron_right_12_regular.svg"></svg-host>
</div>
</div>
</fluent-card>
</settings-expander>
<settings-button @click="() => navigate('./markdown')">
<template #icon>
<svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/markdown_20_regular.svg"></svg-host>
</template>
<template #header>
<h4 class="unset">Markdown 预览</h4>
</template>
<template #description>
使用 Marked.JS 解析并预览 Markdown 文本。
</template>
<template #action-icon>
<svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/chevron_right_12_regular.svg"></svg-host>
</template>
</settings-button>
</div>
</div>

Expand All @@ -114,6 +103,50 @@ sitemap: false
</div>
</div>
</template>

<template id="settings-button-template">
<fluent-card class="settings-button" style="cursor: pointer;">
<div class="content-grid">
<settings-presenter style="padding: var(--settings-button-padding);">
<template #icon>
<slot name="icon"></slot>
</template>
<template #header>
<slot name="header"></slot>
</template>
<template #description>
<slot name="description"></slot>
</template>
<slot></slot>
</settings-presenter>
<div class="action-icon-holder">
<slot name="action-icon"></slot>
</div>
</div>
</fluent-card>
</template>

<template id="settings-expander-template">
<fluent-accordion class="settings-expander" style="width: 100%;">
<fluent-accordion-item>
<div slot="heading">
<settings-presenter style="padding: var(--settings-expander-header-padding);">
<template #icon>
<slot name="icon"></slot>
</template>
<template #header>
<slot name="header"></slot>
</template>
<template #description>
<slot name="description"></slot>
</template>
<slot name="action-content"></slot>
</settings-presenter>
</div>
<slot></slot>
</fluent-accordion-item>
</fluent-accordion>
</template>
{% endraw %}

<script type="module" data-pjax>
Expand Down Expand Up @@ -151,6 +184,10 @@ sitemap: false
}
}).component("settings-presenter", {
template: "#settings-presenter-template"
}).component("settings-button", {
template: "#settings-button-template"
}).component("settings-expander", {
template: "#settings-expander-template"
}).mount("#vue-app");
if (!customElements.get("svg-host")) {
async function getSVG(src) {
Expand Down Expand Up @@ -215,19 +252,6 @@ sitemap: false
display: flex;
}

#vue-app .card {
display: block;
contain: content;
height: var(--card-height, 100%);
width: var(--card-width, 100%);
box-sizing: border-box;
background: var(--fill-color);
color: var(--neutral-foreground-rest);
border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-layer-rest);
border-radius: calc(var(--layer-corner-radius)* 1px);
box-shadow: var(--elevation-shadow-card-rest);
}

#vue-app .stack-vertical {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -354,7 +378,7 @@ sitemap: false
fill: currentColor;
}

div.setting-expander-content-grid {
.settings-expander div.setting-expander-content-grid {
padding: var(--settings-expander-item-padding);
}
</style>
9 changes: 5 additions & 4 deletions source/tools/markdown/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ sitemap: false
---
<div class="split-view">
<div id="container"></div>
<fluent-card class="perview-card markdown-body">
<fluent-card class="perview-card markdown-body monaco-component">
<div id="perview"></div>
</fluent-card>
</div>
Expand Down Expand Up @@ -43,9 +43,9 @@ sitemap: false
if (typeof matchMedia === "function") {
const scheme = window.matchMedia("(prefers-color-scheme: dark)");
if (typeof scheme !== "undefined") {
scheme.addListener(e =>{
monaco.editor.setTheme(e.matches ? "vs-dark" : "vs");
baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode)
scheme.addListener(e => {
monaco.editor.setTheme(e.matches ? "vs-dark" : "vs");
baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode)
});
if (scheme.matches) {
monaco.editor.setTheme("vs-dark");
Expand Down Expand Up @@ -95,6 +95,7 @@ sitemap: false
flex: 1;
height: auto;
padding: 16px;
background: var(--vscode-editor-background);
}

@media (max-width: 767px) {
Expand Down

0 comments on commit b29c313

Please sign in to comment.