Add normal
This commit is contained in:
Methapon2001
parent
7671a71141
commit
607f28ee0e
8 changed files with 365 additions and 73 deletions
1
public/build-and-deploy.md
Normal file
1
public/build-and-deploy.md
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# Build and Deploy
|
||||||
1
public/debug.md
Normal file
1
public/debug.md
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# Debug
|
||||||
14
public/pages.json
Normal file
14
public/pages.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"icon": "mdi-file-outline",
|
||||||
|
"activeIcon": "mdi-file",
|
||||||
|
"label": "การตรวจสอบและแก้ไขปัญหา",
|
||||||
|
"path": "/debug"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "mdi-file-outline",
|
||||||
|
"activeIcon": "mdi-file",
|
||||||
|
"label": "Build and Deploy",
|
||||||
|
"path": "/build-and-deploy"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -25,7 +25,7 @@ const active = ref("");
|
||||||
|
|
||||||
function onScroll() {
|
function onScroll() {
|
||||||
let current = "";
|
let current = "";
|
||||||
document.querySelectorAll("h2,h3").forEach((v) => {
|
document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
|
||||||
if (
|
if (
|
||||||
window.top &&
|
window.top &&
|
||||||
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
||||||
|
|
|
||||||
263
src/modules/02_pages/MainPage.vue
Normal file
263
src/modules/02_pages/MainPage.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, ref } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import MarkdownIt, { type Token } from "markdown-it";
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
import mditFigureWithPCaption from "markdown-it-image-figures";
|
||||||
|
import mditAnchor from "markdown-it-anchor";
|
||||||
|
import { useManualStore } from "@/stores/manual";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
|
||||||
|
const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
|
||||||
|
figcaption: "alt",
|
||||||
|
});
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const manual = useManualStore();
|
||||||
|
const { toc } = storeToRefs(manual);
|
||||||
|
|
||||||
|
const text = ref("");
|
||||||
|
const parsed = ref<Token[]>([]);
|
||||||
|
const chapter = ref(0);
|
||||||
|
const found = ref(false);
|
||||||
|
const active = ref("");
|
||||||
|
|
||||||
|
function onScroll() {
|
||||||
|
let current = "";
|
||||||
|
document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
|
||||||
|
if (
|
||||||
|
window.top &&
|
||||||
|
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
||||||
|
) {
|
||||||
|
current = v.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
active.value = current;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onResize() {
|
||||||
|
if (window.innerWidth > 1024) {
|
||||||
|
toc.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function scrollTo(id: string) {
|
||||||
|
const pos = document.getElementById(id)?.offsetTop;
|
||||||
|
await nextTick(() => {
|
||||||
|
if (window.innerWidth < 1024) toc.value = false;
|
||||||
|
});
|
||||||
|
if (pos)
|
||||||
|
window.scrollTo({
|
||||||
|
top: pos,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
window.addEventListener("scroll", onScroll);
|
||||||
|
window.addEventListener("resize", onResize);
|
||||||
|
|
||||||
|
if (typeof route.params.name === "string") {
|
||||||
|
const res = await fetch(`/${route.params.name}.md`);
|
||||||
|
if (res && res.ok) {
|
||||||
|
text.value = await res.text();
|
||||||
|
found.value = true;
|
||||||
|
parsed.value = md.parse(text.value, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener("scroll", onScroll);
|
||||||
|
window.removeEventListener("resize", onResize);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="found" style="display: flex" class="markdown">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid #e1e1e9;
|
||||||
|
padding: 1rem;
|
||||||
|
"
|
||||||
|
v-html="md.render(text.replaceAll('images/', '/images/'))"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-drawer
|
||||||
|
v-if="toc"
|
||||||
|
side="right"
|
||||||
|
class="bg-grey-2"
|
||||||
|
show-if-above
|
||||||
|
v-model="toc"
|
||||||
|
:width="250"
|
||||||
|
:behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'"
|
||||||
|
>
|
||||||
|
<q-scroll-area class="fit">
|
||||||
|
<q-list padding>
|
||||||
|
<template v-for="(token, idx) in parsed">
|
||||||
|
<q-item
|
||||||
|
class="tabNative"
|
||||||
|
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||||
|
:active="active === token.attrGet('id')"
|
||||||
|
@click="scrollTo(token.attrGet('id') || '')"
|
||||||
|
v-if="token.tag === 'h2' && token.type === 'heading_open'"
|
||||||
|
clickable
|
||||||
|
v-ripple
|
||||||
|
dense
|
||||||
|
exact
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<q-icon size="11px" name="mdi-circle-medium" />
|
||||||
|
<span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
v-if="token.tag === 'h3' && token.type === 'heading_open'"
|
||||||
|
class="tabNative child-tab"
|
||||||
|
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||||
|
:active="active === token.attrGet('id')"
|
||||||
|
@click="scrollTo(token.attrGet('id') || '')"
|
||||||
|
clickable
|
||||||
|
v-ripple
|
||||||
|
dense
|
||||||
|
exact
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<span class="q-pl-xl">{{ parsed[idx + 1].content }}</span>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-list>
|
||||||
|
</q-scroll-area>
|
||||||
|
</q-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.toc {
|
||||||
|
top: 4rem;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.markdown {
|
||||||
|
counter-set: h1 v-bind(chapter);
|
||||||
|
counter-reset: h1;
|
||||||
|
}
|
||||||
|
.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-block: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1) {
|
||||||
|
counter-reset: h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2) {
|
||||||
|
counter-reset: h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h3) {
|
||||||
|
counter-reset: h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1:before) {
|
||||||
|
counter-increment: h1;
|
||||||
|
content: counter(h1) ". ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2:before) {
|
||||||
|
counter-increment: h2;
|
||||||
|
content: counter(h1) "." counter(h2) " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h3:before) {
|
||||||
|
counter-increment: h3;
|
||||||
|
content: counter(h1) "." counter(h2) "." counter(h3) " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h4:before) {
|
||||||
|
counter-increment: h4;
|
||||||
|
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(blockquote) {
|
||||||
|
background-color: #ecebeb;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(blockquote > p:last-child) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(img) {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(p img) {
|
||||||
|
padding-inline: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figure) {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figure img) {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(p:has(img:only-child) img) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(.abc) {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1) {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-inline: -1rem;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
background-color: #ecebeb;
|
||||||
|
border-radius: 8px 8px 0px 0px;
|
||||||
|
padding: 0px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figcaption) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2) {
|
||||||
|
text-align: left;
|
||||||
|
margin-block: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0px 16px;
|
||||||
|
color: #02a998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h3) {
|
||||||
|
text-align: left;
|
||||||
|
margin-block: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0px 16px;
|
||||||
|
color: #02a998;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,9 +1,16 @@
|
||||||
import type { RouteRecordRaw } from "vue-router";
|
import type { RouteRecordRaw } from "vue-router";
|
||||||
|
|
||||||
export default [
|
const route: RouteRecordRaw[] = [
|
||||||
{
|
{
|
||||||
path: "/manual/:name",
|
path: "/manual/:name",
|
||||||
name: "Manual",
|
name: "Manual",
|
||||||
component: () => import("@/modules/01_manual/MainPage.vue"),
|
component: () => import("@/modules/01_manual/MainPage.vue"),
|
||||||
},
|
},
|
||||||
] satisfies RouteRecordRaw[];
|
{
|
||||||
|
path: "/:name",
|
||||||
|
name: "Pages",
|
||||||
|
component: () => import("@/modules/02_pages/MainPage.vue"),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default route;
|
||||||
|
|
@ -1,79 +1,79 @@
|
||||||
import { createRouter, createWebHistory } from "vue-router"
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
|
||||||
const MainLayout = () => import("@/views/MainLayout.vue")
|
const MainLayout = () => import("@/views/MainLayout.vue");
|
||||||
const Dashboard = () => import("@/views/Dashboard.vue")
|
const Dashboard = () => import("@/views/Dashboard.vue");
|
||||||
const Error404NotFound = () => import("@/views/Error404NotFound.vue")
|
const Error404NotFound = () => import("@/views/Error404NotFound.vue");
|
||||||
|
|
||||||
import ModuleManual from "@/modules/01_manual/router"
|
import ModuleManual from "@/modules/router";
|
||||||
|
|
||||||
// TODO: ใช้หรือไม่?
|
// TODO: ใช้หรือไม่?
|
||||||
// import keycloak from "@/plugins/keycloak"
|
// import keycloak from "@/plugins/keycloak"
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "home",
|
name: "home",
|
||||||
component: MainLayout,
|
component: MainLayout,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "dashboard",
|
name: "dashboard",
|
||||||
component: Dashboard,
|
component: Dashboard,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7],
|
Key: [7],
|
||||||
Role: "dashboard",
|
Role: "dashboard",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
...ModuleManual,
|
...ModuleManual,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 404 Not Found
|
* 404 Not Found
|
||||||
* ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
|
* ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
|
||||||
*/
|
*/
|
||||||
{
|
{
|
||||||
// path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
|
// path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
|
||||||
path: "/:pathMatch(.*)*",
|
path: "/:pathMatch(.*)*",
|
||||||
component: Error404NotFound,
|
component: Error404NotFound,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
if (savedPosition) {
|
if (savedPosition) {
|
||||||
return savedPosition
|
return savedPosition;
|
||||||
} else if (to.hash) {
|
} else if (to.hash) {
|
||||||
return {
|
return {
|
||||||
el: to.hash,
|
el: to.hash,
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
// if (to.meta.Auth) {
|
// if (to.meta.Auth) {
|
||||||
// if (!keycloak.authenticated) {
|
// if (!keycloak.authenticated) {
|
||||||
// keycloak.login({
|
// keycloak.login({
|
||||||
// redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
|
// redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
|
||||||
// locale: "th",
|
// locale: "th",
|
||||||
// })
|
// })
|
||||||
// } else {
|
// } else {
|
||||||
// // keycloak.updateToken(60);
|
// // keycloak.updateToken(60);
|
||||||
// const role = keycloak.tokenParsed?.role
|
// const role = keycloak.tokenParsed?.role
|
||||||
// if (role.includes(to.meta.Role)) {
|
// if (role.includes(to.meta.Role)) {
|
||||||
// next()
|
// next()
|
||||||
// } else {
|
// } else {
|
||||||
// next({ path: "" })
|
// next({ path: "" })
|
||||||
// // next();
|
// // next();
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// } else {
|
// } else {
|
||||||
// next()
|
// next()
|
||||||
// }
|
// }
|
||||||
next()
|
next();
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,14 @@ const toggleBtnLeft = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const data = await fetch("/toc.json").then((r) => r.json());
|
{
|
||||||
menuList.value[1].children = data;
|
const data = await fetch("/toc.json").then((r) => r.json());
|
||||||
|
menuList.value[1].children = data;
|
||||||
|
}
|
||||||
|
{
|
||||||
|
const data = await fetch("/pages.json").then((r) => r.json());
|
||||||
|
menuList.value.push(...data);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const downloadFile = () => {
|
const downloadFile = () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue