Built the basic ui framework

ui/src/App.vue

@@ -1,31 +1,7 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <router-view></router-view>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<script setup lang="ts"></script>
+
+<style scoped></style>

ui/src/assets/css/base.css

@@ -0,0 +1,63 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+em,
+i {
+    font-style: normal
+}
+
+li {
+    list-style: none
+}
+
+img {
+    border: 0;
+    vertical-align: middle
+}
+
+button {
+    cursor: pointer
+}
+
+a {
+    color: #666;
+    text-decoration: none
+}
+
+button,
+input {
+    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
+    border: 0;
+    outline: none;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    background-color: #fff;
+    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
+    color: #666
+}
+
+.hide,
+.none {
+    display: none
+}
+
+.clearfix:after {
+    visibility: hidden;
+    clear: both;
+    display: block;
+    content: ".";
+    height: 0
+}
+
+.clearfix {
+    *zoom: 1
+}

ui/src/assets/svg/pinnacle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
+     class="icon" viewBox="0 0 1024 1024" version="1.1" width="64" height="64">
+    <path d="M835.834131 664.947948H697.596636v63.99884h138.237495a33.919385 33.919385 0 0 0 0-63.99884z"/>
+    <path d="M1009.270987 755.186312V255.99536a159.357112 159.357112 0 0 0-154.877193-147.197332h-146.557344v58.878933h154.877193a79.99855 79.99855 0 0 1 79.358562 79.99855v519.030592a79.99855 79.99855 0 0 1-79.358562 79.99855h-154.877193v58.878933h154.877193a147.197332 147.197332 0 0 0 146.557344-150.397274zM567.039002 0h-23.67957l-428.792229 80.638538A132.477599 132.477599 0 0 0 14.729013 204.1563v607.98898a140.15746 140.15746 0 0 0 99.83819 122.877773L543.359432 1023.98144h23.67957a104.318109 104.318109 0 0 0 106.238075-106.878062V106.878063A114.557924 114.557924 0 0 0 567.039002 0z m39.039293 917.103378a36.479339 36.479339 0 0 1-39.039293 39.67928h-9.599826L128.00696 867.824271a52.479049 52.479049 0 0 1-46.719153-55.678991v-607.98898A51.83906 51.83906 0 0 1 128.00696 148.477309l430.072205-81.278527h8.959837a41.599246 41.599246 0 0 1 39.039293 39.679281z"/>
+    <path d="M850.553864 470.391474h-137.597506V537.590256h137.597506a31.99942 31.99942 0 0 0 33.919385-33.919385 31.359432 31.359432 0 0 0-33.919385-33.279397zM850.553864 275.835h-137.597506v67.198783h137.597506a31.99942 31.99942 0 0 0 33.919385-33.919386 31.359432 31.359432 0 0 0-33.919385-33.279397zM355.84283 170.236914a127.99768 127.99768 0 0 0-114.557923 131.197622 127.99768 127.99768 0 0 0 114.557923 127.997681 120.957808 120.957808 0 0 0 115.197912-127.997681 127.99768 127.99768 0 0 0-115.197912-131.197622z m0 191.996521c-27.519501 0-47.359142-26.239524-47.359141-63.998841s19.83964-63.99884 47.359141-63.99884 47.99913 26.239524 47.99913 63.99884S384.00232 364.793388 355.84283 364.793388zM417.281717 732.14673l63.99884 145.917355h74.878643L384.00232 494.711033H295.683921l-147.837321 319.9942h74.238655l40.319269-81.278526zM339.84312 567.669711L384.00232 664.947948H296.963898z"/>
+</svg>

ui/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

ui/src/auto-imports.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

ui/src/components.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

ui/src/constants/Common.constants.ts

@@ -0,0 +1,23 @@
+const PRODUCTION_NAME = 'Pinnacle OA'
+const COLOR_PRODUCTION = '#00D4FF'
+const COLOR_BACKGROUND = '#D8D8D8'
+const COLOR_FONT_MAIN = '#4D4D4D'
+const COLOR_FONT_SECONDARY = '#9E9E9E'
+const SIZE_ICON_XS = '16px'
+const SIZE_ICON_SM = '20px'
+const SIZE_ICON_MD = '24px'
+const SIZE_ICON_LG = '32px'
+const SIZE_ICON_XL = '64px'
+
+export {
+    PRODUCTION_NAME,
+    COLOR_PRODUCTION,
+    COLOR_BACKGROUND,
+    COLOR_FONT_MAIN,
+    COLOR_FONT_SECONDARY,
+    SIZE_ICON_XS,
+    SIZE_ICON_SM,
+    SIZE_ICON_MD,
+    SIZE_ICON_LG,
+    SIZE_ICON_XL
+}

ui/src/main.ts

@@ -1,5 +1,21 @@
 import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import App from '@/App.vue'
+import router from '@/router'
 
-createApp(App).mount('#app')
+import { PRODUCTION_NAME } from './constants/Common.constants.js'
+
+import '@/assets/css/base.css'
+
+router.beforeEach((to, from, next) => {
+    if (to.matched.length === 0) {
+        from.path ? next({ path: from.path }) : next('/')
+    } else {
+        if (to.meta.title) {
+            document.title = PRODUCTION_NAME + ' - ' + to.meta.title
+        }
+    }
+})
+
+const app = createApp(App)
+
+app.use(router).mount('#app')

ui/src/pages/Main.vue

@@ -0,0 +1,9 @@
+<template><div></div></template>
+
+<script>
+export default {
+    name: 'MainPage'
+}
+</script>
+
+<style scoped></style>

ui/src/pages/Work/Todo.vue

@@ -0,0 +1,9 @@
+<template><div></div></template>
+
+<script>
+export default {
+    name: 'TodoPage'
+}
+</script>
+
+<style scoped></style>

ui/src/router/index.ts

@@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: []
+})
+
+export default router

ui/src/style.css

@@ -1,81 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}