init frontend framework

.gitignore

@@ -138,6 +138,9 @@ fabric.properties
 ### node_modules/
 node_modules/
 
+# Node.js Build Target
+dist/
+
 # Visual Studio Code
 .vscode/
 *.code-workspace

Dockerfile

@@ -1,18 +1,24 @@
-# Build binary release
+# Build backend binary file
-FROM golang:1.14.10-alpine3.12 AS builder
+FROM golang:1.14.10-alpine3.12 AS be-builder
 RUN apk add gcc g++ libc-dev
 WORKDIR /go/src/github.com/mayswind/lab
 COPY . .
 RUN GOOS=linux GOARCH=amd64 CGO_ENABLED=1 go build -a -v -i -trimpath -o lab lab.go
 
+# Build frontend files
+FROM node:12.19.0-alpine3.12 AS fe-builder
+WORKDIR /go/src/github.com/mayswind/lab
+COPY . .
+RUN npm install && npm run build
+
 # Package docker image
 FROM alpine:3.12.0
 RUN addgroup -S -g 1000 labapp && adduser -S -G labapp -u 1000 labapp
 RUN apk --no-cache add su-exec tzdata
-COPY --from=builder /go/src/github.com/mayswind/lab/lab /usr/local/bin/labapp/lab
+COPY --from=be-builder /go/src/github.com/mayswind/lab/lab /usr/local/bin/labapp/lab
 RUN chmod +x /usr/local/bin/labapp/lab
+COPY --from=fe-builder /go/src/github.com/mayswind/lab/dist /usr/local/bin/labapp/public
 COPY conf /usr/local/bin/labapp/conf
-COPY public /usr/local/bin/labapp/public
 WORKDIR /usr/local/bin/labapp
 COPY docker/docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ]
+}

cmd/webserver.go

