diff --git a/frontend/package.json b/frontend/package.json
index 1182f51e38..231f8fb793 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,8 +37,8 @@
   "dependencies": {
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
-    "@arco-design/web-vue": "^2.51.1",
-    "@arco-themes/vue-ms-theme-default": "^0.0.29",
+    "@arco-design/web-vue": "^2.51.2",
+    "@arco-themes/vue-ms-theme-default": "^0.0.30",
     "@form-create/arco-design": "^3.1.23",
     "@types/color": "^3.0.4",
     "@vueuse/core": "^10.4.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 019736034b..55cade69db 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -83,7 +83,7 @@
 
   onMounted(async () => {
     await getPublicKey();
-    if (WHITE_LIST.find((el) => el.name === route.name) === undefined) {
+    if (WHITE_LIST.find((el) => el.path === window.location.hash.split('#')[1]) === undefined) {
       await checkIsLogin();
     }
     const { height } = useWindowSize();
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index e36dd123a2..732bf5f7fb 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -96,6 +96,11 @@
     padding: 8px 0;
   }
 }
+.ms-modal-no-padding {
+  .arco-modal-body {
+    padding: 0;
+  }
+}
 .ms-modal-upload {
   .arco-modal-body {
     padding: 2px 0;
@@ -178,6 +183,12 @@
   .btn-outline-sec-active();
   .btn-outline-sec-disabled();
 }
+.arco-btn-outline--danger {
+  .btn-outline-danger-default();
+  .btn-outline-danger-hover();
+  .btn-outline-danger-active();
+  .btn-outline-danger-disabled();
+}
 
 /** 输入框，选择器，文本域 **/
 .arco-select {
@@ -269,6 +280,9 @@
     }
   }
 }
+.arco-textarea {
+  .ms-scroll-bar();
+}
 
 /** form-item **/
 .arco-form-item-content-flex {
@@ -696,6 +710,9 @@
 }
 
 /** tooltip **/
+.arco-tooltip-content {
+  @apply break-all;
+}
 .arco-trigger-arrow {
   border-bottom-right-radius: var(--border-radius-mini) !important;
 }
@@ -726,18 +743,3 @@
     white-space: nowrap;
   }
 }
-
-/** 隐藏drawer-mask **/
-.ms-drawer-no-mask {
-  left: auto;
-  .arco-drawer {
-    box-shadow: -1px 0 4px 0 rgb(2 2 2 / 10%);
-    &-header {
-      .arco-drawer-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--color-text-1);
-      }
-    }
-  }
-}
diff --git a/frontend/src/assets/style/var.less b/frontend/src/assets/style/var.less
index e8e0e396a1..83e6148be1 100644
--- a/frontend/src/assets/style/var.less
+++ b/frontend/src/assets/style/var.less
@@ -4,7 +4,6 @@
 @border-radius-large: 12px;
 
 @color-white: #fff;
-@color-fill-2: rgb(var(--primary-9));
 @color-text-5: #aeaeb2;
 
 /** 常用颜色类 **/
@@ -59,6 +58,10 @@
     color: var(--color-text-4) !important;
   }
 }
+.btn-outline-danger-default() {
+  border-color: rgb(var(--danger-6)) !important;
+  color: rgb(var(--danger-6)) !important;
+}
 .btn-outline-danger-hover() {
   &:not(:disabled):hover {
     border-color: rgb(var(--danger-5)) !important;
@@ -183,3 +186,36 @@
     }
   }
 }
