📦 优化细节问题

src/App.vue

@@ -8,9 +8,9 @@
     }"
     :componentSize="'large'"
   >
-    <NavBar v-if="!authStore.loginFromEmbed" />
+    <NavBar v-if="hasNav" />
     <main :class="{
-      'has-nav': !authStore.loginFromEmbed,
+      'has-nav': hasNav,
     }">
       <RouterView />
       <!-- <RouterView v-slot="{ Component }">
@@ -20,12 +20,12 @@
         <component :is="Component" v-if="!route.meta.keepAlive" />
       </RouterView> -->
     </main>
-    <FooterSmall v-if="!authStore.loginFromEmbed" />
+    <FooterSmall v-if="hasNav" />
   </a-config-provider>
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { RouterView, useRoute } from 'vue-router'
 import { useAuthStore } from './stores/auth';
 import NavBar from './components/NavBar.vue';
@@ -37,6 +37,7 @@ import Colors from './assets/scss/vueexp.module.scss';
 const authStore = useAuthStore();
 const route = useRoute();
 const { checkAndRedirectLoginPage } = useRedirectLoginPage();
+const hasNav = computed(() => authStore.loginFromEmbed === false);
 
 onMounted(async () => {
   await authStore.loadLoginState(route);

src/api/auth/UserApi.ts

@@ -70,7 +70,7 @@ export class UserApi extends AppServerRequestModule<DataModel> {
     super();
   }
   async login(data: {
-    mobile: string,
+    account: string,
     password: string,
   }) {
     return (await this.post('/user/login', data, '登录', undefined, LoginResult)).data as LoginResult;

src/components/NavBar.vue

@@ -199,7 +199,7 @@ nav.main {
   }
 }
 
-.main.has-nav {
+main.has-nav {
   .nav-placeholder {
     height: $nav-height; 
     background-color: $primary-color;

src/pages/details.vue

@@ -7,7 +7,7 @@
       <div class="content">
         <div class="title left-right">
           <a-button :icon="h(ArrowLeftOutlined)" class="mb-3" @click="router.back()">返回</a-button>
-          <h2>乡源·乡村文化资源挖掘平台</h2>
+          <h2>{{ querys.name }}</h2>
           <span style="width:50px;"></span>
         </div>
         <img class="head-img w-100 radius-base" src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg"/>
@@ -115,7 +115,14 @@
               去完成
             </a-button>
           </div>
-          <div class="item">
+          <div v-if="!isAdmin && isEmpty" class="item">
+            <i class="iconfont icon-task-summary"></i>
+            <div class="info">
+              <div class="title">您当前没有可完成的任务</div>
+              <div class="desc">请联系管理员认领可采编栏目</div>
+            </div>
+          </div>
+          <!-- <div class="item">
             <i class="iconfont icon-task-other"></i>
             <div class="info">
               <div class="title">其他</div>
@@ -124,7 +131,7 @@
             <a-button type="primary" disabled @click="navTo('task/other', nextPageData)">
               待开放
             </a-button>
-          </div>
+          </div> -->
         </div>
 
       </div>
@@ -139,6 +146,7 @@ import { useRouter } from 'vue-router';
 import { ArrowLeftOutlined } from '@ant-design/icons-vue';
 import { useCollectStore } from '@/stores/collect';
 import { useTaskEntryForm } from './composeable/TaskEntryForm';
+import { useAuthStore } from '@/stores/auth';
 
 const router = useRouter();
 const { querys } = useLoadQuerys({ 
@@ -152,7 +160,8 @@ const nextPageData = computed(() => ({
   villageId: querys.value.id,  
   villageVolunteerId: querys.value.villageVolunteerId,
 }));
-const { canCollect } = useCollectStore();
+const { isAdmin } = useAuthStore();
+const { canCollect, isEmpty } = useCollectStore();
 const { goForm } = useTaskEntryForm();
 
 function navTo(path: string, data: any) {

src/pages/login.vue

@@ -32,7 +32,6 @@ import { useRouter } from 'vue-router';
 
 const form = ref<IDynamicFormRef>();
 const formModel = ref({
-  mobile: '',
   password: '',
   account: '',
   type: 0,

src/stores/auth.ts

@@ -20,11 +20,10 @@ export const useAuthStore = defineStore('auth', {
       try {
         const query = route.query.internalAuth as string|undefined;
         let res = localStorage.getItem(STORAGE_KEY);
-        this.loginFromEmbed = false;
         if (!res && query) {
           res = decodeURIComponent(query);
           this.loginFromEmbed = true;
-          localStorage.setItem(STORAGE_KEY, res);
+          this.saveLoginData();
         }
         if (!res)
           throw 'no storage';
@@ -34,6 +33,7 @@ export const useAuthStore = defineStore('auth', {
         this.expireAt = authInfo.expireAt;
         this.userInfo = authInfo.userInfo;
         this.loginType = authInfo.loginType;
+        this.loginFromEmbed = authInfo.loginFromEmbed;
 
         // 检查token是否过期，如果快要过期，则刷新token
         /*if (canRefresh && Date.now() > this.expireAt + 1000 * 3600 * 5) {
@@ -48,16 +48,16 @@ export const useAuthStore = defineStore('auth', {
         console.log('loadLoginState', error);
       }
     },
-    async login(mobile: string, password: string, loginType: number) {
+    async login(account: string, password: string, loginType: number) {
       let loginResult;
       if (loginType == 0) {
         loginResult = await UserApi.login({
-          mobile,
+          account,
           password,
         })
       } else if (loginType == 1) {
         loginResult = await UserApi.loginAdmin({
-          account: mobile,
+          account,
           password,
         })
       } else
@@ -70,14 +70,16 @@ export const useAuthStore = defineStore('auth', {
       this.userInfo = loginResult.userInfo;
       this.loginType = loginType;
       this.expireAt = (loginResult.expiresIn || 0) + Date.now();
-
+    },
+    saveLoginData() {
       localStorage.setItem(STORAGE_KEY, 
         JSON.stringify({ 
           token: this.token, 
           userId: this.userId ,
           expireAt: this.expireAt,
           userInfo: this.userInfo,
-          loginType,
+          loginType: this.loginType,
+          loginFromEmbed: this.loginFromEmbed,
         }) 
       );
     },

src/stores/collect.ts

@@ -1,17 +1,24 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
+import { useAuthStore } from './auth';
 
 export const useCollectStore = defineStore('collect', () => {
   const collectableModules = ref<string[]>([]);
-  
+  const authStore = useAuthStore();
+
   function setCollectableModules(modules: string[]) {
     collectableModules.value = modules;
   }
   function canCollect(module: string) {
+    if (authStore.isAdmin)
+      return true;
     return collectableModules.value.includes(module);
   }
+  
+  const isEmpty = computed(() => collectableModules.value.length === 0);
 
   return { 
+    isEmpty,
     collectableModules,
     setCollectableModules,
     canCollect,