Merge branch 'sso' of shuzhihua/randd-vue into master

index.html

@@ -41,6 +41,7 @@
           font-size: 20px;
           font-weight: bold;
           text-align: center;
+          color: #2d8cf0 !important;
         }
 
         .app-loading .app-loading-logo {
@@ -50,6 +51,7 @@
           justify-content: center;
           width: 118px;
           height: 118px;
+          color: #2d8cf0;
           margin: 0 auto 18px auto;
           border-radius: 50%;
           background: radial-gradient(
@@ -302,349 +304,6 @@
       <div class="app-loading">
         <div class="app-loading-wrap">
           <div class="app-loading-title">
-            <!-- From Uiverse.io by Juanes200122 -->
-            <!-- <svg
-              id="svg-global"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 94 136"
-              height="136"
-              width="94"
-            >
-              <path
-                stroke="#4B22B5"
-                d="M87.3629 108.433L49.1073 85.3765C47.846 84.6163 45.8009 84.6163 44.5395 85.3765L6.28392 108.433C5.02255 109.194 5.02255 110.426 6.28392 111.187L44.5395 134.243C45.8009 135.004 47.846 135.004 49.1073 134.243L87.3629 111.187C88.6243 110.426 88.6243 109.194 87.3629 108.433Z"
-                id="line-v1"
-              ></path>
-              <path
-                stroke="#5728CC"
-                d="M91.0928 95.699L49.2899 70.5042C47.9116 69.6734 45.6769 69.6734 44.2986 70.5042L2.49568 95.699C1.11735 96.5298 1.11735 97.8767 2.49568 98.7074L44.2986 123.902C45.6769 124.733 47.9116 124.733 49.2899 123.902L91.0928 98.7074C92.4712 97.8767 92.4712 96.5298 91.0928 95.699Z"
-                id="line-v2"
-              ></path>
-              <g id="node-server">
-                <path
-                  fill="url(#paint0_linear_204_217)"
-                  d="M2.48637 72.0059L43.8699 96.9428C45.742 98.0709 48.281 97.8084 50.9284 96.2133L91.4607 71.7833C92.1444 71.2621 92.4197 70.9139 92.5421 70.1257V86.1368C92.5421 86.9686 92.0025 87.9681 91.3123 88.3825C84.502 92.4724 51.6503 112.204 50.0363 113.215C48.2352 114.343 45.3534 114.343 43.5523 113.215C41.9261 112.197 8.55699 91.8662 2.08967 87.926C1.39197 87.5011 1.00946 86.5986 1.00946 85.4058V70.1257C1.11219 70.9289 1.49685 71.3298 2.48637 72.0059Z"
-                ></path>
-                <path
-                  stroke="url(#paint2_linear_204_217)"
-                  fill="url(#paint1_linear_204_217)"
-                  d="M91.0928 68.7324L49.2899 43.5375C47.9116 42.7068 45.6769 42.7068 44.2986 43.5375L2.49568 68.7324C1.11735 69.5631 1.11735 70.91 2.49568 71.7407L44.2986 96.9356C45.6769 97.7663 47.9116 97.7663 49.2899 96.9356L91.0928 71.7407C92.4712 70.91 92.4712 69.5631 91.0928 68.7324Z"
-                ></path>
-                <mask
-                  height="41"
-                  width="67"
-                  y="50"
-                  x="13"
-                  maskUnits="userSpaceOnUse"
-                  style="mask-type: luminance"
-                  id="mask0_204_217"
-                >
-                  <path
-                    fill="white"
-                    d="M78.3486 68.7324L49.0242 51.0584C47.6459 50.2276 45.4111 50.2276 44.0328 51.0584L14.7084 68.7324C13.3301 69.5631 13.3301 70.91 14.7084 71.7407L44.0328 89.4148C45.4111 90.2455 47.6459 90.2455 49.0242 89.4148L78.3486 71.7407C79.7269 70.91 79.727 69.5631 78.3486 68.7324Z"
-                  ></path>
-                </mask>
-                <g mask="url(#mask0_204_217)">
-                  <path
-                    fill="#332C94"
-                    d="M78.3486 68.7324L49.0242 51.0584C47.6459 50.2276 45.4111 50.2276 44.0328 51.0584L14.7084 68.7324C13.3301 69.5631 13.3301 70.91 14.7084 71.7407L44.0328 89.4148C45.4111 90.2455 47.6459 90.2455 49.0242 89.4148L78.3486 71.7407C79.7269 70.91 79.727 69.5631 78.3486 68.7324Z"
-                  ></path>
-                  <mask
-                    height="29"
-                    width="48"
-                    y="56"
-                    x="23"
-                    maskUnits="userSpaceOnUse"
-                    style="mask-type: luminance"
-                    id="mask1_204_217"
-                  >
-                    <path
-                      fill="white"
-                      d="M68.9898 68.7324L49.0242 56.699C47.6459 55.8683 45.4111 55.8683 44.0328 56.699L24.0673 68.7324C22.6889 69.5631 22.6889 70.91 24.0673 71.7407L44.0328 83.7741C45.4111 84.6048 47.6459 84.6048 49.0242 83.7741L68.9898 71.7407C70.3681 70.91 70.3681 69.5631 68.9898 68.7324Z"
-                    ></path>
-                  </mask>
-                  <g mask="url(#mask1_204_217)">
-                    <path
-                      fill="#5E5E5E"
-                      d="M68.9898 68.7324L49.0242 56.699C47.6459 55.8683 45.4111 55.8683 44.0328 56.699L24.0673 68.7324C22.6889 69.5631 22.6889 70.91 24.0673 71.7407L44.0328 83.7741C45.4111 84.6048 47.6459 84.6048 49.0242 83.7741L68.9898 71.7407C70.3681 70.91 70.3681 69.5631 68.9898 68.7324Z"
-                    ></path>
-                    <path
-                      fill="#71B1C6"
-                      d="M70.1311 69.3884L48.42 56.303C47.3863 55.6799 45.7103 55.6799 44.6765 56.303L22.5275 69.6523C21.4938 70.2754 21.4938 71.2855 22.5275 71.9086L44.2386 84.994C45.2723 85.617 46.9484 85.617 47.9821 84.994L70.1311 71.6446C71.1648 71.0216 71.1648 70.0114 70.1311 69.3884Z"
-                    ></path>
-                    <path
-                      fill="#80C0D4"
-                      d="M70.131 70.8923L48.4199 57.8069C47.3862 57.1839 45.7101 57.1839 44.6764 57.8069L22.5274 71.1562C21.4937 71.7793 21.4937 72.7894 22.5274 73.4125L44.2385 86.4979C45.2722 87.1209 46.9482 87.1209 47.982 86.4979L70.131 73.1486C71.1647 72.5255 71.1647 71.5153 70.131 70.8923Z"
-                    ></path>
-                    <path
-                      fill="#89D3EB"
-                      d="M69.751 72.1675L48.4199 59.3111C47.3862 58.6881 45.7101 58.6881 44.6764 59.3111L23.2004 72.2548C22.1667 72.8779 22.1667 73.888 23.2004 74.5111L44.5315 87.3674C45.5653 87.9905 47.2413 87.9905 48.2751 87.3674L69.751 74.4238C70.7847 73.8007 70.7847 72.7905 69.751 72.1675Z"
-                    ></path>
-                    <path
-                      fill="#97E6FF"
-                      d="M68.5091 72.9231L48.4199 60.8153C47.3862 60.1922 45.7101 60.1922 44.6764 60.8153L24.8146 72.7861C23.7808 73.4091 23.7808 74.4193 24.8146 75.0424L44.9038 87.1502C45.9375 87.7733 47.6135 87.7733 48.6473 87.1502L68.5091 75.1794C69.5428 74.5563 69.5428 73.5462 68.5091 72.9231Z"
-                    ></path>
-                    <path
-                      fill="#97E6FF"
-                      d="M66.6747 73.3219L48.4199 62.3197C47.3862 61.6966 45.7101 61.6966 44.6764 62.3197L26.4412 73.3101C25.4075 73.9332 25.4075 74.9433 26.4412 75.5664L44.696 86.5686C45.7297 87.1917 47.4058 87.1917 48.4395 86.5686L66.6747 75.5782C67.7084 74.9551 67.7084 73.945 66.6747 73.3219Z"
-                    ></path>
-                  </g>
-                  <path
-                    stroke-width="0.5"
-                    stroke="#F4F4F4"
-                    d="M68.9898 68.7324L49.0242 56.699C47.6459 55.8683 45.4111 55.8683 44.0328 56.699L24.0673 68.7324C22.6889 69.5631 22.6889 70.91 24.0673 71.7407L44.0328 83.7741C45.4111 84.6048 47.6459 84.6048 49.0242 83.7741L68.9898 71.7407C70.3681 70.91 70.3681 69.5631 68.9898 68.7324Z"
-                  ></path>
-                </g>
-              </g>
-              <g id="particles">
-                <path
-                  fill="url(#paint3_linear_204_217)"
-                  d="M43.5482 32.558C44.5429 32.558 45.3493 31.7162 45.3493 30.6778C45.3493 29.6394 44.5429 28.7976 43.5482 28.7976C42.5535 28.7976 41.7471 29.6394 41.7471 30.6778C41.7471 31.7162 42.5535 32.558 43.5482 32.558Z"
-                  class="particle p1"
-                ></path>
-                <path
-                  fill="url(#paint4_linear_204_217)"
-                  d="M50.0323 48.3519C51.027 48.3519 51.8334 47.5101 51.8334 46.4717C51.8334 45.4333 51.027 44.5915 50.0323 44.5915C49.0375 44.5915 48.2311 45.4333 48.2311 46.4717C48.2311 47.5101 49.0375 48.3519 50.0323 48.3519Z"
-                  class="particle p2"
-                ></path>
-                <path
-                  fill="url(#paint5_linear_204_217)"
-                  d="M40.3062 62.6416C41.102 62.6416 41.7471 61.9681 41.7471 61.1374C41.7471 60.3067 41.102 59.6332 40.3062 59.6332C39.5104 59.6332 38.8653 60.3067 38.8653 61.1374C38.8653 61.9681 39.5104 62.6416 40.3062 62.6416Z"
-                  class="particle p3"
-                ></path>
-                <path
-                  fill="url(#paint6_linear_204_217)"
-                  d="M50.7527 73.9229C52.1453 73.9229 53.2743 72.7444 53.2743 71.2906C53.2743 69.8368 52.1453 68.6583 50.7527 68.6583C49.3601 68.6583 48.2311 69.8368 48.2311 71.2906C48.2311 72.7444 49.3601 73.9229 50.7527 73.9229Z"
-                  class="particle p4"
-                ></path>
-                <path
-                  fill="url(#paint7_linear_204_217)"
-                  d="M48.5913 76.9312C49.1882 76.9312 49.672 76.4262 49.672 75.8031C49.672 75.1801 49.1882 74.675 48.5913 74.675C47.9945 74.675 47.5107 75.1801 47.5107 75.8031C47.5107 76.4262 47.9945 76.9312 48.5913 76.9312Z"
-                  class="particle p5"
-                ></path>
-                <path
-                  fill="url(#paint8_linear_204_217)"
-                  d="M52.9153 67.1541C53.115 67.1541 53.2768 66.9858 53.2768 66.7781C53.2768 66.5704 53.115 66.402 52.9153 66.402C52.7156 66.402 52.5538 66.5704 52.5538 66.7781C52.5538 66.9858 52.7156 67.1541 52.9153 67.1541Z"
-                  class="particle p6"
-                ></path>
-                <path
-                  fill="url(#paint9_linear_204_217)"
-                  d="M52.1936 43.8394C52.7904 43.8394 53.2743 43.3344 53.2743 42.7113C53.2743 42.0883 52.7904 41.5832 52.1936 41.5832C51.5967 41.5832 51.1129 42.0883 51.1129 42.7113C51.1129 43.3344 51.5967 43.8394 52.1936 43.8394Z"
-                  class="particle p7"
-                ></path>
-                <path
-                  fill="url(#paint10_linear_204_217)"
-                  d="M57.2367 29.5497C57.8335 29.5497 58.3173 29.0446 58.3173 28.4216C58.3173 27.7985 57.8335 27.2935 57.2367 27.2935C56.6398 27.2935 56.156 27.7985 56.156 28.4216C56.156 29.0446 56.6398 29.5497 57.2367 29.5497Z"
-                  class="particle p8"
-                ></path>
-                <path
-                  fill="url(#paint11_linear_204_217)"
-                  d="M43.9084 34.8144C44.3063 34.8144 44.6289 34.4777 44.6289 34.0623C44.6289 33.647 44.3063 33.3102 43.9084 33.3102C43.5105 33.3102 43.188 33.647 43.188 34.0623C43.188 34.4777 43.5105 34.8144 43.9084 34.8144Z"
-                  class="particle p9"
-                ></path>
-              </g>
-              <g id="reflectores">
-                <path
-                  fill-opacity="0.2"
-                  fill="url(#paint12_linear_204_217)"
-                  d="M49.2037 57.0009L68.7638 68.7786C69.6763 69.3089 69.7967 69.9684 69.794 70.1625V13.7383C69.7649 13.5587 69.6807 13.4657 69.4338 13.3096L48.4832 0.601307C46.9202 -0.192595 46.0788 -0.208238 44.6446 0.601307L23.6855 13.2118C23.1956 13.5876 23.1966 13.7637 23.1956 14.4904L23.246 70.1625C23.2948 69.4916 23.7327 69.0697 25.1768 68.2447L43.9084 57.0008C44.8268 56.4344 45.3776 56.2639 46.43 56.2487C47.5299 56.2257 48.1356 56.4222 49.2037 57.0009Z"
-                ></path>
-                <path
-                  fill-opacity="0.2"
-                  fill="url(#paint13_linear_204_217)"
-                  d="M48.8867 27.6696C49.9674 26.9175 68.6774 14.9197 68.6774 14.9197C69.3063 14.5327 69.7089 14.375 69.7796 13.756V70.1979C69.7775 70.8816 69.505 71.208 68.7422 71.7322L48.9299 83.6603C48.2003 84.1258 47.6732 84.2687 46.5103 84.2995C45.3295 84.2679 44.8074 84.1213 44.0907 83.6603L24.4348 71.8149C23.5828 71.3313 23.2369 71.0094 23.2316 70.1979L23.1884 13.9816C23.1798 14.8398 23.4982 15.3037 24.7518 16.0874C24.7518 16.0874 42.7629 26.9175 44.2038 27.6696C45.6447 28.4217 46.0049 28.4217 46.5452 28.4217C47.0856 28.4217 47.806 28.4217 48.8867 27.6696Z"
-                ></path>
-              </g>
-              <g id="panel-rigth">
-                <mask fill="white" id="path-26-inside-1_204_217">
-                  <path
-                    d="M72 91.8323C72 90.5121 72.9268 88.9068 74.0702 88.2467L87.9298 80.2448C89.0731 79.5847 90 80.1198 90 81.44V81.44C90 82.7602 89.0732 84.3656 87.9298 85.0257L74.0702 93.0275C72.9268 93.6876 72 93.1525 72 91.8323V91.8323Z"
-                  ></path>
-                </mask>
-                <path
-                  fill="#91DDFB"
-                  d="M72 91.8323C72 90.5121 72.9268 88.9068 74.0702 88.2467L87.9298 80.2448C89.0731 79.5847 90 80.1198 90 81.44V81.44C90 82.7602 89.0732 84.3656 87.9298 85.0257L74.0702 93.0275C72.9268 93.6876 72 93.1525 72 91.8323V91.8323Z"
-                ></path>
-                <path
-                  mask="url(#path-26-inside-1_204_217)"
-                  fill="#489CB7"
-                  d="M72 89.4419L90 79.0496L72 89.4419ZM90.6928 81.44C90.6928 82.9811 89.6109 84.8551 88.2762 85.6257L74.763 93.4275C73.237 94.3085 72 93.5943 72 91.8323V91.8323C72 92.7107 72.9268 92.8876 74.0702 92.2275L87.9298 84.2257C88.6905 83.7865 89.3072 82.7184 89.3072 81.84L90.6928 81.44ZM72 94.2227V89.4419V94.2227ZM88.2762 80.0448C89.6109 79.2742 90.6928 79.8989 90.6928 81.44V81.44C90.6928 82.9811 89.6109 84.8551 88.2762 85.6257L87.9298 84.2257C88.6905 83.7865 89.3072 82.7184 89.3072 81.84V81.84C89.3072 80.5198 88.6905 79.8056 87.9298 80.2448L88.2762 80.0448Z"
-                ></path>
-                <mask fill="white" id="path-28-inside-2_204_217">
-                  <path
-                    d="M67 94.6603C67 93.3848 67.8954 91.8339 69 91.1962V91.1962C70.1046 90.5584 71 91.0754 71 92.3509V92.5129C71 93.7884 70.1046 95.3393 69 95.977V95.977C67.8954 96.6147 67 96.0978 67 94.8223V94.6603Z"
-                  ></path>
-                </mask>
-                <path
-                  fill="#91DDFB"
-                  d="M67 94.6603C67 93.3848 67.8954 91.8339 69 91.1962V91.1962C70.1046 90.5584 71 91.0754 71 92.3509V92.5129C71 93.7884 70.1046 95.3393 69 95.977V95.977C67.8954 96.6147 67 96.0978 67 94.8223V94.6603Z"
-                ></path>
-                <path
-                  mask="url(#path-28-inside-2_204_217)"
-                  fill="#489CB7"
-                  d="M67 92.3509L71 90.0415L67 92.3509ZM71.6928 92.5129C71.6928 94.0093 70.6423 95.8288 69.3464 96.577L69.3464 96.577C68.0505 97.3252 67 96.7187 67 95.2223V94.8223C67 95.6559 67.8954 95.8147 69 95.177L69 95.177C69.7219 94.7602 70.3072 93.7465 70.3072 92.9129L71.6928 92.5129ZM67 97.1317V92.3509V97.1317ZM69.2762 91.0367C70.6109 90.2661 71.6928 90.8908 71.6928 92.4319V92.5129C71.6928 94.0093 70.6423 95.8288 69.3464 96.577L69 95.177C69.7219 94.7602 70.3072 93.7465 70.3072 92.9129V92.7509C70.3072 91.4754 69.7219 90.7794 69 91.1962L69.2762 91.0367Z"
-                ></path>
-              </g>
-              <defs>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="92.0933"
-                  x2="92.5421"
-                  y1="92.0933"
-                  x1="1.00946"
-                  id="paint0_linear_204_217"
-                >
-                  <stop stop-color="#5727CC"></stop>
-                  <stop stop-color="#4354BF" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="91.1638"
-                  x2="6.72169"
-                  y1="70"
-                  x1="92.5"
-                  id="paint1_linear_204_217"
-                >
-                  <stop stop-color="#4559C4"></stop>
-                  <stop stop-color="#332C94" offset="0.29"></stop>
-                  <stop stop-color="#5727CB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="85.0762"
-                  x2="3.55544"
-                  y1="70"
-                  x1="92.5"
-                  id="paint2_linear_204_217"
-                >
-                  <stop stop-color="#91DDFB"></stop>
-                  <stop stop-color="#8841D5" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="32.558"
-                  x2="43.5482"
-                  y1="28.7976"
-                  x1="43.5482"
-                  id="paint3_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="48.3519"
-                  x2="50.0323"
-                  y1="44.5915"
-                  x1="50.0323"
-                  id="paint4_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="62.6416"
-                  x2="40.3062"
-                  y1="59.6332"
-                  x1="40.3062"
-                  id="paint5_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="73.9229"
-                  x2="50.7527"
-                  y1="68.6583"
-                  x1="50.7527"
-                  id="paint6_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="76.9312"
-                  x2="48.5913"
-                  y1="74.675"
-                  x1="48.5913"
-                  id="paint7_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="67.1541"
-                  x2="52.9153"
-                  y1="66.402"
-                  x1="52.9153"
-                  id="paint8_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="43.8394"
-                  x2="52.1936"
-                  y1="41.5832"
-                  x1="52.1936"
-                  id="paint9_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="29.5497"
-                  x2="57.2367"
-                  y1="27.2935"
-                  x1="57.2367"
-                  id="paint10_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="34.8144"
-                  x2="43.9084"
-                  y1="33.3102"
-                  x1="43.9084"
-                  id="paint11_linear_204_217"
-                >
-                  <stop stop-color="#5927CE"></stop>
-                  <stop stop-color="#91DDFB" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="16.0743"
-                  x2="62.9858"
-                  y1="88.5145"
-                  x1="67.8638"
-                  id="paint12_linear_204_217"
-                >
-                  <stop stop-color="#97E6FF"></stop>
-                  <stop stop-opacity="0" stop-color="white" offset="1"></stop>
-                </linearGradient>
-                <linearGradient
-                  gradientUnits="userSpaceOnUse"
-                  y2="39.4139"
-                  x2="31.4515"
-                  y1="88.0938"
-                  x1="36.2597"
-                  id="paint13_linear_204_217"
-                >
-                  <stop stop-color="#97E6FF"></stop>
-                  <stop stop-opacity="0" stop-color="white" offset="1"></stop>
-                </linearGradient>
-              </defs>
-            </svg> -->
-
             <div class="app-loading-logo">
               <img src="./src/assets/imgs/logo.png" alt="logo" />
             </div>

src/App.vue

@@ -4,9 +4,12 @@ import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import routerSearch from '@/components/RouterSearch/index.vue'
+import { useAutoLogout } from './composable/useAutoLogout'
 
 defineOptions({ name: 'APP' })
 
+const { addListeners, removeListeners } = useAutoLogout()
+
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('app')
 const appStore = useAppStore()
@@ -14,6 +17,31 @@ const currentSize = computed(() => appStore.getCurrentSize)
 const greyMode = computed(() => appStore.getGreyMode)
 const { wsCache } = useCache()
 
+const route = useRoute()
+const whiteList = [
+  '/login',
+  '/social-login',
+  '/auth-redirect',
+  '/bind',
+  '/register',
+  '/oauthLogin/gitee',
+  '/dingding'
+]
+
+watch(
+  () => route.path,
+  (newPath) => {
+    if (whiteList.includes(newPath)) {
+      console.log('进入白名单页面，移除超时检测')
+      removeListeners()
+    } else {
+      console.log('进入受控页面，开启超时检测')
+      addListeners()
+    }
+  },
+  { immediate: true } // 初始化时立即执行一次
+)
+
 // 根据浏览器当前主题设置系统主题色
 const setDefaultTheme = () => {
   let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)

src/composable/useAutoLogout.ts

@@ -0,0 +1,81 @@
+import { onMounted, onUnmounted } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/modules/user'
+import { getAccessToken } from '@/utils/auth'
+import { throttle } from 'lodash-es'
+
+// --- 关键修改：将变量移到函数外部，变成全局共享变量 ---
+let timer: ReturnType<typeof setTimeout> | null = null
+const TIMEOUT = 30 * 60 * 1000 // 30分钟
+const events = ['click', 'mousedown', 'keydown', 'scroll', 'mousemove']
+
+export function useAutoLogout() {
+  const userStore = useUserStore()
+  const router = useRouter()
+
+  // 处理登出逻辑
+  const handleLogout = () => {
+    // 防止重复触发，先清理
+    removeListeners()
+    userStore.loginOut()
+
+    ElMessageBox.alert('长时间未操作，登录已超时，请重新登录！', '提示', {
+      confirmButtonText: '确定',
+      type: 'warning',
+      showClose: false,
+      callback: () => {
+        router.push('/login')
+      }
+    })
+  }
+
+  // 节流的重置计时器
+  const resetTimer = throttle(() => {
+    // 这里引用的 timer 是文件顶部的全局变量
+    if (timer) clearTimeout(timer)
+
+    // 只有有 Token 时才开启倒计时
+    if (getAccessToken()) {
+      timer = setTimeout(handleLogout, TIMEOUT)
+    }
+  }, 1000)
+
+  const addListeners = () => {
+    // 每次添加前先移除，防止重复绑定导致事件堆积
+    removeListeners()
+
+    events.forEach((event) => {
+      window.addEventListener(event, resetTimer)
+    })
+    resetTimer()
+  }
+
+  const removeListeners = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    events.forEach((event) => {
+      window.removeEventListener(event, resetTimer)
+    })
+  }
+
+  // 注意：如果你要在路由守卫中手动控制，
+  // 建议去掉这里的生命周期钩子，或者只在 App.vue 中保留
+  // 如果这里保留，会导致只要 import 并在组件 setup 中调用，就会自动开启监听
+  onMounted(() => {
+    // 如果你想完全由路由守卫控制，注释掉下面这行
+    // addListeners()
+  })
+
+  onUnmounted(() => {
+    // 组件卸载时销毁监听
+    removeListeners()
+  })
+
+  return {
+    addListeners,
+    removeListeners
+  }
+}

src/views/Login/Login.vue

@@ -10,7 +10,9 @@
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
           <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
-          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+          <span class="text-20px font-bold text-[#08a6f2]">{{
+            underlineToHump(appStore.getTitle)
+          }}</span>
         </div>
         <!-- 左边的背景图 + 欢迎语 -->
         <div class="h-[calc(100%-60px)] flex items-center justify-center">

src/views/expert/list/index.vue

@@ -1,14 +1,56 @@
 <template>
   <div class="expert-step-table">
-    <!-- <header class="table-intro">
-      <div class="intro-copy">
-        <h1>专家梯队</h1>
+    <el-card>
+      <div class="search-layout">
+        <section class="filter-panel">
+          <div class="filter-fields">
+            <el-input v-model="searchQuery" placeholder="姓名 / 专业 / 业绩" clearable />
+
+            <el-select v-model="selectedEducation" placeholder="选择学历" clearable>
+              <el-option
+                v-for="option in educationOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+
+            <el-select v-model="selectedTeam" placeholder="选择梯队" clearable>
+              <el-option
+                v-for="option in teamOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </div>
+        </section>
+
+        <aside class="word-cloud-panel">
+          <div class="word-cloud">
+            <button
+              v-for="word in wordCloudWords"
+              :key="word.text"
+              type="button"
+              class="cloud-word"
+              :style="{
+                left: word.left,
+                top: word.top,
+                '--rotate': `${word.rotate}deg`,
+                fontSize: `${word.size}px`,
+                color: word.color,
+                transform: `rotate(${word.rotate}deg)`
+              }"
+              @click="handleWordClick(word.text)"
+            >
+              {{ word.text }}
+            </button>
+          </div>
+        </aside>
       </div>