@@ -2,6 +2,7 @@ package cmd
 
 import (
 	"fmt"
+	"net/http"
 	"path/filepath"
 
 	"github.com/gin-contrib/gzip"
@@ -77,8 +78,8 @@ func startWebServer(c *cli.Context) error {
 	router.NoRoute(bindApi(api.Default.ApiNotFound))
 	router.NoMethod(bindApi(api.Default.MethodNotAllowed))
 
-	router.StaticFile("/", filepath.Join(config.StaticRootPath, "index.html"))
+	router.StaticFile("/mobile", filepath.Join(config.StaticRootPath, "mobile.html"))
-	router.StaticFile("login", filepath.Join(config.StaticRootPath, "login.html"))
+	router.StaticFile("/desktop", filepath.Join(config.StaticRootPath, "desktop.html"))
 
 	if config.EnableUserRegister {
 		router.StaticFile("register", filepath.Join(config.StaticRootPath, "register.html"))
@@ -88,8 +89,13 @@ func startWebServer(c *cli.Context) error {
 	router.Static("/js", filepath.Join(config.StaticRootPath, "js"))
 	router.Static("/css", filepath.Join(config.StaticRootPath, "css"))
 	router.Static("/img", filepath.Join(config.StaticRootPath, "img"))
+	router.Static("/fonts", filepath.Join(config.StaticRootPath, "fonts"))
 	router.Static("/lang", filepath.Join(config.StaticRootPath, "lang"))
 
+	router.GET("/", func(c *gin.Context) {
+		c.Redirect(http.StatusMovedPermanently,"/mobile")
+	})
+
 	apiRoute := router.Group("/api")
 
 	apiRoute.Use(bindMiddleware(middlewares.RequestId(config)))

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "lab",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "framework7": "^5.7.13",
+    "framework7-icons": "^3.0.1",
+    "framework7-vue": "^5.7.13",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.22.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

src/common/i18n.js

@@ -0,0 +1,11 @@
+import en from './langs/en.js'
+import zhHans from './langs/zh_Hans.js'
+
+export default {
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+        'en': en,
+        'zh_Hans': zhHans
+    }
+}

src/common/langs/en.js

@@ -0,0 +1,12 @@
+export default {
+    'global': {
+        'app': {
+            'title': 'lightweight account book'
+        }
+    },
+    'Home': 'Home',
+    'Journals': 'Journals',
+    'Accounts': 'Accounts',
+    'Charts': 'Charts',
+    'Settings': 'Settings'
+}

src/common/langs/zh_Hans.js

@@ -0,0 +1,12 @@
+export default {
+    'global': {
+        'app': {
+            'title': 'lab 轻记账'
+        }
+    },
+    'Home': '首页',
+    'Journals': '流水',
+    'Accounts': '账户',
+    'Charts': '图表',
+    'Settings': '设置'
+}

src/desktop/App.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>Not Implemented</div>
+</template>
+
+<script>
+export default {}
+</script>

src/desktop/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+
+import App from './App.vue'
+
+new Vue({
+    el: '#app',
+    render: h => h(App),
+})

src/desktop/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="description" content="lab is a lightweight account book app hosted by yourself.">
+    <title>lab</title>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but lab doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+</body>
+</html>

src/mobile/App.vue

@@ -0,0 +1,22 @@
+<template>
+    <f7-app :params="f7params">
+        <f7-view id="main-view" main url="/" :push-state="true"></f7-view>
+    </f7-app>
+</template>
+
+<script>
+import routes from './router.js';
+
+export default {
+    data() {
+        return {
+            f7params: {
+                name: 'lab',
+                id: 'net.mayswind.lab',
+                theme: 'ios',
+                routes: routes
+            }
+        }
+    }
+}
+</script>

src/mobile/assets/css/custom.css

@@ -0,0 +1,5 @@
+.lab-toolbar-link-with-icon i+span {
+    font-size: 11px;
+    margin-top: 3px;
+    margin-left: 0;
+}

src/mobile/components/Main.vue

@@ -0,0 +1,22 @@
+<template>
+    <f7-page name="home">
+        <f7-navbar :title="$t('global.app.title')"></f7-navbar>
+        <f7-tabs animated swipeable routable>
+            <f7-tab id="main-tab-home" class="page-content" tab-active />
+            <f7-tab id="main-tab-journals" class="page-content" />
+            <f7-tab id="main-tab-accounts" class="page-content" />
+            <f7-tab id="main-tab-charts" class="page-content" />
+        </f7-tabs>
+        <f7-toolbar tabbar bottom>
+            <f7-link route-tab-id="main-tab-home" href="/" class="lab-toolbar-link-with-icon" icon-f7="house" icon-size="24px" :text="$t('Home')" tab-link-active></f7-link>
+            <f7-link route-tab-id="main-tab-journals" href="/journals" class="lab-toolbar-link-with-icon" icon-f7="square_list" icon-size="24px" :text="$t('Journals')"></f7-link>
+            <f7-link route-tab-id="main-tab-accounts" href="/accounts" class="lab-toolbar-link-with-icon" icon-f7="creditcard" icon-size="24px" :text="$t('Accounts')"></f7-link>
+            <f7-link route-tab-id="main-tab-charts" href="/charts" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" icon-size="24px" :text="$t('Charts')"></f7-link>
+            <f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" icon-size="24px" :text="$t('Settings')"></f7-link>
+        </f7-toolbar>
+    </f7-page>
+</template>
+
+<script>
+export default {}
+</script>

src/mobile/components/main/Home.vue

@@ -0,0 +1,5 @@
+<template>
+    <f7-block>
+        <p>home</p>
+    </f7-block>
+</template>

src/mobile/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Framework7 from 'framework7/framework7.esm.bundle.js'
+import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
+import 'framework7/css/framework7.bundle.css'
+import 'framework7-icons';
+import './assets/css/custom.css'
+
+Vue.use(VueI18n)
+Framework7.use(Framework7Vue);
+
+import i18nOptions from '../common/i18n.js';
+import App from './App.vue'
+
+const i18n = new VueI18n(i18nOptions)
+
+new Vue({
+    el: '#app',
+    i18n: i18n,
+    render: h => h(App),
+})

src/mobile/public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-title" content="lab"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
+    <meta name="theme-color" content="#ff6b22">
+    <meta name="msapplication-TileColor" content="#ff6b22">
+    <meta name="msapplication-TileImage" content="tileicon.png">
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="description" content="lab is a lightweight account book app hosted by yourself.">
+    <title>lab</title>
+</head>
+<body class="color-theme-deeporange">
+<noscript>
+    <strong>We're sorry but lab doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+</body>
+</html>

src/mobile/router.js

@@ -0,0 +1,22 @@
+import MainPage from './components/Main.vue'
+import MainPageHomeTab from './components/main/Home.vue'
+
+const router = [
+    {
+        path: '/',
+        component: MainPage,
+        tabs: [
+            {
+                path: '/',
+                id: 'main-tab-home',
+                component: MainPageHomeTab,
+            }
+        ]
+    },
+    {
+        path: '(.*)',
+        redirect: '/'
+    }
+]
+
+export default router

vue.config.js

@@ -0,0 +1,58 @@
+module.exports = {
+    pages: {
+        desktop: {
+            entry: 'src/desktop/main.js',
+            template: 'src/desktop/public/index.html',
+            filename: 'desktop.html',
+            chunks: ['vendors-common-bundle', 'vendors-desktop-bundle', 'common-bundle', 'desktop']
+        },
+        mobile: {
+            entry: 'src/mobile/main.js',
+            template: 'src/mobile/public/index.html',
+            filename: 'mobile.html',
+            chunks: ['vendors-common-bundle', 'vendors-mobile-bundle', 'common-bundle', 'mobile']
+        }
+    },
+    publicPath: '',
+    productionSourceMap: false,
+    chainWebpack: config => {
+        config.optimization.splitChunks({
+            cacheGroups: {
+                'vendors-common-bundle': {
+                    name: 'vendors-common-bundle',
+                    test: /[\\/]node_modules[\\/]/,
+                    chunks: 'initial',
+                    priority: 10,
+                    minChunks: 2
+                },
+                'vendors-bundle': {
+                    name: (module, chunks, cacheGroupKey) => {
+                        const allChunksNames = chunks.map((item) => item.name).join('-');
+                        return `vendors-${allChunksNames}-bundle`;
+                    },
+                    test: /[\\/]node_modules[\\/]/,
+                    chunks: 'initial',
+                    priority: 5,
+                    minChunks: 1
+                },
+                'common-bundle': {
+                    name: 'common-bundle',
+                    chunks: 'initial',
+                    priority: 1,
+                    minChunks: 2
+                }
+            }
+        })
+    },
+    devServer: {
+        host: '0.0.0.0',
+        port: 8081,
+        disableHostCheck: true,
+        proxy: {
+            '/api': {
+                target: 'http://127.0.0.1:8080/',
+                changeOrigin: true
+            }
+        }
+    }
+}