diff --git a/index.html b/index.html
index bd224a67..97513ab2 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,13 @@
 
   <body>
     <div id="app">
-      <div class="loader"></div>
+      <div class="loading-container">
+        <div class="loading-spinner">
+          <div class="loading-bar"></div>
+          <div class="loading-bar"></div>
+          <div class="loading-bar"></div>
+        </div>
+      </div>
     </div>
   </body>
   <script type="module" src="/src/main.ts"></script>
@@ -34,27 +40,56 @@
       height: 100%;
     }
 
-    .loader {
-      --d: 22px;
-
-      width: 4px;
-      height: 4px;
-      color: #25b09b;
-      border-radius: 50%;
-      box-shadow:
-        calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
-        calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
-        calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
-        calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
-        calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
-        calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
-        calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
-      animation: l27 1s infinite steps(8);
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      align-items: center;
+      justify-content: center;
     }
 
-    @keyframes l27 {
+    .loading-spinner {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+    }
+
+    .loading-bar {
+      width: 4px;
+      height: 24px;
+      background-color: #498cff;
+      border-radius: 2px;
+      animation: loading-animation 1.2s ease-in-out infinite;
+    }
+
+    .loading-bar:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    .loading-bar:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .loading-bar:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes loading-animation {
+      0% {
+        opacity: 0.3;
+        transform: scaleY(0.5);
+      }
+
+      50% {
+        opacity: 1;
+        transform: scaleY(1.2);
+      }
+
       100% {
-        transform: rotate(1turn);
+        opacity: 0.3;
+        transform: scaleY(0.5);
       }
     }
   </style>
diff --git a/package.json b/package.json
index 520b11dc..1ebe1f89 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "qs": "^6.14.0",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.13",
+    "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^11.1.2",
     "vue-router": "^4.5.0"
   },
