Feat/jump2sso

src/App.svelte

@@ -26,6 +26,7 @@
   import figlet from 'figlet';
   import chalk from 'chalk';
   import { drawFireWork } from './utils/firework';
+  import { editMode } from './stores/editMode';
   let canvas = document.createElement('canvas');
   let deleted = false;
   const easterEgg = (e: KeyboardEvent) => {
@@ -104,6 +105,11 @@
         Message.error($t('header.getInfoFailed'));
       });
   const handleRouterClick = (path: string) => {
+    if ($editMode){
+      Message.warning("请先退出编辑模式，以防数据丢失");
+      return;
+    }
+
     push(path);
   };
   const unsubscribeLocaleLanguage = localeLanguage.subscribe(() => {
@@ -153,7 +159,7 @@
 >
   <div
     class={cx([
-      'py-[0.5rem] px-[4rem] max-lg:px-[3rem] sm:fixed sm:grid sm:grid-cols-3 max-sm:flex max-md:px-[1rem] bg-[rgba(49,84,174,0.58)] max-sm:bg-[#315ED0] w-full h-[5rem] top-0 left-0 z-20 transition-all duration-700',
+      'py-[0.5rem] px-[4rem] fixed max-lg:px-[3rem] sm:grid grid-cols-3 max-sm:flex max-md:px-[1rem] bg-[rgba(49,84,174,0.58)] max-sm:bg-[#315ED0] w-full h-[5rem] top-0 left-0 z-20 transition-all duration-700',
       hideTopBar ? 'translate-y-[-5rem]' : 'translate-y-0',
     ])}
   >
@@ -242,23 +248,31 @@
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <div
-            on:click={() => $isMobile || (showAvatarDetail = !showAvatarDetail)}
+            on:click={() => (showAvatarDetail = !showAvatarDetail)}
             class=" bg-white w-[40px] h-[40px] max-sm:w-[32px] max-sm:h-[32px] max-sm:leading-[32px] max-sm:text-[12px] rounded-full text-text-3 cursor-pointer leading-[40px] text-center"
           >
             {$userInfo.name[0]}
           </div>
           {#if showAvatarDetail}
             <div
               transition:slide
-              class="absolute bg-white w-[149px] rounded-[6px] py-[6px] top-[48px] right-0"
+              class="absolute bg-white w-[100px] rounded-[6px] py-[6px] top-[48px] right-0"
+              class:isMobile={"w-[149px]"}
             >
+              <button
+                on:click={() =>{
+                  window.location.href =
+                    'https://sso2024.hustunique.com/user/edit-info'}}
+                class="truncate max-md:h-[32px] h-[46px] hover:bg-gray-150 leading-[46px] max-md:leading-[32px] text-center w-full"
+                >{$t('header.userSettings')}
+              </button>
               <button
                 on:click={() =>
-                  (window.location.href =
-                    'https://sso2024.hustunique.com/login?logout=true&from=join2024.hustunique.com')}
-                class="text-red-warning max-md:h-[32px] h-[46px] hover:bg-gray-150 leading-[46px] max-md:leading-[32px] text-center w-full"
-                >{$t('header.logout')}</button
-              >
+                  {window.location.href =
+                    'https://sso2024.hustunique.com/login?logout=true&from=join2024.hustunique.com'}}
+                class="text-red-warning truncate max-md:h-[32px] h-[46px] hover:bg-gray-150 leading-[46px] max-md:leading-[32px] text-center w-full"
+                >{$t('header.logout')}
+              </button>
             </div>
           {/if}
         </div>
@@ -270,6 +284,7 @@
   >
     <Groups />
   </div>
+  <div class="h-[80px] w-full sm:hidden"></div>
   <Router {routes} />
 </div>
 

src/components/history/SideBar.svelte

@@ -10,6 +10,8 @@
   import { localeLanguage } from '../../stores/localeLanguage';
   import { LANGUAGES } from '../../config/const';
   import { i18nConstants } from '../../config/i18n';
+  import { editMode } from '../../stores/editMode';
+  import { Message } from '../../utils/Message';
   export let hide = true;
   const dispatch = createEventDispatcher();
   let openLanguage = false;
@@ -48,7 +50,13 @@
   </div>
   {#each router as item}
     <div
-      on:click={() => push(item.location)}
+    on:click={() => {
+      if ($editMode) {
+        Message.warning("请先退出编辑模式，以防数据丢失");
+        return;
+      }
+      push(item.location);
+    }}
       class={cx([
         'h-[62px] p-[20px_16px]',
         $location === item.location && 'text-blue-400 bg-gray-100',

src/components/public/Popover.svelte

@@ -10,13 +10,16 @@
   export let style: 'white' | 'black' = 'black';
   export let questionDirection:"front" | "end" = "front";
   export let className: String = '';
+  export let isShowImg = true;
+  export let shouldShow: boolean = true;
   let box: HTMLDivElement;
   let showContent = false;
   let showModal = false;
   let timerIn: number;
   let timerOut: number;
 
   const handleMouseMoveIn = () => {
+    if (!shouldShow) return;
     clearTimeout(timerOut);
     timerIn = setTimeout(() => {
       showContent = true;
@@ -33,19 +36,21 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="tooltip"
-  on:mouseenter={handleMouseMoveIn}
-  on:mouseleave={handleMouseMoveOut}
+  on:pointerover={handleMouseMoveIn}
+  on:pointerout={handleMouseMoveOut}
   bind:this={box}
   class={cx(['relative w-fit max-sm:flex max-sm:gap-[8px]', questionDirection === "end" && "max-sm:flex-row-reverse", className])}
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <img class="inline sm:hidden" on:click={() => showModal = true} src={question} alt="?" />
+  {#if isShowImg}
+    <img class="inline sm:hidden" on:click={() => showModal = true} src={question} alt="?" />
+  {/if}
   <slot name="children" />
   {#if showContent}
     <div
       transition:scale
       class={cx([
-        'absolute z-[90] max-sm:hidden rounded-[6px]',
+        'absolute z-[90] rounded-[6px]',
         style === 'black' ? 'shadow-drop' : 'shadow-card',
         direct === 'bottom' &&
           'top-[calc(100%_+_12px)]  origin-[top_center] left-[50%] translate-x-[-50%] ',

src/components/user/SingleInputInfo.svelte

@@ -1,19 +1,37 @@
 <script lang="ts">
   import cx from 'clsx'
   import { t } from "../../utils/t";
+  import Popover from '../public/Popover.svelte';
   export let necessary: boolean = false;
   export let name: string;
   export let content: string;
   export let editMode: boolean = false;
+  export let tips: string = "";
+  export let isDisabled: boolean = false;
 </script>
 
 <div class="flex gap-[1rem] items-center max-lg:my-[1.5rem]">
   <p class="  max-sm:text-sm shrink-0">{@html necessary ? `<span class="text-blue-300">*</span>` : " "}{name}</p>
-  <input
-    disabled={!editMode}
-    placeholder={editMode ? $t('user.placeholder') : ""}
-    class={cx(["p-[4px_12px] w-full rounded-[8px] max-sm:text-sm text-text-1 bg-[#FAFAFA] h-[48px] max-sm:h-[42px] transition-all outline-none border-[1px]  focus:border-[#165DFF]", editMode ? "bg-transparent border-gray-200" : "border-transparent"])}
-    bind:value={content}
-  />
+  {#if tips!==""}
+  <Popover direct="top" questionDirection="end" style="white" className="w-full" shouldShow={editMode}>
+    <input
+      disabled={isDisabled}
+      placeholder={editMode ? $t('user.placeholder') : ""}
+      class={cx(["p-[4px_12px] w-full rounded-[8px] max-sm:text-sm text-text-1 bg-[#FAFAFA] h-[48px] max-sm:h-[42px] transition-all outline-none border-[1px]  focus:border-[#165DFF]", editMode && !isDisabled ? "bg-transparent border-gray-200" : "border-transparent"])}
+      bind:value={content}
+      slot="children"
+    />
+    <p slot="content" class="w-[180px]">
+      {tips}
+    </p>
+  </Popover>
+  {:else}
+    <input
+      disabled={isDisabled}
+      placeholder={editMode ? $t('user.placeholder') : ""}
+      class={cx(["p-[4px_12px] w-full rounded-[8px] max-sm:text-sm text-text-1 bg-[#FAFAFA] h-[48px] max-sm:h-[42px] transition-all outline-none border-[1px]  focus:border-[#165DFF]", editMode && !isDisabled ? "bg-transparent border-gray-200" : "border-transparent"])}
+      bind:value={content}
+    />
+  {/if}
 </div>
 

src/config/i18n.ts

@@ -8,6 +8,7 @@ export const i18nConstants = {
       info: "Resume",
       avatar: "Change avatar",
       logout: "Log out",
+      userSettings:"User Settings",
       language: "language",
       getInfoFailed: "get info failed"
     },
@@ -89,6 +90,7 @@ export const i18nConstants = {
       edit: "edit",
       email: "email",
       recommender: "recommender",
+      changeUserInfoTip:"If you want to modify this field, click the avatar at the top right, select “User Settings” and proceed to SSO to make the changes.",
       name: "name",
       gender: "gender",
       grade: "grade",
@@ -144,6 +146,7 @@ export const i18nConstants = {
       info: "个人信息",
       avatar: "更换头像",
       logout: "退出登录",
+      userSettings:"用户设置",
       language: "语言",
       getInfoFailed: "获取信息失败"
     },
@@ -228,6 +231,7 @@ export const i18nConstants = {
       saveFailed: "保存失败",
       signUpSuccess: "报名成功",
       signUpFail: "报名失败",
+      changeUserInfoTip:"如果想修改此字段，点击右上角头像选择“用户设置”前往SSO修改",
       name: "姓名",
       major: "专业",
       gender: "性别",

src/pages/User.svelte

@@ -33,7 +33,8 @@
   import { localeLanguage } from '../stores/localeLanguage';
   import uploadSvg from '../assets/upload.svg';
   import { isMobile } from '../stores/isMobile';
-  let editMode = false;
+  import { editMode } from '../stores/editMode';
+
   let colleges = Object.keys(DEPARTMENTS);
   let isUploading = false;
   let showSignUpModal = false;
@@ -80,7 +81,7 @@
       uid = '',
       is_quick = false,
     } = $latestInfo || {});
-    editMode = false;
+    editMode.out();
   };
   const signUp = () => {
     if (
@@ -113,7 +114,7 @@
       .then(() => {
         Message.success($t('user.signUpSuccess'));
         showSignUpModal = false;
-        editMode = false;
+        editMode.out();
         return getInfo();
       })
       .then((res) => {
@@ -195,7 +196,7 @@
       Message.success($t('user.saveSuccess'));
     }
     isUploading = false;
-    editMode = false;
+    editMode.out();
   };
 </script>
 
@@ -216,7 +217,7 @@
       </p>
       <div class="flex items-center mb-[1rem]">
         <UserInfoTitle title={$t('user.basicInfo')} />
-        {#if editMode}
+        {#if $editMode}
           <div class="ml-auto flex items-center gap-[1rem]">
             <Button
               onClick={closeEditMode}
@@ -243,11 +244,11 @@
         {:else}
           <div
             on:click={() => {
-              editMode = !editMode;
+              editMode.in();
             }}
             class={cx([
               'ml-auto cursor-pointer text-blue-400 text-sm bg-blue-100 rounded-full p-[7px_20px] max-sm:p-[3px_12px] max-sm:w-[88px] h-[28px] max-sm:justify-center flex gap-[0.25rem] items-center',
-              editMode && 'hidden',
+              $editMode && 'hidden',
             ])}
           >
             <img src={edit} class="max-sm:hidden" alt="edit" />
@@ -256,7 +257,7 @@
         {/if}
       </div>
       <div class="flex mb-[1rem] -translate-y-2 w-full flex-row-reverse">
-        {#if editMode && $recruitment && $recruitment.uid !== $userInfo.applications[0]?.recruitment_id && new Date().getTime() >= new Date($recruitment.beginning).getTime() && new Date().getTime() <= new Date($recruitment.deadline).getTime()}
+        {#if !$editMode && $recruitment && $recruitment.uid !== $userInfo.applications[0]?.recruitment_id && new Date().getTime() >= new Date($recruitment.beginning).getTime() && new Date().getTime() <= new Date($recruitment.deadline).getTime()}
           <Popover style="white" direct="top" questionDirection="end">
             <Button
               onClick={() => (showSignUpModal = true)}
@@ -277,6 +278,9 @@
           necessary
           name={$t('user.name')}
           bind:content={$userInfo.name}
+          tips={$t("user.changeUserInfoTip")}
+          editMode={$editMode}
+          isDisabled={true}
         />
         <SingleSelectInfo
           necessary
@@ -286,14 +290,14 @@
         />
         <SingleSelectInfo
           necessary
-          {editMode}
+          editMode={$editMode}
           name={$t('user.grade')}
           bind:content={grade}
           selectItems={grades}
         />
         <SingleSelectInfo
           selectItems={colleges}
-          {editMode}
+          editMode={$editMode}
           onChange={() => (major = '')}
           necessary
           name={$t('user.college')}
@@ -302,13 +306,13 @@
         <SingleSelectInfo
           placeholder={majors.length ? '' : '请选择学院'}
           selectItems={majors}
-          {editMode}
+          editMode={$editMode}
           necessary
           name={$t('user.major')}
           bind:content={major}
         />
         <SingleSelectInfo
-          {editMode}
+          editMode={$editMode}
           necessary
           name={$t('user.rank')}
           bind:content={rank}
@@ -318,19 +322,23 @@
           necessary
           name={$t('user.phone')}
           bind:content={$userInfo.phone}
+          isDisabled={true}
         />
         <SingleInputInfo
           necessary
           name={$t('user.email')}
           bind:content={$userInfo.email}
+          tips={$t("user.changeUserInfoTip")}
+          editMode={$editMode}
+          isDisabled={true}
         />
         <SingleInputInfo
-          {editMode}
+          editMode={$editMode}
           name={$t('user.recommender')}
           bind:content={referrer}
         />
         <SingleSelectInfo
-          editMode={editMode &&
+          editMode={$editMode &&
             (!$recruitment ||
               $userInfo?.applications[0]?.recruitment_id !== $recruitment.uid)}
           necessary
@@ -348,7 +356,7 @@
             <SingleSelectInfo
               className="flex-shrink-0 max-sm:w-[calc(100%_-_24px)]"
               slot="children"
-              {editMode}
+              editMode={$editMode}
               necessary
               name={$t('user.isQuick')}
               bind:content={isQuick}
@@ -363,11 +371,11 @@
           </p>
           <textarea
             bind:value={intro}
-            disabled={!editMode}
+            disabled={!$editMode}
             placeholder={$t('user.placeholder')}
             class={cx([
               'w-full max-sm:text-xs transition-all outline-none border-[1px] focus:border-[#165DFF] resize-none rounded-[8px] p-[0.75rem_1rem] bg-[#FAFAFA] h-[10rem]',
-              editMode
+              $editMode
                 ? 'bg-transparent border-gray-200'
                 : 'border-transparent',
             ])}
@@ -379,7 +387,7 @@
       <div
         class="sm:flex sm:justify-center bg-[#FAFAFA] rounded-[1rem] max-sm:rounded-[4px] py-[2rem] max-sm:p-[18px] items-center flex-col gap-[1rem]"
       >
-        {#if editMode}
+        {#if $editMode}
           <div
             on:click={() => fileInput.click()}
             class="flex sm:hidden gap-[1rem]"