init frontend framework

2026-05-15 23:47:33 +08:00 · 2020-10-18 19:57:43 +08:00
parent fe361df470
commit 769eb604bd
20 changed files with 12353 additions and 6 deletions
@@ -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>
@@ -0,0 +1,5 @@
+.lab-toolbar-link-with-icon i+span {
+    font-size: 11px;
+    margin-top: 3px;
+    margin-left: 0;
+}
@@ -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>
@@ -0,0 +1,5 @@
+<template>
+    <f7-block>
+        <p>home</p>
+    </f7-block>
+</template>
@@ -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),
+})
@@ -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>
@@ -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