-    </header> -->
 
-    <el-card>
       <div
-        v-for="(row, rowIndex) in tableData"
+        v-for="(row, rowIndex) in filteredTableData"
         :key="row.teamName"
         class="ladder-row"
         :style="{ width: row.tableWidth, '--row-bg': row.backgroundColor }"
@@ -21,7 +63,7 @@
         <table class="content-table" :aria-label="row.teamName">
           <colgroup>
             <col
-              v-for="(_, index) in row.columnWidths"
+              v-for="(_, index) in row.columnWidths || []"
               :key="index"
               :style="{ width: `${getColumnPercent(row, index)}%` }"
             />
@@ -30,7 +72,7 @@
           <tbody>
             <tr>
               <td
-                v-for="(cell, index) in row.cells"
+                v-for="(cell, index) in row.cells || []"
                 :key="index"
                 :class="['step-cell', cell.tone === 'danger' ? 'notice-cell' : '']"
               >
@@ -58,16 +100,94 @@
       </div>
     </el-card>
 
-    <div v-if="selectedMember" class="member-detail">
-      <span class="detail-label">SELECTED EXPERT</span>
-      <strong>{{ selectedMember }}</strong>
-      <span class="detail-copy">已选中，可在此处接入人员详情面板。</span>
-    </div>
+    <el-drawer
+      v-model="drawerVisible"
+      size="56%"
+      :with-header="false"
+      class="expert-drawer"
+      destroy-on-close
+    >
+      <template v-if="activeExpert">
+        <div class="drawer-shell">
+          <header class="drawer-header">
+            <div>
+              <h2>{{ activeExpert.name }} - 专家详情</h2>
+              <p>
+                {{ activeExpert.role }} / {{ activeExpert.team }} /
+                {{ activeExpert.direction.join('、') }}
+              </p>
+            </div>
+          </header>
+
+          <section class="drawer-profile">
+            <div class="profile-aside">
+              <div class="profile-avatar">{{ activeExpert.name.slice(0, 1) }}</div>
+              <div class="profile-tags">
+                <span v-for="tag in activeExpert.tags" :key="tag" class="profile-tag">{{
+                  tag
+                }}</span>
+              </div>
+            </div>
+
+            <div class="profile-main">
+              <div class="info-block">
+                <span class="info-label">基础信息</span>
+                <strong>年龄 {{ activeExpert.age }}，学历 {{ activeExpert.education }}</strong>
+              </div>
+
+              <div class="info-block">
+                <span class="info-label">专业方向</span>
+                <strong>{{ activeExpert.direction.join('、') }}</strong>
+              </div>
+
+              <div class="info-block">
+                <span class="info-label">主要业绩</span>
+                <strong>{{ activeExpert.achievement }}</strong>
+              </div>
+
+              <div class="info-block">
+                <span class="info-label">可参与事项</span>
+                <strong>{{ activeExpert.tasks.join(' / ') }}</strong>
+              </div>
+
+              <div class="profile-actions">
+                <el-button type="success" size="large">邀请评审</el-button>
+                <el-button size="large" plain>维护档案</el-button>
+                <el-button size="large" plain>下载履历</el-button>
+              </div>
+            </div>
+          </section>
+
+          <section class="record-panel">
+            <div class="record-header">
+              <h3>调用记录</h3>
+              <p>用于判断专家近期占用情况和评审适配度</p>
+            </div>
+
+            <el-table :data="activeExpert.records" class="record-table" table-layout="fixed">
+              <el-table-column prop="date" label="日期" min-width="110" />
+              <el-table-column prop="event" label="事项" min-width="130" />
+              <el-table-column
+                prop="project"
+                label="关联项目"
+                min-width="170"
+                show-overflow-tooltip
+              />
+              <el-table-column label="结果" min-width="96">
+                <template #default="{ row }">
+                  <span :class="['record-badge', row.statusType]">{{ row.status }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </section>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 type CellItem =
   | {
@@ -82,15 +202,40 @@ type CellItem =
 
 type TableRow = {
   teamName: string
+  education: string
+  searchText: string
   tableWidth: string
   backgroundColor: string
   columnWidths: number[]
   cells: CellItem[]
 }
 
+type ExpertRecord = {
+  date: string
+  event: string
+  project: string
+  status: string
+  statusType: 'success' | 'primary'
+}
+
+type ExpertProfile = {
+  name: string
+  role: string
+  team: string
+  age: number
+  education: string
+  direction: string[]
+  achievement: string
+  tasks: string[]
+  tags: string[]
+  records: ExpertRecord[]
+}
+
 const tableData: TableRow[] = [
   {
     teamName: '第一梯队',
+    education: '博士',
+    searchText: '朱桂林 软件工程 50项成果',
     tableWidth: '64%',
     backgroundColor: '#eef6ff',
     columnWidths: [1.5, 1.5, 1.5, 1.5, 1.5],
@@ -122,6 +267,8 @@ const tableData: TableRow[] = [
   },
   {
     teamName: '第二梯队',
+    education: '硕士',
+    searchText: '孙乐臻 金融风险 30项业绩',
     tableWidth: '75%',
     backgroundColor: '#f2faef',
     columnWidths: [1.8, 1.8, 1.8, 1.8, 1.8],
@@ -135,6 +282,8 @@ const tableData: TableRow[] = [
   },
   {
     teamName: '第三梯队',
+    education: '本科',
+    searchText: '王军 互联网产品 20项成果',
     tableWidth: '100%',
     backgroundColor: '#fff8e8',
     columnWidths: [2, 2, 2, 2, 2],
@@ -167,16 +316,163 @@ const tableData: TableRow[] = [
 ]
 
 const selectedMember = ref('')
+const searchQuery = ref('')
+const selectedEducation = ref('')
+const selectedTeam = ref('')
+const drawerVisible = ref(false)
+const activeExpert = ref<ExpertProfile | null>(null)
+
+const expertProfileMap: Record<string, ExpertProfile> = {
+  朱桂林: {
+    name: '朱桂林',
+    role: '技术专家',
+    team: '第一梯队',
+    age: 52,
+    education: '博士',
+    direction: ['材料工程', '可靠性验证', '失效分析'],
+    achievement:
+      '高温井下材料可靠性验证、材料失效分析专家评审；参与 6 个科研项目评审，2 个项目验收专家组。',
+    tasks: ['立项预审', '中期检查', '结题验收', '成果评审', '专项咨询'],
+    tags: ['技术专家', '第一梯队', '启用'],
+    records: [
+      {
+        date: '2026-08-01',
+        event: '中期检查评审',
+        project: '智能检测算法研发',
+        status: '已完成',
+        statusType: 'success'
+      },
+      {
+        date: '2026-07-18',
+        event: '立项预审',
+        project: '平台数据治理标准',
+        status: '已反馈意见',
+        statusType: 'primary'
+      }
+    ]
+  },
+  孙乐臻: {
+    name: '孙乐臻',
+    role: '经营专家',
+    team: '第二梯队',
+    age: 46,
+    education: '硕士',
+    direction: ['经营管理', '投资评估', '风险控制'],
+    achievement: '参与多个经营分析专项评审，长期负责重点项目投资效益与风险识别。',
+    tasks: ['立项预审', '预算审查', '经营诊断', '专项咨询'],
+    tags: ['经营专家', '第二梯队', '启用'],
+    records: [
+      {
+        date: '2026-08-05',
+        event: '预算审查',
+        project: '区域经营提升计划',
+        status: '已完成',
+        statusType: 'success'
+      }
+    ]
+  },
+  王军: {
+    name: '王军',
+    role: '技术专家',
+    team: '第三梯队',
+    age: 41,
+    education: '本科',
+    direction: ['互联网产品', '数字化平台', '需求架构'],
+    achievement: '参与多个数字平台项目方案论证和成果评审，具备丰富的产品落地经验。',
+    tasks: ['方案评审', '中期检查', '成果评审'],
+    tags: ['技术专家', '第三梯队', '启用'],
+    records: [
+      {
+        date: '2026-07-26',
+        event: '成果评审',
+        project: '协同应用平台升级',
+        status: '已完成',
+        statusType: 'success'
+      }
+    ]
+  }
+}
+
+const wordCloudWords = [
+  { text: '地质', size: 24, rotate: -8, color: '#7fcd72', left: '8%', top: '52%' },
+  { text: '油藏', size: 30, rotate: 6, color: '#8ea4d8', left: '26%', top: '38%' },
+  { text: '钻井', size: 27, rotate: -10, color: '#f0df62', left: '46%', top: '22%' },
+  { text: '采油工艺', size: 22, rotate: 8, color: '#b26c41', left: '60%', top: '14%' },
+  { text: '压裂', size: 21, rotate: -16, color: '#3d79a5', left: '74%', top: '48%' },
+  { text: '酸化', size: 18, rotate: 12, color: '#f1b477', left: '14%', top: '16%' },
+  { text: '修井', size: 19, rotate: -12, color: '#d26ea8', left: '36%', top: '66%' },
+  { text: '博士', size: 17, rotate: 5, color: '#7e8d64', left: '58%', top: '64%' },
+  { text: '研究生', size: 16, rotate: -5, color: '#7f85b5', left: '79%', top: '28%' }
+]
+
+const educationOptions = [
+  { label: '全部', value: '' },
+  { label: '博士', value: '博士' },
+  { label: '硕士', value: '硕士' },
+  { label: '本科', value: '本科' },
+  { label: '专科', value: '专科' }
+]
+
+const teamOptions = [
+  { label: '全部', value: '' },
+  { label: '第一梯队', value: '第一梯队' },
+  { label: '第二梯队', value: '第二梯队' },
+  { label: '第三梯队', value: '第三梯队' }
+]
+
 const cellBookmarks = ['技术', '经营', '商务', '安全', '法务']
 
 const getColumnPercent = (row: TableRow, index: number) => {
+  if (!row.columnWidths || row.columnWidths.length === 0) {
+    return '0'
+  }
   const total = row.columnWidths.reduce((sum, width) => sum + width, 0)
-
-  return ((row.columnWidths[index] / total) * 100).toFixed(4)
+  const value = row.columnWidths[index] ?? 0
+  if (total === 0) {
+    return '0'
+  }
+  return ((value / total) * 100).toFixed(4)
 }
 
+const filteredTableData = computed(() => {
+  return tableData.filter((row) => {
+    const query = searchQuery.value.trim().toLowerCase()
+    const nameMatch = row.searchText.toLowerCase().includes(query)
+    const teamMatch = row.teamName.toLowerCase().includes(query)
+    const educationMatch = selectedEducation.value
+      ? row.education === selectedEducation.value
+      : true
+    const selectedTeamMatch = selectedTeam.value ? row.teamName === selectedTeam.value : true
+
+    if (query && !nameMatch && !teamMatch) {
+      return false
+    }
+    if (!educationMatch || !selectedTeamMatch) {
+      return false
+    }
+    return true
+  })
+})
+
 const handleMemberClick = (member: string) => {
   selectedMember.value = member
+  activeExpert.value = expertProfileMap[member] || {
+    name: member,
+    role: '专家',
+    team: '待分配梯队',
+    age: 45,
+    education: '研究生',
+    direction: ['领域研究', '项目评审'],
+    achievement: '已录入专家基础信息，详细履历可继续补充。',
+    tasks: ['立项预审', '专项咨询'],
+    tags: ['专家', '待补充'],
+    records: []
+  }
+  drawerVisible.value = true
+}
+
+const handleWordClick = (word: string) => {
+  searchQuery.value = word
 }
 </script>
 
@@ -186,15 +482,194 @@ const handleMemberClick = (member: string) => {
   --muted-ink: #718092;
   --line: rgba(28, 44, 62, 0.18);
   width: 100%;
-  max-width: 1440px;
+  max-width: none;
   margin: 0 auto;
-  padding: 34px;
+  // padding: 34px;
   overflow: hidden;
   box-sizing: border-box;
 
   color: var(--ink);
 }
 
+.expert-step-table el-card {
+  width: 100%;
+}
+
+.search-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
+  gap: 18px;
+  margin-bottom: 15px;
+}
+
+.filter-panel,
+.word-cloud-panel {
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid rgba(28, 44, 62, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.filter-panel {
+  background: linear-gradient(160deg, rgba(237, 245, 249, 0.95), rgba(247, 249, 248, 0.9)), #f4f7f8;
+}
+
+.word-cloud-panel {
+  position: relative;
+  overflow: hidden;
+  background: radial-gradient(circle at 84% 20%, rgba(177, 205, 210, 0.3), transparent 32%), #f8f7f2;
+}
+
+.word-cloud-panel::after {
+  position: absolute;
+  right: -70px;
+  bottom: -90px;
+  width: 220px;
+  height: 220px;
+  border: 1px solid rgba(161, 94, 63, 0.16);
+  border-radius: 50%;
+  content: '';
+  box-shadow:
+    0 0 0 20px rgba(161, 94, 63, 0.04),
+    0 0 0 42px rgba(161, 94, 63, 0.03);
+  pointer-events: none;
+}
+
+.panel-kicker {
+  margin-bottom: 8px;
+  color: #8a98a5;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+
+.filter-panel h2,
+.word-cloud-panel h2 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.panel-description {
+  margin: 8px 0 18px;
+  color: var(--muted-ink);
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.filter-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.filter-fields :deep(.el-input__wrapper),
+.filter-fields :deep(.el-select__wrapper) {
+  min-height: 38px;
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 0 0 1px rgba(28, 44, 62, 0.09) inset;
+}
+
+.filter-fields :deep(.el-input__wrapper.is-focus),
+.filter-fields :deep(.el-select__wrapper.is-focused) {
+  box-shadow: 0 0 0 1px #467da4 inset;
+}
+
+.filter-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px dashed rgba(28, 44, 62, 0.15);
+  color: #718092;
+  font-size: 11px;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #6f9878;
+  box-shadow: 0 0 0 4px rgba(111, 152, 120, 0.13);
+}
+
+.cloud-heading {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.cloud-hint {
+  padding-top: 18px;
+  color: #9aa6b3;
+  font-size: 11px;
+}
+
+.word-cloud {
+  position: relative;
+  z-index: 1;
+  min-height: 180px;
+  margin-top: 4px;
+  border-radius: 12px;
+  background: radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.72), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18));
+  overflow: hidden;
+}
+
+.cloud-word {
+  position: absolute;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  // font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  white-space: nowrap;
+  transform-origin: center;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease,
+    text-shadow 180ms ease;
+}
+
+.cloud-word:hover {
+  opacity: 0.72;
+  text-shadow: 0 5px 12px rgba(49, 91, 115, 0.18);
+  transform: scale(1.06) rotate(var(--rotate, 0deg));
+}
+
+.cloud-word:focus-visible {
+  outline: 2px solid #a15e3f;
+  outline-offset: 5px;
+}
+
+.table-divider {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 2px 14px;
+  color: var(--ink);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.result-count {
+  color: #9aa6b3;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
 .table-intro {
   display: flex;
   align-items: flex-end;
@@ -283,6 +758,7 @@ const handleMemberClick = (member: string) => {
   max-width: 100%;
   min-width: 0;
   min-height: 78px;
+
   transform: translateX(0);
   animation: row-in 0.55s both;
   transition:
@@ -325,7 +801,6 @@ const handleMemberClick = (member: string) => {
 
 .team-index {
   color: rgba(24, 37, 54, 0.38);
-  font-family: 'Courier New', monospace;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -452,7 +927,6 @@ const handleMemberClick = (member: string) => {
 
 .detail-label {
   color: #467da4;
-  font-family: 'Courier New', monospace;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.12em;
@@ -484,6 +958,14 @@ const handleMemberClick = (member: string) => {
     gap: 18px;
   }
 
+  .search-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .word-cloud {
+    min-height: 160px;
+  }
+
   .intro-meta {
     width: 100%;
     justify-content: space-between;
@@ -515,4 +997,224 @@ const handleMemberClick = (member: string) => {
     gap: 8px;
   }
 }
+
+:deep(.expert-drawer) {
+  --el-drawer-padding-primary: 0;
+}
+
+:deep(.expert-drawer.el-drawer.rtl) {
+  overflow: hidden;
+}
+
+:deep(.el-drawer__wrapper) {
+  overflow: hidden !important;
+}
+
+:deep(.el-overlay) {
+  overflow: hidden !important;
+}
+
+:deep(.expert-drawer .el-drawer__body) {
+  padding: 0;
+  background: #eef2ef;
+  overflow-x: hidden !important;
+}
+
+.drawer-shell {
+  min-height: 100%;
+  background: #eef2ef;
+  overflow-x: hidden !important;
+}
+
+.drawer-header {
+  padding: 20px 28px 18px;
+  border-bottom: 1px solid rgba(24, 37, 54, 0.08);
+  background: #fff;
+}
+
+.drawer-header h2 {
+  margin: 0;
+  color: #102234;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.drawer-header p {
+  margin: 8px 0 0;
+  color: #6f7f8e;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.drawer-profile {
+  display: grid;
+  grid-template-columns: 230px minmax(0, 1fr);
+  gap: 24px;
+  margin: 26px;
+  padding: 26px;
+  border: 1px solid rgba(28, 44, 62, 0.08);
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 30px rgba(28, 44, 62, 0.06);
+}
+
+.profile-aside {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.profile-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 260px;
+  border-radius: 18px;
+  background: linear-gradient(145deg, #b7d3cd, #e8f0ee);
+  color: #0f5b58;
+  font-size: 84px;
+  font-weight: 800;
+  letter-spacing: -0.08em;
+}
+
+.profile-tags {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.profile-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: #f1f4f2;
+  color: #6e7d7a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.profile-main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-block {
+  padding: 18px 18px 16px;
+  border: 1px solid #dbe3df;
+  border-radius: 14px;
+  background: #fdfefe;
+}
+
+.info-label {
+  display: block;
+  margin-bottom: 8px;
+  color: #7a8a89;
+  font-size: 13px;
+  // font-weight: 700;
+}
+
+.info-block strong {
+  color: #203130;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.7;
+}
+
+.profile-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.profile-actions :deep(.el-button) {
+  height: 54px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.profile-actions :deep(.el-button--success) {
+  background: #237b63;
+  border-color: #237b63;
+}
+
+.record-panel {
+  margin: 0 26px 26px;
+  border: 1px solid rgba(28, 44, 62, 0.08);
+  border-radius: 16px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 8px 30px rgba(28, 44, 62, 0.05);
+}
+
+.record-header {
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid rgba(28, 44, 62, 0.08);
+}
+
+.record-header h3 {
+  margin: 0;
+  color: #1e2d3a;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.record-header p {
+  margin: 6px 0 0;
+  color: #8a97a3;
+  font-size: 13px;
+}
+
+.record-table :deep(.el-table__header th) {
+  background: #f7faf8;
+  color: #556574;
+  font-weight: 700;
+}
+
+.record-table :deep(.el-table__inner-wrapper) {
+  overflow-x: hidden;
+}
+
+.record-table :deep(.el-table__row td) {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.record-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 88px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.record-badge.success {
+  background: #e4f4ec;
+  color: #1f8a61;
+}
+
+.record-badge.primary {
+  background: #e8f0fb;
+  color: #3d6ea8;
+}
+
+@media (max-width: 900px) {
+  .drawer-profile {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-avatar {
+    min-height: 180px;
+    font-size: 64px;
+  }
+
+  .profile-actions {
+    grid-template-columns: 1fr;
+  }
+}
 </style>