+
+/** 容器内部上下阴影类 **/
+.ms-container--shadow() {
+  @apply relative;
+  &::before {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 10px;
+    box-shadow: none;
+    transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
+    content: '';
+    pointer-events: none;
+  }
+  &-shadow-top::before {
+    box-shadow: inset 0 10px 6px -10px rgb(0 0 0 / 15%);
+  }
+  &::after {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+    height: 10px;
+    box-shadow: none;
+    transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
+    content: '';
+    pointer-events: none;
+  }
+  &-shadow-bottom::after {
+    box-shadow: inset 0 -10px 6px -10px rgb(0 0 0 / 15%);
+  }
+}
diff --git a/frontend/src/components/business/ms-card-list/index.vue b/frontend/src/components/business/ms-card-list/index.vue
new file mode 100644
index 0000000000..f160e9cb77
--- /dev/null
+++ b/frontend/src/components/business/ms-card-list/index.vue
@@ -0,0 +1,240 @@
+<template>
+  <div ref="msCardListContainerRef" :class="['ms-card-list-container', containerStatusClass]">
+    <div
+      ref="msCardListRef"
+      class="ms-card-list"
+      :style="{ 'grid-template-columns': `repeat(auto-fill, minmax(${props.cardMinWidth}px, 1fr))` }"
+    >
+      <div v-if="topLoading" class="ms-card-list-loading">
+        <a-spin :loading="topLoading"></a-spin>
+      </div>
+      <div
+        v-for="(item, index) in props.mode === 'remote' ? remoteList : props.list"
+        :key="item.key"
+        class="ms-card-list-item"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </div>
+      <div v-if="bottomLoading" class="ms-card-list-loading">
+        <a-spin :loading="bottomLoading"></a-spin>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { type Ref, ref, watch, nextTick, onMounted, watchEffect, computed } from 'vue';
+  import { useResizeObserver } from '@vueuse/core';
+  import { debounce } from 'lodash-es';
+  import useContainerShadow from '@/hooks/useContainerShadow';
+
+  import type { TableQueryParams, CommonList } from '@/models/common';
+
+  const props = withDefaults(
+    defineProps<{
+      mode?: 'static' | 'remote'; // 模式，静态数据模式或者远程数据模式，默认静态数据模式，静态数据模式下，需要传入list；远程数据模式下，需要传入api请求函数
+      list?: any[];
+      cardMinWidth: number; // 卡片最小宽度px
+      shadowLimit: number; // 滚动距离高度，用于计算顶部底部阴影
+      remoteParams?: Record<string, any>; // 远程数据模式下，请求数据的参数
+      remoteFunc?: (v: TableQueryParams) => Promise<CommonList<any>>; // 远程数据模式下，请求数据的函数
+    }>(),
+    {
+      mode: 'static',
+    }
+  );
+
+  const msCardListRef: Ref<HTMLElement | null> = ref(null);
+  const msCardListContainerRef: Ref<HTMLElement | null> = ref(null);
+
+  const { isArrivedTop, isArrivedBottom, isInitListener, containerStatusClass, setContainer, initScrollListener } =
+    useContainerShadow({
+      overHeight: props.shadowLimit,
+      containerClassName: 'ms-card-list-container',
+    });
+
+  /**
+   * 初始化列表滚动监听
+   * @param arr 列表数组
+   */
+  function initListListener(arr?: any[]) {
+    if (arr && arr.length > 0 && !isInitListener.value) {
+      nextTick(() => {
+        if (msCardListRef.value) {
+          setContainer(msCardListRef.value);
+          initScrollListener();
+        }
+      });
+    }
+    if (arr && arr.length > 0) {
+      nextTick(() => {
+        if (msCardListRef.value) {
+          // 为了在列表数据滚动加载时，能够正确判断是否滚动到底部，因为此时没有触发滚动事件，而在加载前触发了滚动到底部的判断
+          const listContent = msCardListRef.value;
+          const { scrollTop, scrollHeight, clientHeight } = listContent;
+          isArrivedBottom.value = scrollHeight - clientHeight - scrollTop < props.shadowLimit;
+        }
+      });
+    }
+  }
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (props.mode === 'static') {
+        initListListener(val);
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const listSize = ref(0);
+  const listPage = ref(0);
+  const listTotal = ref(0);
+  const remoteList = ref<any[]>([]);
+  const noMore = computed(() => {
+    return listSize.value * (listPage.value - 1) + remoteList.value.length >= listTotal.value;
+  });
+  const isInit = ref(false);
+
+  const topLoading = ref(false);
+  const bottomLoading = ref(false);
+
+  /**
+   * 加载上一页
+   */
+  async function loadPrevList() {
+    try {
+      if (props.mode === 'remote' && typeof props.remoteFunc === 'function') {
+        topLoading.value = true;
+        listPage.value -= 1;
+        const res = await props.remoteFunc({
+          current: listPage.value,
+          pageSize: listSize.value,
+          ...(props.remoteParams || {}),
+        });
+        remoteList.value = res.list;
+        listTotal.value = res.total;
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      topLoading.value = false;
+    }
+  }
+
+  /**
+   * 加载下一页
+   */
+  async function loadNextList() {
+    try {
+      if (props.mode === 'remote' && typeof props.remoteFunc === 'function') {
+        bottomLoading.value = true;
+        listPage.value += 1;
+        const res = await props.remoteFunc({
+          current: listPage.value,
+          pageSize: listSize.value,
+        });
+        remoteList.value = res.list;
+        listTotal.value = res.total;
+        bottomLoading.value = false;
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      bottomLoading.value = false;
+    }
+  }
+
+  /**
+   * 计算列表每页显示数量
+   * @param width 容器宽度
+   * @param height 容器高度
+   */
+  async function computedListSize(width?: number, height?: number) {
+    let clientWidth = 0;
+    let clientHeight = 0;
+    if (width !== undefined && height !== undefined) {
+      clientWidth = width;
+      clientHeight = height;
+    } else if (msCardListContainerRef.value && msCardListRef.value) {
+      clientWidth = msCardListRef.value.clientWidth;
+      clientHeight = msCardListContainerRef.value.clientHeight;
+    }
+    // 最大列数 = （容器宽度 + gap） / （最小卡片宽度 + gap）
+    const maxCols = Math.floor((clientWidth + 24) / (props.cardMinWidth + 24));
+    // 最大行数 =（容器高度 + gap） / （最小卡片宽度 + gap）。因为卡片宽高是 1:1，所以行数和列数相同。这里+2是为了在视图区域外多加载两行，以避免滚动条不出现
+    const maxRows = Math.round((clientHeight + 24) / (props.cardMinWidth + 24)) + 2;
+    listSize.value = maxCols * maxRows;
+    setTimeout(() => {
+      // 设置 400ms 后初始化完成，避免 useResizeObserver 一开始就触发，因为useResizeObserver使用了debounce-300ms，所以会有延迟
+      isInit.value = true;
+    }, 400);
+    // 列表显示数量发生变化，重置列表页码，重新加载列表
+    listPage.value = 0;
+    await loadNextList();
+  }
+
+  /**
+   * 容器大小变化监听，列表的每页显示数量会根据容器大小变化而变化，计算完成后会重新加载列表
+   */
+  useResizeObserver(
+    msCardListContainerRef,
+    debounce((entries) => {
+      const entry = entries[0];
+      const { width, height } = entry.contentRect;
+      if (isInit.value) {
+        computedListSize(width, height);
+      }
+    }, 300)
+  );
+
+  onMounted(async () => {
+    if (props.mode === 'remote') {
+      await computedListSize();
+      initListListener(remoteList.value);
+    }
+  });
+
+  watchEffect(async () => {
+    // 远程数据模式下，滚动到顶部或者底部时，加载上一页或者下一页
+    if (props.mode === 'remote' && typeof props.remoteFunc === 'function') {
+      if (isArrivedTop.value && !isArrivedBottom.value && listPage.value > 1 && !topLoading.value) {
+        // 滚动到顶部且未滚动到底部（也就是数据量大于 1 页），且不是第一页，且不是正在加载上一页，则加载上一页
+        loadPrevList();
+      } else if (isArrivedBottom.value && !isArrivedTop.value && !noMore.value && !bottomLoading.value) {
+        // 滚动到底部且未滚动到顶部（也就是数据量大于 1 页），且不是正在加载下一页，则加载下一页
+        loadNextList();
+      }
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .ms-card-list-container {
+    @apply overflow-hidden;
+    .ms-container--shadow();
+    .ms-card-list {
+      @apply grid h-full overflow-auto;
+
+      .ms-scroll-bar();
+
+      gap: 24px;
+      grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
+      .ms-card-list-item {
+        @apply relative w-full;
+
+        aspect-ratio: 1/1;
+      }
+      .ms-card-list-loading {
+        @apply col-span-full flex items-center justify-center;
+
+        padding: 8px;
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/components/business/ms-form-item-sub/index.vue b/frontend/src/components/business/ms-form-item-sub/index.vue
index 8aa2a92ef6..d6253411b3 100644
--- a/frontend/src/components/business/ms-form-item-sub/index.vue
+++ b/frontend/src/components/business/ms-form-item-sub/index.vue
@@ -11,6 +11,8 @@
 </template>
 
 <script setup lang="ts">
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+
   const props = withDefaults(
     defineProps<{
       text: string;
diff --git a/frontend/src/components/business/ms-thumbnail-card/index.vue b/frontend/src/components/business/ms-thumbnail-card/index.vue
new file mode 100644
index 0000000000..08db817430
--- /dev/null
+++ b/frontend/src/components/business/ms-thumbnail-card/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div :class="['ms-thumbnail-card', `ms-thumbnail-card--${props.mode}`]" @click="handleCardClick">
+    <div class="ms-thumbnail-card-content">
+      <div class="ms-thumbnail-card-more">
+        <MsTableMoreAction v-if="props.moreActions" :list="props.moreActions" @select="handleMoreActionSelect" />
+      </div>
+      <img v-if="fileType === 'image'" :src="props.url" class="absolute top-0" />
+      <MsIcon v-else :type="FileIconMap[fileType][UploadStatus.done]" class="absolute top-0 h-full w-full p-[24px]" />
+      <div class="ms-thumbnail-card-footer">
+        {{ props.footerText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { UploadStatus } from '@/enums/uploadEnum';
+  import { getFileEnum, FileIconMap } from '@/components/pure/ms-upload/iconMap';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+
+  import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+
+  const props = withDefaults(
+    defineProps<{
+      mode?: 'default' | 'hover'; // 默认模式和hover模式，hover 模式时会在 hover 卡片时显示 footer；default 则是一直显示 footer
+      type: string;
+      url?: string;
+      footerText?: string;
+      moreActions?: ActionsItem[];
+    }>(),
+    {
+      mode: 'default',
+    }
+  );
+  const emit = defineEmits<{
+    (e: 'click'): void;
+    (e: 'actionSelect', item: ActionsItem): void;
+  }>();
+
+  const fileType = computed(() => {
+    if (props.type) {
+      return getFileEnum(`/${props.type.toLowerCase()}`);
+    }
+    return 'unknown';
+  });
+
+  function handleCardClick() {
+    emit('click');
+  }
+
+  function handleMoreActionSelect(item: ActionsItem) {
+    emit('actionSelect', item);
+  }
+</script>
+
+<style lang="less" scoped>
+  .ms-thumbnail-card {
+    @apply relative w-full;
+
+    aspect-ratio: 1/1;
+    .ms-thumbnail-card-content {
+      @apply absolute bottom-0 left-0 right-0 top-0 inline-block flex-grow cursor-pointer overflow-hidden;
+
+      min-width: 102px;
+      border-radius: var(--border-radius-small);
+      background-color: var(--color-text-n9);
+      transition: all 0.2s;
+      &::before {
+        content: '';
+        display: block;
+        padding-bottom: 100%; /* 高度与宽度 1:1 */
+      }
+    }
+    &:hover {
+      .ms-thumbnail-card-more {
+        @apply visible;
+      }
+    }
+    .ms-thumbnail-card-more {
+      @apply invisible absolute bg-white;
+
+      top: 4px;
+      right: 4px;
+      z-index: 1;
+      padding: 4px;
+      border-radius: var(--border-radius-small);
+      &:hover {
+        color: rgb(var(--primary-5));
+        background-color: rgb(var(--primary-1));
+      }
+    }
+    .ms-thumbnail-card-footer {
+      @apply absolute w-full text-center;
+
+      bottom: 0;
+      padding: 2px 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: #ffffff;
+      background-color: #00000050;
+    }
+  }
+  .ms-thumbnail-card--default {
+    &:hover {
+      background-color: rgb(50 50 51 / 10%);
+    }
+    .ms-thumbnail-card-footer {
+      @apply visible;
+
+      background-color: #32323330;
+    }
+  }
+  .ms-thumbnail-card--hover {
+    &:hover {
+      .ms-thumbnail-card-footer {
+        @apply visible;
+      }
+    }
+    .ms-thumbnail-card-footer {
+      @apply invisible;
+    }
+  }
+</style>
diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index 8266768208..9a83555a47 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -1,65 +1,68 @@
 <template>
-  <a-tree
-    v-bind="props"
-    ref="treeRef"
-    v-model:expanded-keys="expandedKeys"
-    :selected-keys="selectedKeys"
-    :data="treeData"
-    class="ms-tree"
-    @drop="onDrop"
-    @select="select"
-  >
-    <template v-if="$slots['title']" #title="_props">
-      <slot name="title" v-bind="_props"></slot>
-    </template>
-    <template v-if="$slots['extra']" #extra="_props">
-      <div
-        :class="[
-          'ms-tree-node-extra',
-          innerFocusNodeKey === _props[props.fieldNames.key] ? 'ms-tree-node-extra--focus' : '',
-        ]"
-      >
-        <div
-          class="ml-[-4px] flex h-[32px] items-center rounded-[var(--border-radius-small)] bg-[rgb(var(--primary-1))]"
-        >
-          <slot name="extra" v-bind="_props"></slot>
-          <MsTableMoreAction
-            v-if="props.nodeMoreActions"
-            :list="props.nodeMoreActions"
-            trigger="click"
-            @select="handleNodeMoreSelect($event, _props)"
-            @close="moreActionsClose"
-          >
-            <MsButton
-              type="text"
-              size="mini"
-              class="ms-tree-node-extra__more"
-              @click="innerFocusNodeKey = _props[props.fieldNames.key]"
-            >
-              <MsIcon type="icon-icon_more_outlined" size="14" class="text-[var(--color-text-4)]" />
-            </MsButton>
-          </MsTableMoreAction>
-        </div>
-      </div>
-    </template>
-  </a-tree>
-  <slot name="empty">
-    <div
-      v-show="treeData.length === 0 && props.emptyText"
-      class="rounded-[var(--border-radius-small)] bg-[var(--color-fill-1)] p-[8px] text-[12px] text-[var(--color-text-4)]"
+  <div ref="treeContainerRef" :class="['ms-tree-container', containerStatusClass]">
+    <a-tree
+      v-bind="props"
+      ref="treeRef"
+      v-model:expanded-keys="expandedKeys"
+      :selected-keys="selectedKeys"
+      :data="treeData"
+      class="ms-tree"
+      @drop="onDrop"
+      @select="select"
     >
-      {{ props.emptyText }}
-    </div>
-  </slot>
+      <template v-if="$slots['title']" #title="_props">
+        <slot name="title" v-bind="_props"></slot>
+      </template>
+      <template v-if="$slots['extra']" #extra="_props">
+        <div
+          :class="[
+            'ms-tree-node-extra',
+            innerFocusNodeKey === _props[props.fieldNames.key] ? 'ms-tree-node-extra--focus' : '',
+          ]"
+        >
+          <div
+            class="ml-[-4px] flex h-[32px] items-center rounded-[var(--border-radius-small)] bg-[rgb(var(--primary-1))]"
+          >
+            <slot name="extra" v-bind="_props"></slot>
+            <MsTableMoreAction
+              v-if="props.nodeMoreActions"
+              :list="props.nodeMoreActions"
+              trigger="click"
+              @select="handleNodeMoreSelect($event, _props)"
+              @close="moreActionsClose"
+            >
+              <MsButton
+                type="text"
+                size="mini"
+                class="ms-tree-node-extra__more"
+                @click="innerFocusNodeKey = _props[props.fieldNames.key]"
+              >
+                <MsIcon type="icon-icon_more_outlined" size="14" class="text-[var(--color-text-4)]" />
+              </MsButton>
+            </MsTableMoreAction>
+          </div>
+        </div>
+      </template>
+    </a-tree>
+    <slot name="empty">
+      <div
+        v-show="treeData.length === 0 && props.emptyText"
+        class="rounded-[var(--border-radius-small)] bg-[var(--color-fill-1)] p-[8px] text-[12px] text-[var(--color-text-4)]"
+      >
+        {{ props.emptyText }}
+      </div>
+    </slot>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, h, watch, Ref, watchEffect } from 'vue';
+  import { onBeforeMount, ref, h, watch, Ref, watchEffect, nextTick } from 'vue';
   import { debounce } from 'lodash-es';
   import { mapTree } from '@/utils/index';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import useContainerShadow from '@/hooks/useContainerShadow';
 
   import type { MsTreeNodeData, MsTreeFieldNames, MsTreeSelectedData } from './types';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
@@ -80,6 +83,7 @@
       nodeMoreActions?: ActionsItem[]; // 节点展示在省略号按钮内的更多操作
       expandAll?: boolean; // 是否展开/折叠所有节点，true 为全部展开，false 为全部折叠
       emptyText?: string; // 空数据时的文案
+      virtualListProps?: Record<string, unknown>; // 虚拟滚动列表的属性
     }>(),
     {
       searchDebounce: 300,
@@ -109,7 +113,12 @@
     (e: 'moreActionsClose'): void;
   }>();
 
+  const treeContainerRef: Ref = ref(null);
   const treeRef: Ref = ref(null);
+  const { isInitListener, containerStatusClass, setContainer, initScrollListener } = useContainerShadow({
+    overHeight: 32,
+    containerClassName: 'ms-tree-container',
+  });
   const originalTreeData = ref<MsTreeNodeData[]>([]);
 
   function init() {
@@ -129,6 +138,19 @@
       node.disabled = false;
       return node;
     });
+    nextTick(() => {
+      if (props.defaultExpandAll) {
+        treeRef.value?.expandAll(true);
+      }
+      if (!isInitListener.value && treeRef.value) {
+        setContainer(
+          props.virtualListProps?.height
+            ? (treeRef.value.$el.querySelector('.arco-virtual-list') as HTMLElement)
+            : treeRef.value.$el
+        );
+        initScrollListener();
+      }
+    });
   }
 
   onBeforeMount(() => {
@@ -318,86 +340,90 @@
 </script>
 
 <style lang="less">
-  .ms-tree {
-    .arco-tree-node {
-      border-radius: var(--border-radius-small);
-      &:hover {
-        background-color: rgb(var(--primary-1));
-      }
-      .arco-tree-node-minus-icon,
-      .arco-tree-node-plus-icon {
-        border: 1px solid var(--color-text-4);
-        border-radius: var(--border-radius-mini);
-        background-color: white;
-        &::after,
-        &::before {
-          background-color: var(--color-text-4);
-        }
-      }
-      .arco-tree-node-switcher {
-        .arco-tree-node-switcher-icon {
-          @apply flex;
-
-          color: var(--color-text-4);
-        }
-      }
-      .arco-tree-node-title {
+  .ms-tree-container {
+    .ms-container--shadow();
+    .ms-tree {
+      .ms-scroll-bar();
+      .arco-tree-node {
+        border-radius: var(--border-radius-small);
         &:hover {
           background-color: rgb(var(--primary-1));
-          + .ms-tree-node-extra {
-            @apply block;
-          }
         }
-        .arco-tree-node-drag-icon {
-          .arco-icon {
-            font-size: 14px;
-          }
-        }
-      }
-      .ms-tree-node-extra {
-        @apply relative hidden;
-        &:hover {
-          @apply block;
-        }
-        .ms-tree-node-extra__btn,
-        .ms-tree-node-extra__more {
-          padding: 4px;
+        .arco-tree-node-minus-icon,
+        .arco-tree-node-plus-icon {
+          border: 1px solid var(--color-text-4);
           border-radius: var(--border-radius-mini);
+          background-color: white;
+          &::after,
+          &::before {
+            background-color: var(--color-text-4);
+          }
+        }
+        .arco-tree-node-switcher {
+          .arco-tree-node-switcher-icon {
+            @apply flex;
+
+            color: var(--color-text-4);
+          }
+        }
+        .arco-tree-node-title {
           &:hover {
-            background-color: rgb(var(--primary-9));
+            background-color: rgb(var(--primary-1));
+            + .ms-tree-node-extra {
+              @apply block;
+            }
+          }
+          .arco-tree-node-drag-icon {
             .arco-icon {
-              color: rgb(var(--primary-5));
+              font-size: 14px;
             }
           }
         }
-        .ms-tree-node-extra__more {
-          margin-right: 4px;
+        .ms-tree-node-extra {
+          @apply relative hidden;
+          &:hover {
+            @apply block;
+          }
+          .ms-tree-node-extra__btn,
+          .ms-tree-node-extra__more {
+            padding: 4px;
+            border-radius: var(--border-radius-mini);
+            &:hover {
+              background-color: rgb(var(--primary-9));
+              .arco-icon {
+                color: rgb(var(--primary-5));
+              }
+            }
+          }
+          .ms-tree-node-extra__more {
+            margin-right: 4px;
+          }
+        }
+        .ms-tree-node-extra--focus {
+          @apply block;
+        }
+        .arco-tree-node-custom-icon {
+          @apply hidden;
         }
       }
-      .ms-tree-node-extra--focus {
-        @apply block;
-      }
-      .arco-tree-node-custom-icon {
-        @apply hidden;
-      }
-    }
-    .arco-tree-node-selected {
-      .arco-tree-node-minus-icon,
-      .arco-tree-node-plus-icon {
-        border: 1px solid rgb(var(--primary-5));
-        border-radius: var(--border-radius-mini);
-        background-color: white;
-        &::after,
-        &::before {
-          background-color: rgb(var(--primary-5));
+      .arco-tree-node-selected {
+        .arco-tree-node-minus-icon,
+        .arco-tree-node-plus-icon {
+          border: 1px solid rgb(var(--primary-5));
+          border-radius: var(--border-radius-mini);
+          background-color: white;
+          &::after,
+          &::before {
+            background-color: rgb(var(--primary-5));
+          }
         }
-      }
-      .arco-tree-node-switcher-icon .arco-icon,
-      .arco-tree-node-title {
-        font-weight: 500 !important;
-        color: rgb(var(--primary-5));
-        * {
+        .arco-tree-node-switcher-icon .arco-icon,
+        .arco-tree-node-title {
+          font-weight: 500 !important;
           color: rgb(var(--primary-5));
+          * {
+            color: rgb(var(--primary-5));
+          }
         }
       }
     }
diff --git a/frontend/src/components/pure/ms-dialog/index.vue b/frontend/src/components/pure/ms-dialog/index.vue
index e7f8965089..0b5c444f73 100644
--- a/frontend/src/components/pure/ms-dialog/index.vue
+++ b/frontend/src/components/pure/ms-dialog/index.vue
@@ -20,17 +20,18 @@
           <div v-if="props.switchProps?.showSwitch" class="flex flex-row items-center justify-center">
             <a-switch v-model="switchEnable" class="mr-1" size="small" />
             <a-tooltip v-if="props.switchProps?.switchTooltip" :content="t(props.switchProps?.switchTooltip)">
-              <span class="flex items-center"
-                ><span class="mr-1">{{ props.switchProps?.switchName }}</span>
-                <span class="mt-[2px]"
-                  ><IconQuestionCircle class="h-[16px] w-[16px] text-[rgb(var(--primary-5))]" /></span
-              ></span>
+              <span class="flex items-center">
+                <span class="mr-1">{{ props.switchProps?.switchName }}</span>
+                <span class="mt-[2px]">
+                  <IconQuestionCircle class="h-[16px] w-[16px] text-[rgb(var(--primary-5))]" />
+                </span>
+              </span>
             </a-tooltip>
           </div>
           <div class="flex justify-end">
-            <a-button v-if="showCancel" type="secondary" @click="handleCancel">{{
-              props.cancelText ? t(props.cancelText) : t('ms.dialog.cancel')
-            }}</a-button>
+            <a-button v-if="showCancel" type="secondary" @click="handleCancel">
+              {{ props.cancelText ? t(props.cancelText) : t('ms.dialog.cancel') }}
+            </a-button>
             <!-- 自定义确认与取消之间其他按钮可以直接使用loading按钮插槽 -->
             <slot name="self-button"></slot>
             <a-button
@@ -73,7 +74,7 @@
   }> & {
     dialogSize: SizeType; // 弹窗的宽度尺寸 medium large small
     title: string;
-    confirm?: (enable: boolean | undefined) => void; // 确定
+    confirm?: (enable: boolean | undefined) => Promise<any>; // 确定
     visible: boolean;
     close: () => void;
   };
@@ -137,6 +138,7 @@
         await props.confirm(switchEnable.value);
         confirmLoading.value = false;
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log(error);
       } finally {
         confirmLoading.value = false;
diff --git a/frontend/src/components/pure/ms-list/index.vue b/frontend/src/components/pure/ms-list/index.vue
index e5fef412b7..a548a767b2 100644
--- a/frontend/src/components/pure/ms-list/index.vue
+++ b/frontend/src/components/pure/ms-list/index.vue
@@ -3,7 +3,7 @@
     v-bind="props"
     ref="listRef"
     :data="data"
-    :class="['ms-list', listStatusClass]"
+    :class="['ms-list', containerStatusClass]"
     @reach-bottom="handleReachBottom"
   >
     <template #item="{ item, index }">
@@ -59,11 +59,12 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, nextTick, onBeforeUnmount, Ref, ref, watch } from 'vue';
+  import { nextTick, Ref, ref, watch } from 'vue';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import { useI18n } from '@/hooks/useI18n';
+  import useContainerShadow from '@/hooks/useContainerShadow';
 
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
 
@@ -136,23 +137,12 @@
   }
 
   const listRef: Ref = ref(null);
-  const isArrivedTop = ref(true);
-  const isArrivedBottom = ref(true);
-  const isInitListener = ref(false);
 
-  /**
-   * 监听列表内容区域滚动，以切换顶部底部阴影
-   * @param event 滚动事件
-   */
-  function listenScroll(event: Event) {
-    if (event.target) {
-      const listContent = event.target as HTMLElement;
-      const { scrollTop, scrollHeight, clientHeight } = listContent;
-      const scrollBottom = scrollHeight - clientHeight - scrollTop;
-      isArrivedTop.value = scrollTop < props.itemHeight;
-      isArrivedBottom.value = scrollBottom < props.itemHeight;
-    }
-  }
+  const { isArrivedBottom, isInitListener, containerStatusClass, setContainer, initScrollListener } =
+    useContainerShadow({
+      overHeight: props.itemHeight,
+      containerClassName: 'ms-list',
+    });
 
   watch(
     props.data,
@@ -160,16 +150,18 @@
       if (props.data.length > 0 && !isInitListener.value) {
         nextTick(() => {
           const listContent = listRef.value?.$el.querySelector('.arco-list-content');
-          isInitListener.value = true;
-          listContent.addEventListener('scroll', listenScroll);
+          setContainer(listContent);
+          initScrollListener();
+        });
+      }
+      if (props.data.length > 0) {
+        nextTick(() => {
+          // 为了在列表数据滚动加载时，能够正确判断是否滚动到底部，因为此时没有触发滚动事件，而在加载前触发了滚动到底部的判断
+          const listContent = listRef.value?.$el.querySelector('.arco-list-content');
+          const { scrollTop, scrollHeight, clientHeight } = listContent;
+          isArrivedBottom.value = scrollHeight - clientHeight - scrollTop < props.itemHeight;
         });
       }
-      nextTick(() => {
-        // 为了在列表数据滚动加载时，能够正确判断是否滚动到底部，因为此时没有触发滚动事件，而在加载前触发了滚动到底部的判断
-        const listContent = listRef.value?.$el.querySelector('.arco-list-content');
-        const { scrollTop, scrollHeight, clientHeight } = listContent;
-        isArrivedBottom.value = scrollHeight - clientHeight - scrollTop < props.itemHeight;
-      });
     },
     {
       immediate: true,
@@ -181,36 +173,11 @@
       emit('reachBottom');
     }
   }
-
-  const listStatusClass = computed(() => {
-    if (isArrivedTop.value && isArrivedBottom.value) {
-      // 内容不足一屏，不展示阴影
-      return 'ms-list-hidden-shadow';
-    }
-    if (isArrivedTop.value) {
-      // 滚动到顶部，隐藏顶部阴影
-      return 'ms-list--hidden-top-shadow';
-    }
-    if (isArrivedBottom.value) {
-      // 滚动到底部，隐藏底部阴影
-      return 'ms-list--hidden-bottom-shadow';
-    }
-    // 滚动到中间，展示两侧阴影
-    return '';
-  });
-
-  onBeforeUnmount(() => {
-    const listContent = listRef.value?.$el.querySelector('.arco-list-content');
-    if (listContent) {
-      listContent.removeEventListener('scroll', listenScroll);
-    }
-  });
 </script>
 
 <style lang="less" scoped>
   .ms-list {
-    box-shadow: inset 0 10px 6px -10px rgb(0 0 0 / 15%), inset 0 -10px 6px -10px rgb(0 0 0 / 15%);
-    transition: box-shadow 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
+    .ms-container--shadow();
     :deep(.arco-list) {
       @apply rounded-none;
       .ms-list-item {
@@ -263,13 +230,4 @@
       }
     }
   }
-  .ms-list-hidden-shadow {
-    box-shadow: none;
-  }
-  .ms-list--hidden-top-shadow {
-    box-shadow: inset 0 -10px 6px -10px rgb(0 0 0 / 15%);
-  }
-  .ms-list--hidden-bottom-shadow {
-    box-shadow: inset 0 10px 6px -10px rgb(0 0 0 / 15%);
-  }
 </style>
diff --git a/frontend/src/components/pure/ms-popconfirm/index.vue b/frontend/src/components/pure/ms-popconfirm/index.vue
index b98f0c1cda..fae5f1aef0 100644
--- a/frontend/src/components/pure/ms-popconfirm/index.vue
+++ b/frontend/src/components/pure/ms-popconfirm/index.vue
@@ -29,6 +29,7 @@
 <script setup lang="ts">
   import { useI18n } from '@/hooks/useI18n';
   import { ref, useAttrs, watchEffect } from 'vue';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   export type types = 'error' | 'info' | 'success' | 'warning';
 
diff --git a/frontend/src/components/pure/ms-split-box/index.vue b/frontend/src/components/pure/ms-split-box/index.vue
index 3fd4143682..2a76e8993b 100644
--- a/frontend/src/components/pure/ms-split-box/index.vue
+++ b/frontend/src/components/pure/ms-split-box/index.vue
@@ -27,6 +27,7 @@
 
 <script setup lang="ts">
   import { ref, watch } from 'vue';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   const props = withDefaults(
     defineProps<{
diff --git a/frontend/src/components/pure/ms-table/batchAction.vue b/frontend/src/components/pure/ms-table/batchAction.vue
index f60c2a83db..349b94c956 100644
--- a/frontend/src/components/pure/ms-table/batchAction.vue
+++ b/frontend/src/components/pure/ms-table/batchAction.vue
@@ -6,7 +6,7 @@
       <a-button
         v-else
         :class="{
-          'delete': element.danger,
+          'arco-btn-outline--danger': element.danger,
           'ml-4': true,
         }"
         type="outline"
@@ -57,6 +57,7 @@
     }
   }
   .delete {
+    border-color: rgb(var(--danger-6)) !important;
     color: rgb(var(--danger-6));
   }
 </style>
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index 468ad7d5a3..40ff474ec7 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -12,7 +12,7 @@
       <template v-if="showProjectSelect">
         <a-divider direction="vertical" class="ml-0" />
         <a-select
-          class="w-auto max-w-[200px] focus-within:!bg-[var(--color-text-n8)] hover:!bg-[var(--color-text-n8)]"
+          class="w-auto min-w-[150px] max-w-[200px] focus-within:!bg-[var(--color-text-n8)] hover:!bg-[var(--color-text-n8)]"
           :default-value="appStore.getCurrentProjectId"
           :bordered="false"
           @change="selectProject"
@@ -214,6 +214,7 @@
       const res = await getProjectList(appStore.getCurrentOrgId);
       projectList.value = res;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   });
diff --git a/frontend/src/hooks/useContainerShadow.ts b/frontend/src/hooks/useContainerShadow.ts
new file mode 100644
index 0000000000..4c2cd2c789
--- /dev/null
+++ b/frontend/src/hooks/useContainerShadow.ts
@@ -0,0 +1,86 @@
+import { Ref, computed, onBeforeUnmount, ref } from 'vue';
+
+export interface ContainerShadowOptions {
+  /**
+   * 内容区域
+   */
+  content?: Ref<HTMLElement>;
+  /**
+   * 判断显示阴影的高度
+   */
+  overHeight: number;
+  /**
+   * 内容区域的类名
+   */
+  containerClassName: string;
+}
+
+/**
+ * 监听指定容器的滚动事件，以给容器添加顶部和地步的阴影，需要给指定的容器添加 .ms-container--shadow() 样式类使用阴影
+ * @param options ContainerShadowOptions
+ */
+export default function useContainerShadow(options: ContainerShadowOptions) {
+  const isArrivedTop = ref(true);
+  const isArrivedBottom = ref(true);
+  const isInitListener = ref(false);
+  const containerRef = ref<Ref<HTMLElement> | undefined>(options.content);
+
+  function setContainer(dom: HTMLElement) {
+    if (dom) {
+      containerRef.value = dom;
+    }
+  }
+
+  /**
+   * 监听列表内容区域滚动，以切换顶部底部阴影
+   * @param event 滚动事件
+   */
+  function listenScroll(event: Event) {
+    if (event.target) {
+      const listContent = event.target as HTMLElement;
+      const { scrollTop, scrollHeight, clientHeight } = listContent;
+      const scrollBottom = scrollHeight - clientHeight - scrollTop;
+      isArrivedTop.value = scrollTop < options.overHeight;
+      isArrivedBottom.value = scrollBottom < options.overHeight;
+    }
+  }
+
+  function initScrollListener() {
+    if (!isInitListener.value && containerRef.value) {
+      containerRef.value.addEventListener('scroll', listenScroll);
+      isInitListener.value = true;
+    }
+  }
+
+  const containerStatusClass = computed(() => {
+    if (isArrivedTop.value && isArrivedBottom.value) {
+      // 内容不足一屏，不展示阴影
+      return '';
+    }
+    if (isArrivedTop.value) {
+      // 滚动到顶部，隐藏顶部阴影
+      return `${options.containerClassName}-shadow-bottom`;
+    }
+    if (isArrivedBottom.value) {
+      // 滚动到底部，隐藏底部阴影
+      return `${options.containerClassName}-shadow-top`;
+    }
+    // 滚动到中间，展示两侧阴影
+    return `${options.containerClassName}-shadow-top ${options.containerClassName}-shadow-bottom`;
+  });
+
+  onBeforeUnmount(() => {
+    if (containerRef.value) {
+      containerRef.value.removeEventListener('scroll', listenScroll);
+    }
+  });
+
+  return {
+    isArrivedTop,
+    isArrivedBottom,
+    isInitListener,
+    containerStatusClass,
+    setContainer,
+    initScrollListener,
+  };
+}
diff --git a/frontend/src/hooks/usePathMap.ts b/frontend/src/hooks/usePathMap.ts
index 6781a23a41..22007a9406 100644
--- a/frontend/src/hooks/usePathMap.ts
+++ b/frontend/src/hooks/usePathMap.ts
@@ -3,7 +3,6 @@ import { MENU_LEVEL, pathMap, PathMapItem, PathMapRoute } from '@/config/pathMap
 import { TreeNode, findNodeByKey, mapTree } from '@/utils';
 
 export default function usePathMap() {
-  const router = useRouter();
   /**
    * 根据菜单级别过滤映射树
    * @param level 菜单级别
@@ -38,6 +37,7 @@ export default function usePathMap() {
    * @param openNewPage 是否在新页面打开
    */
   const jumpRouteByMapKey = (key: PathMapRoute, routeQuery?: Record<string, any>, openNewPage = false) => {
+    const router = useRouter();
     const pathNode = findNodeByKey<PathMapItem>(pathMap, key as unknown as string);
     if (pathNode) {
       if (openNewPage) {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index d13c69b804..004ea1c3ba 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,7 +3,7 @@ import ArcoVue from '@arco-design/web-vue';
 import '@arco-themes/vue-ms-theme-default/index.less';
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 import SvgIcon from '@/components/pure/svg-icon/index.vue';
-import MSIcon from '@/components/pure/ms-icon-font/index.vue';
+import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 import router from './router';
 import store from './store';
 import { setupI18n } from './locale';
@@ -19,12 +19,12 @@ async function bootstrap() {
   app.use(store);
   // 注册国际化，需要异步阻塞，确保语言包加载完毕
   await setupI18n(app);
+  app.use(router);
   app.use(ArcoVue);
   app.use(ArcoVueIcon);
-  app.component('MsIcon', MSIcon);
   app.component('SvgIcon', SvgIcon);
+  app.component('MsIcon', MsIcon);
 
-  app.use(router);
   app.use(directive);
 
   app.mount('#app');