diff --git a/src/components/TextScroll/index.vue b/src/components/TextScroll/index.vue
new file mode 100644
index 00000000..d37e1e79
--- /dev/null
+++ b/src/components/TextScroll/index.vue
@@ -0,0 +1,412 @@
+<!--
+  TextScroll 组件 - 文本滚动公告
+  
+  功能：
+  - 支持水平方向文本滚动
+  - 提供多种预设样式（默认、成功、警告、危险、信息）
+  - 支持自定义滚动速度和方向
+  - 可选的打字机输入效果
+  - 鼠标悬停时暂停滚动
+  - 可选的关闭按钮
+-->
+<template>
+  <div
+    ref="containerRef"
+    class="text-scroll-container"
+    :class="[`text-scroll--${props.type}`]"
+    :typewriter="props.typewriter ? 'true' : undefined"
+  >
+    <!-- 左侧图标 -->
+    <div class="left-icon">
+      <el-icon><Bell /></el-icon>
+    </div>
+    <!-- 滚动内容包装器 -->
+    <div class="scroll-wrapper">
+      <div
+        ref="scrollContent"
+        class="text-scroll-content"
+        :class="{ scrolling: shouldScroll }"
+        :style="scrollStyle"
+      >
+        <!-- 滚动内容，复制两份以实现无缝滚动 -->
+        <div class="scroll-item" v-html="sanitizedContent" />
+        <div class="scroll-item" v-html="sanitizedContent" />
+      </div>
+    </div>
+    <!-- 可选的关闭按钮 -->
+    <div v-if="showClose" class="right-icon" @click="handleRightIconClick">
+      <el-icon><Close /></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementHover } from "@vueuse/core";
+
+const emit = defineEmits(["close"]);
+
+interface Props {
+  /** 滚动文本内容（必填） */
+  text: string;
+  /** 滚动速度，数值越小滚动越慢 */
+  speed?: number;
+  /** 滚动方向：左侧或右侧 */
+  direction?: "left" | "right";
+  /** 样式类型 */
+  type?: "default" | "success" | "warning" | "danger" | "info";
+  /** 是否显示关闭按钮 */
+  showClose?: boolean;
+  /** 是否启用打字机效果 */
+  typewriter?: boolean;
+  /** 打字机效果的速度，数值越小打字越快 */
+  typewriterSpeed?: number;
+}
+
+// 定义组件属性及默认值
+const props = withDefaults(defineProps<Props>(), {
+  speed: 70,
+  direction: "left",
+  type: "default",
+  showClose: false,
+  typewriter: false,
+  typewriterSpeed: 100,
+});
+
+// 容器元素引用
+const containerRef = ref<HTMLElement | null>(null);
+// 使用 vueuse 的 useElementHover 检测鼠标悬停状态
+const isHovered = useElementHover(containerRef);
+// 滚动内容元素引用
+const scrollContent = ref<HTMLElement | null>(null);
+// 动画持续时间（秒）
+const animationDuration = ref(0);
+
+/**
+ * 打字机效果相关状态
+ */
+// 当前已显示的文本内容
+const currentText = ref("");
+// 打字机定时器引用，用于清理
+let typewriterTimer: ReturnType<typeof setTimeout> | null = null;
+// 打字机效果是否已完成
+const isTypewriterComplete = ref(false);
+
+/**
+ * 计算是否应该滚动
+ * 条件：
+ * 1. 鼠标未悬停在组件上
+ * 2. 如果启用了打字机效果，则需要等待打字效果完成
+ */
+const shouldScroll = computed(() => {
+  if (props.typewriter) {
+    return !isHovered.value && isTypewriterComplete.value;
+  }
+  return !isHovered.value;
+});
+
+/**
+ * 计算最终显示的内容
+ * 如果启用了打字机效果，则显示当前已打出的文本
+ * 否则直接显示完整文本
+ * 注意：内容支持 HTML，使用时需注意 XSS 风险
+ */
+const sanitizedContent = computed(() => (props.typewriter ? currentText.value : props.text));
+
+/**
+ * 计算滚动样式
+ * 包括动画持续时间、播放状态和方向
+ * 这些值通过 CSS 变量传递给样式
+ */
+const scrollStyle = computed(() => ({
+  "--animation-duration": `${animationDuration.value}s`,
+  "--animation-play-state": shouldScroll.value ? "running" : "paused",
+  "--animation-direction": props.direction === "left" ? "normal" : "reverse",
+}));
+
+/**
+ * 计算动画持续时间
+ * 根据内容宽度和设定的速度计算出合适的动画持续时间
+ * 内容越长或速度值越小，动画持续时间越长
+ */
+const calculateDuration = () => {
+  if (scrollContent.value) {
+    const contentWidth = scrollContent.value.scrollWidth / 2;
+    animationDuration.value = contentWidth / props.speed;
+  }
+};
+
+/**
+ * 处理关闭按钮点击事件
+ * 触发 close 事件，并直接销毁当前组件
+ */
+const handleRightIconClick = () => {
+  emit("close");
+  // 获取当前组件的DOM元素
+  if (containerRef.value) {
+    // 从DOM中移除元素
+    containerRef.value.remove();
+  }
+};
+
+/**
+ * 启动打字机效果
+ * 逐字显示文本内容，完成后设置状态以开始滚动
+ */
+const startTypewriter = () => {
+  let index = 0;
+  currentText.value = "";
+  isTypewriterComplete.value = false; // 重置状态
+
+  // 递归函数，逐字添加文本
+  const type = () => {
+    if (index < props.text.length) {
+      // 添加一个字符
+      currentText.value += props.text[index];
+      index++;
+      // 设置下一个字符的延迟
+      typewriterTimer = setTimeout(type, props.typewriterSpeed);
+    } else {
+      // 所有字符都已添加，设置完成状态
+      isTypewriterComplete.value = true;
+    }
+  };
+
+  // 开始打字过程
+  type();
+};
+
+onMounted(() => {
+  // 计算初始动画持续时间
+  calculateDuration();
+  // 监听窗口大小变化，重新计算动画持续时间
+  window.addEventListener("resize", calculateDuration);
+
+  // 如果启用了打字机效果，开始打字
+  if (props.typewriter) {
+    startTypewriter();
+  }
+});
+
+onUnmounted(() => {
+  // 移除事件监听
+  window.removeEventListener("resize", calculateDuration);
+  // 清除打字机定时器
+  if (typewriterTimer) {
+    clearTimeout(typewriterTimer);
+  }
+});
+
+/**
+ * 监听文本内容变化
+ * 当文本内容变化时，如果启用了打字机效果，重新开始打字
+ */
+watch(
+  () => props.text,
+  () => {
+    if (props.typewriter) {
+      // 清除现有定时器
+      if (typewriterTimer) {
+        clearTimeout(typewriterTimer);
+      }
+      // 重新开始打字效果
+      startTypewriter();
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.text-scroll-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-right: 16px;
+  overflow: hidden;
+  background-color: var(--el-color-primary-light-9) !important;
+  border: 1px solid var(--main-color);
+  border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+
+  .left-icon,
+  .right-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 100%;
+    text-align: center;
+    background-color: var(--el-color-primary-light-9) !important;
+  }
+
+  .left-icon {
+    left: 0;
+  }
+
+  .right-icon {
+    right: 0;
+    cursor: pointer;
+    background-color: transparent !important;
+  }
+
+  .scroll-wrapper {
+    flex: 1;
+    margin-left: 34px;
+    overflow: hidden;
+  }
+
+  .text-scroll-content {
+    display: flex;
+    height: 34px;
+    line-height: 34px;
+    white-space: nowrap;
+    animation: scroll linear infinite;
+    animation-duration: var(--animation-duration);
+    animation-direction: var(--animation-direction);
+    animation-play-state: var(--animation-play-state);
+
+    .scroll-item {
+      display: inline-block;
+      min-width: 100%;
+      padding: 0 10px;
+      font-size: 14px;
+      color: var(--el-color-primary-light-2) !important;
+      text-align: left;
+      text-align: center;
+
+      :deep(a) {
+        color: #fd4e4e !important;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  // 添加类型样式
+  &.text-scroll--default {
+    background-color: var(--el-color-primary-light-9) !important;
+    border-color: var(--el-color-primary);
+
+    .right-icon,
+    .left-icon i {
+      color: var(--el-color-primary) !important;
+    }
+
+    .scroll-item {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  &.text-scroll--success {
+    background-color: var(--el-color-success-light-9) !important;
+    border-color: var(--el-color-success);
+
+    .left-icon {
+      background-color: var(--el-color-success-light-9) !important;
+
+      i {
+        color: var(--el-color-success);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-success) !important;
+    }
+  }
+
+  &.text-scroll--warning {
+    background-color: var(--el-color-warning-light-9) !important;
+    border-color: var(--el-color-warning);
+
+    .left-icon {
+      background-color: var(--el-color-warning-light-9) !important;
+
+      i {
+        color: var(--el-color-warning);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-warning) !important;
+    }
+  }
+
+  &.text-scroll--danger {
+    background-color: var(--el-color-danger-light-9) !important;
+    border-color: var(--el-color-danger);
+
+    .left-icon {
+      background-color: var(--el-color-danger-light-9) !important;
+
+      i {
+        color: var(--el-color-danger);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-danger) !important;
+    }
+  }
+
+  &.text-scroll--info {
+    background-color: var(--el-color-info-light-9) !important;
+    border-color: var(--el-color-info);
+
+    .left-icon {
+      background-color: var(--el-color-info-light-9) !important;
+
+      i {
+        color: var(--el-color-info);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+
+// 添加打字机效果的光标样式
+.text-scroll-content .scroll-item {
+  &::after {
+    content: "";
+    opacity: 0;
+    animation: none;
+  }
+}
+
+// 仅在启用打字机效果时显示光标
+.text-scroll-container[typewriter] .text-scroll-content .scroll-item::after {
+  content: "|";
+  opacity: 0;
+  animation: cursor 1s infinite;
+}
+
+@keyframes cursor {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/views/demo/drag.vue b/src/views/demo/drag.vue
new file mode 100644
index 00000000..783dd982
--- /dev/null
+++ b/src/views/demo/drag.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><span class="card-header">基础示例</span></template>
+          <VueDraggable ref="el" v-model="userList" class="drag-container">
+            <div v-for="item in userList" :key="item.name" class="drag-item">
+              {{ item.name }}
+            </div>
+          </VueDraggable>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><span class="card-header">过渡动画</span></template>
+          <VueDraggable
+            v-model="userList"
+            target=".sort-target"
+            :scroll="true"
+            class="drag-container"
+          >
+            <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target">
+              <li v-for="item in userList" :key="item.name" class="drag-item">
+                {{ item.name }}
+              </li>
+            </TransitionGroup>
+          </VueDraggable>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card shadow="never">
+      <template #header><span class="card-header">表格拖拽排序</span></template>
+      <VueDraggable v-model="userList" target="tbody" :animation="150">
+        <el-table :data="userList" row-key="name">
+          <el-table-column label="姓名" prop="name" />
+          <el-table-column label="角色" prop="roles" />
+        </el-table>
+      </VueDraggable>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header><span class="card-header">指定元素拖拽排序</span></template>
+      <VueDraggable v-model="userList" target="tbody" handle=".handle" :animation="150">
+        <el-table :data="userList" row-key="name">
+          <el-table-column label="姓名" prop="name" />
+          <el-table-column label="角色" prop="roles" />
+          <el-table-column label="操作" width="100">
+            <template #default>
+              <el-button size="default" class="handle">移动</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </VueDraggable>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VueDraggable } from "vue-draggable-plus";
+
+const userList = ref([
+  { name: "路飞", roles: "船长·格斗家·D之一族" },
+  { name: "索隆", roles: "剑豪·战斗员·三刀流大师" },
+  { name: "娜美", roles: "航海士·气象学家·财务官" },
+  { name: "山治", roles: "厨师·格斗家·黑足" },
+  { name: "罗宾", roles: "考古学家·历史正文解读者" },
+]);
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+
+  .el-card {
+    margin-bottom: 20px;
+    border-radius: 8px;
+  }
+
+  .card-header {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .drag-container {
+    min-height: 200px;
+  }
+
+  .drag-item {
+    padding: 12px;
+    margin-bottom: 8px;
+    font-weight: 500;
+    text-align: center;
+    cursor: grab;
+    border-radius: 6px;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .drag-item:active {
+    cursor: grabbing;
+    transform: scale(1.05);
+  }
+}
+
+/* 过渡动画 */
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(20px, 0);
+}
+
+.fade-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/src/views/demo/text-scroll.vue b/src/views/demo/text-scroll.vue
new file mode 100644
index 00000000..7c638bf4
--- /dev/null
+++ b/src/views/demo/text-scroll.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="app-container">
+    <!-- 基础用法 -->
+    <TextScroll text="这是一条基础的滚动公告，默认向左滚动。" typewriter />
+
+    <!-- 使用不同的类型 -->
+    <TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />
+
+    <TextScroll type="warning" text="这是一条警告类型的滚动公告" />
+
+    <TextScroll type="danger" text="这是一条危险类型的滚动公告" />
+
+    <TextScroll type="info" text="这是一条信息类型的滚动公告" />
+
+    <!-- 自定义速度和方向 -->
+    <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextScroll from "@/components/TextScroll/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  :deep(.text-scroll-container) {
+    margin-bottom: 20px;
+  }
+}
+</style>
