Add layout

Author: sheepzh

src/guide/components/common/header.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@guide/locale"
+import { defineComponent, h } from "vue"
+
+const _default = defineComponent({
+    name: "Header",
+    render() {
+        return h('div', {
+            class: 'guide-header-container'
+        }, h('h1', {
+            class: 'guide-header'
+        }, t(msg => msg.layout.header)))
+    }
+})
+
+export default _default

src/guide/components/home/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent, h } from "vue"
+
+const _default = defineComponent({
+    name: 'Home',
+    render() {
+        return h('div')
+    }
+})
+
+export default _default

src/guide/index.ts

@@ -13,6 +13,7 @@ import { initLocale, locale as appLocale } from "@util/i18n"
 import { init as initTheme } from "@util/dark-mode"
 import { createApp } from "vue"
 import Main from "./layout"
+import installRouter from './router'
 import ElementPlus from 'element-plus'
 
 
@@ -28,8 +29,9 @@ async function main() {
     await initLocale()
 
     const app = createApp(Main)
-    app.mount('#app')
+    installRouter(app)
+    app.mount('#guide')
     locales[appLocale]?.()?.then(locale => app.use(ElementPlus, { locale: locale.default }))
 }
 
-main()
+main()

src/guide/layout/index.ts

@@ -5,10 +5,19 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { defineComponent } from "vue"
+import { ElContainer } from "element-plus"
+import { defineComponent, h } from "vue"
+import { RouterView } from "vue-router"
+import Header from "../components/common/header"
 
 const _default = defineComponent({
-    name: "Guide"
+    name: "Guide",
+    render() {
+        return h(ElContainer, { class: 'guide-container' }, () => [
+            h(Header),
+            h(RouterView)
+        ])
+    }
 })
 
 export default _default

src/guide/locale/components/layout.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Messages } from "@util/i18n"
+import appMessages from "@util/i18n/components/app"
+
+export type LayoutMessage = {
+    header: string
+}
+
+const _default: Messages<LayoutMessage> = {
+    zh_CN: {
+        header: appMessages.zh_CN.marketName
+    },
+    zh_TW: {
+        header: appMessages.zh_TW.marketName
+    },
+    en: {
+        header: appMessages.en.marketName
+    },
+    ja: {
+        header: appMessages.ja.marketName
+    }
+}
+
+export default _default

src/guide/locale/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { I18nKey as _I18nKey, locale, t as _t } from "@util/i18n"
+import { tN as _tN } from "@util/i18n/i18n-vue"
+import messages, { GuideMessage } from "./messages"
+
+export type I18nKey = _I18nKey<GuideMessage>
+
+export function t(key: I18nKey, param?: any) {
+    const props = { key, param }
+    return _t<GuideMessage>(messages[locale], props)
+}

src/guide/locale/messages.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Messages } from "@util/i18n"
+import layoutMessages, { LayoutMessage } from "./components/layout"
+
+export type GuideMessage = {
+    layout: LayoutMessage
+}
+
+const _default: Messages<GuideMessage> = {
+    zh_CN: {
+        layout: layoutMessages.zh_CN
+    },
+    zh_TW: {
+        layout: layoutMessages.zh_TW
+    },
+    en: {
+        layout: layoutMessages.en
+    },
+    ja: {
+        layout: layoutMessages.ja
+    },
+}
+
+export default _default

src/guide/router.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { App } from "vue"
+import type { RouteRecordRaw } from "vue-router"
+
+import { createRouter, createWebHashHistory } from "vue-router"
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        redirect: '/home'
+    }, {
+        path: '/home',
+        component: () => import('./components/home')
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+})
+
+export default (app: App) => {
+    app.use(router)
+}

src/guide/style.sass

@@ -5,5 +5,17 @@
  * https://opensource.org/licenses/MIT
  */
 
-.guide
+#guide
+    display: flex
+    height: 100vh
     width: 100%
+    .guide-container
+        display: flex
+        width: 100%
+        .guide-header-container
+            display: flex
+            width: 100%
+            text-align: center
+            .guide-header
+                width: 100%
+                font-size: 30px

tsconfig.json

@@ -15,6 +15,9 @@
             "@popup/*": [
                 "src/popup/*"
             ],
+            "@guide/*": [
+                "src/guide/*"
+            ],
             "@db/*": [
                 "src/database/*"
             ],