diff --git a/index.html b/index.html index b19040a..e641616 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,18 @@ - - - - - Vite App - - -
- - - + + + + + + DataBuddy WebScreen + + + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json index 9ac8c37..ec0c125 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "format": "prettier --write --experimental-cli src/" }, "dependencies": { + "nprogress": "^0.2.0", "vue": "^3.5.25", "vue-router": "^4.6.3" }, diff --git a/public/config.js b/public/config.js index f8e3406..9370132 100644 --- a/public/config.js +++ b/public/config.js @@ -4,10 +4,8 @@ window.$website = { title: 'DataBuddy 数据大屏', name: 'DataBuddy 数据大屏', subName: '你的数据可视化引擎', - url: 'https://databuddy.nyamiao.com/api/databuddy', - routers: { - mainPath: '/' - }, + apiUrl: 'https://databuddy.nyamiao.com/api/databuddy', + cdnUrl: '', autoSave: false, autoSaveTime: 60000, } \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e864195..6d11557 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,3 @@ - - - - + \ No newline at end of file diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue index 68a970a..d33640d 100644 --- a/src/components/TheWelcome.vue +++ b/src/components/TheWelcome.vue @@ -1,10 +1,5 @@ @@ -22,9 +17,6 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md') - This project is served and bundled with diff --git a/src/main.js b/src/main.js index 5a5dbdb..92fee02 100644 --- a/src/main.js +++ b/src/main.js @@ -1,11 +1,12 @@ -import './assets/main.css' - import { createApp } from 'vue' import App from './App.vue' -import router from './router' +import router from './router.js' +import getConfig from './utils/config' const app = createApp(App) +app.config.globalProperties.$config = getConfig() + app.use(router) app.mount('#app') diff --git a/src/router.js b/src/router.js new file mode 100644 index 0000000..37f68bd --- /dev/null +++ b/src/router.js @@ -0,0 +1,55 @@ +import { createRouter, createWebHistory } from 'vue-router' +import NProgress from 'nprogress' +import 'nprogress/nprogress.css' + +NProgress.configure({ + easing: 'ease', + speed: 500, + showSpinner: false, + trickleSpeed: 200, + minimum: 0.3 +}) + +const style = document.createElement('style') +style.innerHTML = ` + #nprogress .bar { + background: #f472b6 !important; + height: 2px !important; + box-shadow: 0 0 5px rgba(244, 114, 182, 0.7) !important; + } + #nprogress .peg { + box-shadow: 0 0 15px #f472b6, 0 0 10px #f472b6 !important; + opacity: 1 !important; + } + #nprogress .spinner { + display: none !important; + } +` +document.head.appendChild(style) + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'index', + component: () => import('./views/Index.vue'), + }, + { + path: '/:pathMatch(.*)*', + name: 'NotFound', + component: () => import('./views/NotFound.vue'), + }, + ], +}) + +router.beforeEach((to, from, next) => { + NProgress.start() + next() +}) + +router.afterEach(() => { + NProgress.done() +}) + +export default router diff --git a/src/utils/config.js b/src/utils/config.js new file mode 100644 index 0000000..d08124b --- /dev/null +++ b/src/utils/config.js @@ -0,0 +1,3 @@ +export default function getConfig() { + return window.$website; +} \ No newline at end of file diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 756ad2a..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue deleted file mode 100644 index 6bb706f..0000000 --- a/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/views/Index.vue b/src/views/Index.vue new file mode 100644 index 0000000..36c9347 --- /dev/null +++ b/src/views/Index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue new file mode 100644 index 0000000..bdba1c6 --- /dev/null +++ b/src/views/NotFound.vue @@ -0,0 +1,24 @@ + + \ No newline at end of file