diff --git a/src/App.vue b/src/App.vue index 3e09636..1f722fd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,8 +3,12 @@ import {onMounted, ref} from "vue"; import Login from "./components/login/index.vue"; import DataFields from "./components/data-fields/index.vue"; +import Product from "./components/product/index.vue"; +import Field from "./components/field/index.vue"; +import Result from "./components/result/index.vue"; + import {MenuItem, Menu, Icon} from "view-ui-plus"; -import Layout from "./components/layout/index.vue" +import {useHash} from "./service/router.ts"; const page_data = ref({ showLogin: false, @@ -23,27 +27,32 @@ onMounted(() => { } }) const MENU_LIST = [ - {title:'药品管理',name:'products',icon:'ios-cube'}, - {title:'数据项管理',name:'fields',icon:'ios-apps'}, - {title:'数据管理',name:'product_value',icon:'ios-paper'}, - {title:'计算结果',name:'result',icon:'ios-calculator'}, + {title: '药品管理', name: 'product', icon: 'ios-cube'}, + {title: '数据项管理', name: 'field', icon: 'ios-apps'}, + {title: '数据管理', name: 'product_value', icon: 'ios-paper'}, + {title: '计算结果', name: 'result', icon: 'ios-calculator'}, ] -const activeMenu = ref(MENU_LIST[0].name) -const onMenuSelect = (name:string)=>activeMenu.value = name +const hash = useHash() +const activeMenu = ref((hash.value || MENU_LIST[0].name)) +const onMenuSelect = (name: string) => { + activeMenu.value = name + window.location.hash = name +} + @@ -61,32 +73,37 @@ const onMenuSelect = (name:string)=>activeMenu.value = name padding: 0; box-sizing: border-box; } -.app-header{ + +.app-header { display: flex; align-items: center; border-bottom: solid 1px #dcdee2; - box-shadow: 0 0 5px rgba(0,0,0,0.2); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); position: sticky; top: 0; padding: 0 50px; justify-content: space-between; } -.app-menu{ - .ivu-menu{ - &:after{ + +.app-menu { + .ivu-menu { + &:after { display: none; } } } -.app-content{ + +.app-content { padding: 20px 50px; } -.app-logo{ + +.app-logo { padding: 10px; margin-right: 50px; display: flex; align-items: center; } + body { background: #fff; color: #000; diff --git a/src/components/field/index.vue b/src/components/field/index.vue new file mode 100644 index 0000000..6eb5613 --- /dev/null +++ b/src/components/field/index.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue index 819d16c..03cb102 100644 --- a/src/components/layout/index.vue +++ b/src/components/layout/index.vue @@ -1,5 +1,5 @@ + + + + diff --git a/src/components/result/index.vue b/src/components/result/index.vue new file mode 100644 index 0000000..00e1b3f --- /dev/null +++ b/src/components/result/index.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/src/service/router.ts b/src/service/router.ts new file mode 100644 index 0000000..8ad3b21 --- /dev/null +++ b/src/service/router.ts @@ -0,0 +1,22 @@ +import {onMounted, onUnmounted, ref} from "vue"; + +function getHash() { + const hash = window.location.hash + return hash.length > 0 ? hash.slice(1) : ''; +} + +export const useHash = () => { + const hash = ref(getHash()) + + const onHashChange = () => { + hash.value = getHash() + } + onMounted(() => { + window.addEventListener('hashchange', onHashChange, false) + }) + onUnmounted(() => { + window.removeEventListener('hashchange', onHashChange, false) + }) + return hash +} + diff --git a/vite.config.ts b/vite.config.ts index 36b8bb1..f14925c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,16 +15,17 @@ export default defineConfig({ if (id.includes('view-ui-plus')) { return 'view-ui' } - if (id.includes('vue')) { - return 'vue' - } - if (id.includes('node_modules')) { - return id.toString().split('node_modules/')[1].split('/')[0].toString(); - } + // if (id.includes('vue')) { + // return 'vue' + // } + // if (id.includes('node_modules')) { + // return id.toString().split('node_modules/')[1].split('/')[0].toString(); + // } } } }, }, + base: './', // resolve:{ // alias:{ // '@': path.resolve(__dirname,"./src")