From fa16e6d546abc144b4e08b99ca9d1064d164ecda Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Thu, 26 Mar 2026 18:48:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/QuickLogin.vue        | 353 ++++++++++++++++++
 .../layouts/views/desktop/analysis/index.vue  |   6 +-
 2 files changed, 358 insertions(+), 1 deletion(-)
 create mode 100644 web-vue/packages/core/layouts/views/desktop/analysis/components/QuickLogin.vue

diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/QuickLogin.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/QuickLogin.vue
new file mode 100644
index 0000000..bfc95cf
--- /dev/null
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/QuickLogin.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="quick-login-card">
+    <div class="card-title">
+      <span>快捷登录</span>
+    </div>
+
+    <div class="card-content">
+      <el-button
+        class="quick-login-nav quick-login-nav--left"
+        circle
+        link
+        type="primary"
+        :icon="ArrowLeftBold"
+        :disabled="!canScroll"
+        @click="scrollPrev"
+      />
+      <div ref="viewportRef" class="quick-login-viewport" @mouseenter="pauseAutoScroll" @mouseleave="startAutoScroll">
+        <div
+          class="quick-login-track"
+          :style="{
+            transform: `translateX(-${currentOffset}px)`,
+          }"
+        >
+          <button
+            v-for="item in displayList"
+            :key="item.renderKey"
+            class="quick-login-item"
+            type="button"
+            @click="handleLogin(item)"
+          >
+            <div class="quick-login-item__image-wrap">
+              <img class="quick-login-item__image" :src="item.logo" :alt="item.name" />
+            </div>
+            <div class="quick-login-item__name">{{ item.name }}</div>
+          </button>
+        </div>
+      </div>
+      <el-button
+        class="quick-login-nav quick-login-nav--right"
+        circle
+        link
+        type="primary"
+        :icon="ArrowRightBold"
+        :disabled="!canScroll"
+        @click="scrollNext"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+  import { ElMessage } from 'element-plus';
+  import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+
+  interface QuickLoginItem {
+    id: string;
+    name: string;
+    logo: string;
+    url: string;
+  }
+
+  interface RenderQuickLoginItem extends QuickLoginItem {
+    renderKey: string;
+  }
+
+  const baseList = ref<QuickLoginItem[]>([
+    {
+      id: 'oa',
+      name: '协同办公',
+      logo: 'https://dummyimage.com/96x96/2563eb/ffffff.png&text=OA',
+      url: '/oa',
+    },
+    {
+      id: 'erp',
+      name: 'ERP系统',
+      logo: 'https://dummyimage.com/96x96/0891b2/ffffff.png&text=ERP',
+      url: '/erp',
+    },
+    {
+      id: 'mes',
+      name: 'MES平台',
+      logo: 'https://dummyimage.com/96x96/7c3aed/ffffff.png&text=MES',
+      url: '/mes',
+    },
+    {
+      id: 'crm',
+      name: 'CRM系统',
+      logo: 'https://dummyimage.com/96x96/ea580c/ffffff.png&text=CRM',
+      url: '/crm',
+    },
+    {
+      id: 'hr',
+      name: '人资门户',
+      logo: 'https://dummyimage.com/96x96/16a34a/ffffff.png&text=HR',
+      url: '/hr',
+    },
+    {
+      id: 'bi',
+      name: '数据驾驶舱',
+      logo: 'https://dummyimage.com/96x96/db2777/ffffff.png&text=BI',
+      url: '/bi',
+    },
+  ]);
+
+  const itemWidth = 104;
+  const gapWidth = 2;
+  const stepWidth = itemWidth + gapWidth;
+  const visibleCount = ref(1);
+  const currentIndex = ref(0);
+  const viewportRef = ref<HTMLElement>();
+  let resizeObserver: ResizeObserver | null = null;
+  let autoScrollTimer: ReturnType<typeof setInterval> | null = null;
+
+  const canScroll = computed(() => baseList.value.length > visibleCount.value);
+
+  const maxIndex = computed(() => {
+    const value = baseList.value.length - visibleCount.value;
+    return value > 0 ? value : 0;
+  });
+
+  const currentOffset = computed(() => currentIndex.value * stepWidth);
+
+  const displayList = computed<RenderQuickLoginItem[]>(() => {
+    return baseList.value.map((item, index) => ({
+      ...item,
+      renderKey: `${item.id}-${index}`,
+    }));
+  });
+
+  function updateVisibleCount() {
+    const width = viewportRef.value?.clientWidth || 0;
+    if (!width) return;
+    const count = Math.max(1, Math.floor((width + gapWidth) / stepWidth));
+    visibleCount.value = count;
+    if (currentIndex.value > maxIndex.value) {
+      currentIndex.value = maxIndex.value;
+    }
+  }
+
+  function scrollNext() {
+    if (!canScroll.value) return;
+    currentIndex.value = currentIndex.value >= maxIndex.value ? 0 : currentIndex.value + 1;
+  }
+
+  function scrollPrev() {
+    if (!canScroll.value) return;
+    currentIndex.value = currentIndex.value <= 0 ? maxIndex.value : currentIndex.value - 1;
+  }
+
+  function startAutoScroll() {
+    if (!canScroll.value) return;
+    pauseAutoScroll();
+    autoScrollTimer = setInterval(() => {
+      scrollNext();
+    }, 2600);
+  }
+
+  function pauseAutoScroll() {
+    if (autoScrollTimer) {
+      clearInterval(autoScrollTimer);
+      autoScrollTimer = null;
+    }
+  }
+
+  function handleLogin(item: QuickLoginItem) {
+    ElMessage.success(`准备进入：${item.name}`);
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      updateVisibleCount();
+      startAutoScroll();
+    });
+
+    if (viewportRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        updateVisibleCount();
+      });
+      resizeObserver.observe(viewportRef.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    pauseAutoScroll();
+  });
+</script>
+
+<style lang="less">
+  .quick-login-card {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      color: rgb(51 65 85);
+      border-bottom: 1px solid rgb(226 232 240);
+      background: transparent;
+    }
+
+    .card-content {
+      flex: 1;
+      min-height: 0;
+      padding: 6px;
+      overflow: hidden;
+      background: transparent;
+      display: flex;
+      align-items: stretch;
+      gap: 2px;
+      height: 100%;
+    }
+
+    .quick-login-nav {
+      flex-shrink: 0;
+      width: 24px;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .quick-login-viewport {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      display: flex;
+      align-items: stretch;
+      overflow: hidden;
+    }
+
+    .quick-login-track {
+      display: flex;
+      gap: 2px;
+      align-items: stretch;
+      height: 100%;
+      min-height: 0;
+      transition: transform 0.45s ease;
+      will-change: transform;
+    }
+
+    .quick-login-item {
+      flex: 0 0 104px;
+      width: 104px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 0;
+      height: 100%;
+      padding: 4px 4px 3px;
+      border: 1px solid rgb(226 232 240);
+      border-radius: 10px;
+      background: rgb(248 250 252);
+      box-shadow: 0 8px 22px rgb(148 163 184 / 14%);
+      cursor: pointer;
+      transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        border-color: rgb(147 197 253);
+        box-shadow: 0 12px 28px rgb(96 165 250 / 18%);
+      }
+
+      &__image-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 100%;
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 8px;
+      }
+
+      &__name {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        min-height: 26px;
+        width: 100%;
+        margin-top: 2px;
+        padding-top: 2px;
+        border-top: 1px solid rgb(226 232 240);
+        color: rgb(51 65 85);
+        font-size: 11px;
+        line-height: 14px;
+        text-align: center;
+        word-break: break-word;
+      }
+    }
+  }
+
+  html[data-theme='dark'] .quick-login-card {
+    .card-title {
+      color: rgb(203 213 225);
+      border-bottom-color: rgb(51 65 85);
+    }
+
+    .quick-login-item {
+      border-color: rgb(51 65 85);
+      background: rgb(20, 20, 20);
+      box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
+
+      &:hover {
+        border-color: rgb(96 165 250);
+        box-shadow: 0 14px 30px rgb(37 99 235 / 20%);
+      }
+
+      &__name {
+        border-top-color: rgb(51 65 85);
+        color: rgb(226 232 240);
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .quick-login-card {
+      .card-content {
+        padding: 8px;
+      }
+
+      .quick-login-item {
+        flex-basis: 100px;
+        width: 100px;
+      }
+
+      .quick-login-nav {
+        width: 22px;
+        height: 100%;
+      }
+    }
+  }
+</style>
diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/index.vue b/web-vue/packages/core/layouts/views/desktop/analysis/index.vue
index f2f1195..c8205a3 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/index.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/index.vue
@@ -16,7 +16,9 @@
           </div>
           <div class="analysis-right">
             <div class="analysis-right-top">
-              <section class="analysis-panel">右上-1</section>
+              <section class="analysis-panel">
+				  <QuickLogin />
+			  </section>
               <section class="analysis-panel">右上-2</section>
             </div>
             <section class="analysis-panel">右下</section>
@@ -31,6 +33,8 @@
   import HostInfo from './components/HostInfo.vue';
   import TodoInfo from './components/TodoInfo.vue';
   import NoticeInfo from './components/NoticeInfo.vue';
+  import QuickLogin from './components/QuickLogin.vue';
+  
 </script>
 <style lang="less">
   @dark-bg: #141414;