修改Operation组件

little3201 · Apr 28, 2023 · 3799495 · 3799495
1 parent cc63864
commit 3799495
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 220 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -18,7 +18,7 @@
 
   @media only screen and (min-width: 768px) {
     .sm-t-h {
-      height: calc(100vh - 10.5rem);
+      height: calc(100vh - 11rem);
     }
   }
 

diff --git a/src/components/Action.vue b/src/components/Action.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="user.username && user.username.length > 0"
+    v-if="isLogin"
     class="flex justify-center items-center text-sm"
   >
     <slot />
@@ -37,8 +37,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-
-import type { User } from '~/api/request.type';
+import { getCookie } from '~/composables/cookies';
 import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/24/outline'
 
 defineProps({
@@ -54,20 +53,12 @@ defineProps({
 
 defineEmits(['edit', 'del']);
 
-const user = ref<User>({
-  username: '',
-  nickname: '',
-  avatar: '',
-  enabled: true,
-  accountExpiresAt: '',
-  accountLocked: false,
-  credentialsExpiresAt: ''
-});
+const isLogin = ref(false);
 
 onMounted(() => {
-  let data = sessionStorage.getItem('user');
-  if (data && data !== 'undefined') {
-    user.value = JSON.parse(data);
+  const username = getCookie('username');
+  if (username && username.length > 0) {
+    isLogin.value = true;
   }
 });
 </script>
diff --git a/src/components/Operation.vue b/src/components/Operation.vue
@@ -1,124 +1,124 @@
 <template>
-  <div
-    v-if="user.username && user.username.length > 0"
-    class="flex justify-between items-center"
-  >
-    <form>
-      <div class="flex items-center relative">
-        <button
-          class="flex-shrink-0 inline-flex items-center py-2 px-3 text-sm text-center text-neutral-900 border border-neutral-300 rounded-l-lg hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white dark:border-neutral-600"
-          type="button"
-          @click="onShow"
-        >
-          {{ items[0].label }}
-          <ChevronDownIcon
-            class="w-4 h-4 ml-2"
-            aria-hidden="true"
-          />
-        </button>
-        <ul
-          v-show="visible && items.length > 0"
-          class="absolute top-10 z-10 bg-white divide-y divide-neutral-100 rounded-lg shadow-lg dark:bg-neutral-700 py-2 text-sm text-neutral-700 dark:text-neutral-200"
-        >
-          <li
-            v-for="(item, index) in items"
-            :key="index"
-          >
-            <button
-              type="button"
-              class="inline-flex justify-center px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:hover:text-white"
-            >
-              {{ item.label }}
-            </button>
-          </li>
-        </ul>
-        <div class="relative w-full inline-flex items-center">
-          <input
-            id="search-dropdown"
-            type="search"
-            class="p-2 w-72 text-sm text-neutral-900 bg-neutral-50 rounded-r-lg border-l-neutral-50 border focus:ring-0 border-neutral-300 dark:bg-neutral-700 dark:border-l-neutral-700  dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white"
-            placeholder="Search Mockups..."
-            required
-          >
+  <div class="flex justify-between items-center">
+    <div class="inline-flex">
+      <form>
+        <div class="flex items-center relative">
           <button
-            type="submit"
-            class="absolute top-px bottom-px right-0 p-2 my-auto text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none inline-flex items-center"
+            class="flex-shrink-0 inline-flex items-center py-2 px-3 text-sm text-center text-neutral-900 border border-neutral-300 rounded-l-lg hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white dark:border-neutral-600"
+            type="button"
+            @click="onShow"
           >
-            <MagnifyingGlassIcon
-              class="w-5 h-5"
+            {{ items[0].label }}
+            <ChevronDownIcon
+              class="w-4 h-4 ml-2"
               aria-hidden="true"
             />
-            <span class="sr-only">Search</span>
           </button>
+          <ul
+            v-show="visible && items.length > 0"
+            class="absolute top-10 z-10 bg-white divide-y divide-neutral-100 rounded-lg shadow-lg dark:bg-neutral-700 py-2 text-sm text-neutral-700 dark:text-neutral-200"
+          >
+            <li
+              v-for="(item, index) in items"
+              :key="index"
+            >
+              <button
+                type="button"
+                class="inline-flex justify-center px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:hover:text-white"
+              >
+                {{ item.label }}
+              </button>
+            </li>
+          </ul>
+          <div class="relative w-full inline-flex items-center">
+            <input
+              id="search-dropdown"
+              type="search"
+              class="p-2 w-72 text-sm text-neutral-900 bg-neutral-50 rounded-r-lg border-l-neutral-50 border focus:ring-0 border-neutral-300 dark:bg-neutral-700 dark:border-l-neutral-700  dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white"
+              placeholder="Search Mockups..."
+              required
+            >
+            <button
+              type="submit"
+              class="absolute top-px bottom-px right-0 p-2 my-auto text-white bg-blue-600 hover:bg-blue-700 rounded-r-lg focus:outline-none inline-flex items-center"
+            >
+              <MagnifyingGlassIcon
+                class="w-5 h-5"
+                aria-hidden="true"
+              />
+              <span class="sr-only">Search</span>
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-    <button
-      type="button"
-      name="reload"
-      aria-label="reload"
-      class="ml-4 inline-flex items-center text-blue-600 focus:outline-none"
-      @click="onReload"
-    >
-      <ArrowPathIcon
-        class="w-5 h-5 mr-2"
-        aria-hidden="true"
-      />
-      {{ $t('reload') }}
-    </button>
-    <div
-      class="inline-flex items-center space-x-4 sm:ml-auto text-sm"
-    >
+      </form>
       <button
-        title="import"
-        name="import"
-        aria-label="import"
         type="button"
-        class="inline-flex items-center p-2 rounded-md bg-white  text-neutral-700 border hover:text-blue-600 hover:border-blue-600 focus:outline-none"
+        name="reload"
+        aria-label="reload"
+        class="ml-4 inline-flex items-center text-blue-600 focus:outline-none"
+        @click="onReload"
       >
-        <DocumentPlusIcon
+        <ArrowPathIcon
           class="w-5 h-5 mr-2"
           aria-hidden="true"
         />
-        {{ $t('import') }}
-      </button>
-      <button
-        title="export"
-        name="export"
-        aria-label="export"
-        type="button"
-        class="inline-flex items-center p-2 rounded-md bg-white text-neutral-700 border hover:text-blue-600 hover:border-blue-600 focus:outline-none"
-        @click="onExport"
-      >
-        <DocumentTextIcon
-          class="w-5 h-5 mr-2"
-          aria-hidden="true"
-        />
-        {{ $t('export') }}
-      </button>
-      <button
-        v-if="needAdd"
-        name="add"
-        aria-label="add"
-        class="inline-flex items-center p-2 rounded-md bg-blue-600  text-white hover:bg-blue-700 focus:outline-none"
-        @click="onAdd"
-      >
-        <PlusCircleIcon
-          class="w-5 h-5 mr-2"
-          aria-hidden="true"
-        />
-        {{ $t('add') }}
+        {{ $t('reload') }}
       </button>
     </div>
+    <div v-if="isLogin">
+      <div class="inline-flex items-center space-x-4 sm:ml-auto text-sm">
+        <button
+          title="export"
+          name="export"
+          aria-label="export"
+          type="button"
+          class="inline-flex items-center p-2 rounded-md bg-white text-neutral-700 border hover:text-blue-600 hover:border-blue-600 focus:outline-none"
+          @click="onExport"
+        >
+          <DocumentTextIcon
+            class="w-5 h-5 mr-2"
+            aria-hidden="true"
+          />
+          {{ $t('export') }}
+        </button>
+        <button
+          v-if="needAdd"
+          title="import"
+          name="import"
+          aria-label="import"
+          type="button"
+          class="inline-flex items-center p-2 rounded-md bg-white  text-neutral-700 border hover:text-blue-600 hover:border-blue-600 focus:outline-none"
+        >
+          <DocumentPlusIcon
+            class="w-5 h-5 mr-2"
+            aria-hidden="true"
+          />
+          {{ $t('import') }}
+        </button>
+        <button
+          v-if="needAdd"
+          name="add"
+          aria-label="add"
+          class="inline-flex items-center p-2 rounded-md bg-blue-600  text-white hover:bg-blue-700 focus:outline-none"
+          @click="onAdd"
+        >
+          <PlusCircleIcon
+            class="w-5 h-5 mr-2"
+            aria-hidden="true"
+          />
+          {{ $t('add') }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, PropType } from "vue";
 import { utils, write, WorkBook, WorkSheet } from 'xlsx'
+import { getCookie } from "~/composables/cookies";
 
-import type { User, Item } from "~/api/request.type";
-
+import type { Item } from "~/api/request.type";
 import { ArrowPathIcon, ChevronDownIcon, DocumentPlusIcon, DocumentTextIcon, MagnifyingGlassIcon, PlusCircleIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -148,22 +148,14 @@ const emit = defineEmits(["handReload", "handAdd"]);
 
 const visible = ref(false)
 
-const user = ref<User>({
-  username: '',
-  nickname: '',
-  avatar: '',
-  enabled: true,
-  accountExpiresAt: '',
-  accountLocked: false,
-  credentialsExpiresAt: ''
-})
+const isLogin = ref(false);
 
 onMounted(() => {
-  let data = sessionStorage.getItem("user")
-  if (data && data !== "undefined") {
-    user.value = JSON.parse(data);
+  const username = getCookie('username');
+  if (username && username.length > 0) {
+    isLogin.value = true;
   }
-})
+});
 /**
  * add 操作
  */

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -254,12 +254,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted } from "vue"
 import { useI18n } from 'vue-i18n'
 
 import { getCookie } from '../composables/cookies'
-import { instance, SERVER_URL } from "~/api";
-import type { User, Message } from "~/api/request.type";
+import { instance, SERVER_URL } from "~/api"
+import type { User, Message } from "~/api/request.type"
 import { ArrowRightCircleIcon, BellIcon, ChevronRightIcon, CogIcon, IdentificationIcon, LanguageIcon, MagnifyingGlassIcon, QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
 
 // 控制通知是否打开
@@ -286,8 +286,9 @@ const user = ref<User>({
 
 onMounted(() => {
   const username = getCookie('username')
-
-  Promise.all([fetch(username), retrieve(username)])
+  if(username && username.length > 0){
+    Promise.all([fetch(username), retrieve(username)])
+  }
 });
 /**
  * 获取消息

diff --git a/src/composables/cookies.ts b/src/composables/cookies.ts
@@ -12,4 +12,11 @@ export const getCookie = (cname: string) => {
         }
     }
     return "";
+}
+
+export const setCookie = (cname: string, cvalue: boolean | number | string, exhours: number) => {
+    const d = new Date();
+    d.setTime(d.getTime() + (exhours * 60 * 60 * 1000));
+    const expires = "expires=" + d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 }
diff --git a/src/main.ts b/src/main.ts
@@ -8,7 +8,7 @@ import i18n from './locales';
 
 // dev mock server
 if (process.env.NODE_ENV != 'production') {
-    // mockXHR()
+    mockXHR()
 }
 
 createApp(App).use(router).use(i18n).mount('#app')