init frontend framework

This commit is contained in:
MaysWind
2020-10-18 19:57:43 +08:00
parent fe361df470
commit 769eb604bd
20 changed files with 12353 additions and 6 deletions
+3
View File
@@ -138,6 +138,9 @@ fabric.properties
### node_modules/
node_modules/
# Node.js Build Target
dist/
# Visual Studio Code
.vscode/
*.code-workspace
+10 -4
View File
@@ -1,18 +1,24 @@
# Build binary release
FROM golang:1.14.10-alpine3.12 AS builder
# Build backend binary file
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
+5
View File
@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
+8 -2
View File
@@ -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("login", filepath.Join(config.StaticRootPath, "login.html"))
router.StaticFile("/mobile", filepath.Join(config.StaticRootPath, "mobile.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)))
+12032
View File
File diff suppressed because it is too large Load Diff
+47
View File
@@ -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"
]
}
+11
View File
@@ -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
}
}
+12
View File
@@ -0,0 +1,12 @@
export default {
'global': {
'app': {
'title': 'lightweight account book'
}
},
'Home': 'Home',
'Journals': 'Journals',
'Accounts': 'Accounts',
'Charts': 'Charts',
'Settings': 'Settings'
}
+12
View File
@@ -0,0 +1,12 @@
export default {
'global': {
'app': {
'title': 'lab 轻记账'
}
},
'Home': '首页',
'Journals': '流水',
'Accounts': '账户',
'Charts': '图表',
'Settings': '设置'
}
+7
View File
@@ -0,0 +1,7 @@
<template>
<div>Not Implemented</div>
</template>
<script>
export default {}
</script>
+8
View File
@@ -0,0 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
})
+18
View File
@@ -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>
+22
View File
@@ -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>
+5
View File
@@ -0,0 +1,5 @@
.lab-toolbar-link-with-icon i+span {
font-size: 11px;
margin-top: 3px;
margin-left: 0;
}
+22
View File
@@ -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>
+5
View File
@@ -0,0 +1,5 @@
<template>
<f7-block>
<p>home</p>
</f7-block>
</template>
+21
View File
@@ -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),
})
+25
View File
@@ -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>
+22
View File
@@ -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
+58
View File
@@ -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
}
}
}
}