添加登录功能

src/App.vue

@@ -3,85 +3,121 @@ import upload from "./views/uploadFileMiao.vue";
 import download from "./views/downloadFileMiao.vue";
 import setting from "./views/setting.vue";
 import chat from "./views/chat.vue";
-import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon } from 'naive-ui'
-import { ref, watch, h ,shallowRef} from "vue";
-// import { RouterView, useRouter } from "vue-router";
+import login from "./views/login.vue";
+import account from "./views/accountInfo.vue";
+import getQueryString from '@/func/getQuery'
+import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon,NModalProvider } from 'naive-ui'
+import { ref, watch, h ,shallowRef, onMounted, computed} from "vue";
+// import { useRoute } from "vue-router";
 import {
     ArrowUpCircleOutline as uploadIcon,
     ArrowDownCircleOutline as downloadIcon,
     ChatboxEllipsesOutline as chatIcon,
-    SettingsOutline as settingIcon
+    SettingsOutline as settingIcon,
+    PersonOutline as AccountIcon
     
 } from '@vicons/ionicons5'
+import { useSettingStore } from "@/pinia/store";
 
+
+const settingData = useSettingStore();
 const activePage = ref('upload')
 const isComponent = shallowRef(upload)
 watch(activePage, () => {
-    isComponent.value={upload,download,setting,chat}[activePage.value]
+    isComponent.value={upload,download,setting,chat,login,account}[activePage.value]
 })
 function renderIcon(icon) {
     return () => h(NIcon, null, { default: () => h(icon) })
 }
 
-const menuOptions = [
+const menuOptions = ref([
     {
         label: '上传',
         key: 'upload',
         icon: renderIcon(uploadIcon),
+        disabled:computed(()=>{
+            // console.log(settingData)
+            return settingData.token === null
+        })
     },
     {
         label: '下载',
         key: 'download',
         icon: renderIcon(downloadIcon),
+        disabled:computed(()=>{
+            return settingData.token === null
+        })
     },
     {
         label: 'Chat',
         key: 'chat',
         icon: renderIcon(chatIcon),
+        disabled:computed(()=>{
+            return settingData.token === null
+        })
     },
     {
         label: '设置',
         key: 'setting',
         icon: renderIcon(settingIcon),
+        disabled:computed(()=>{
+            return settingData.token === null
+        })
+    },
+    {
+        label:'账户',
+        key:'account',
+        icon: renderIcon(AccountIcon),
+        disabled:computed(()=>{
+            return settingData.token === null
+        })
     }
-]
+])
+// function getQueryString(key) {
+//     var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
+//     var r = window.location.search.substr(1).match(reg);
+//     if (r != null) {
+//         return unescape(r[2]);
+//     }
+//     return null;
+// }
 
 
+onMounted(()=>{
+    let aP = getQueryString('aP')
+    // console.log(aP)
+    if(aP){
+        activePage.value = aP
+    }
+    if(settingData.token === null){
+        aP = activePage.value
+        activePage.value = 'login'
+        // 登录后跳原来的activePage
+        const w = watch(()=>settingData.token,()=>{
+            activePage.value = aP
+            w()
+        })
+    }
+})
 </script>
 
 <template>
     <div id="windows">
         <n-notification-provider placement="bottom-right" :max="3">
             <n-message-provider>
-                <n-card content-style="padding: 0; margin:0" id="theCard">
-                    <!-- <n-scrollbar style="max-height: 100%"> -->
-                        <div id="menu">
-                            <n-menu mode="horizontal" :responsive="true" v-model:value="activePage" :options="menuOptions" :icon-size="26"></n-menu>
-                        </div>
+                <n-modal-provider>
+                        <n-card content-style="padding: 0; margin:0" id="theCard">
+                            <div id="menu">
+                                <n-menu mode="horizontal" :responsive="true" v-model:value="activePage" :options="menuOptions" :icon-size="26"></n-menu>
+                            </div>
 
-                        <div style="padding: 20px;">
-                            <KeepAlive>
-                                <component :is="isComponent"></component>
-                            </KeepAlive>
-                        </div>
-
-                    <!-- </n-scrollbar> -->
-                    <!-- <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;"
-                        display-directive="show">
-                            <n-tab-pane name="上传文件">
-                                <uploadFileMiao style />
-                            </n-tab-pane>
-                            <n-tab-pane name="下载文件">
-                                <downloadFileMiao style />
-                            </n-tab-pane>
-                            <n-tab-pane name="miaoChat">
-                                <chat style />
-                            </n-tab-pane>
-                            <n-tab-pane name="设置">
-                                <settingMiao style="max-width:100%" />
-                            </n-tab-pane>
-                    </n-tabs> -->
-                </n-card>
+                            <div style="padding: 20px;">
+                                <KeepAlive>
+                                    <component :is="isComponent"></component>
+                                </KeepAlive>
+                            </div>
+                    </n-card>
+                </n-modal-provider>
             </n-message-provider>
         </n-notification-provider>
     </div>