fix:修复已知bug

feat(home.vue,App.vue):新增页面的切换过渡动画。fix(flowBall):悬浮球位置问题和调整悬浮球大小
updateVersion
2025-11-25 11:29:42 +08:00 · 2025-08-30 05:06:14 +08:00 · 2025-08-30 01:07:11 +08:00 · 2025-08-28 21:36:16 +08:00 · 2025-08-28 21:34:58 +08:00
22 changed files with 1336 additions and 489 deletions
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
  "name": "ceru-music",
-  "version": "1.1.6",
+  "version": "1.1.9",
  "description": "一款简洁优雅的音乐播放器",
  "main": "./out/main/index.js",
  "author": "sqj,wldss,star",
  "license": "Apache-2.0",
-  "homepage": "https://electron-vite.org",
+  "homepage": "https://ceru.docs.shiqianjiang.cn",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint --cache . --fix",
@@ -45,6 +45,7 @@
    "@pixi/sprite": "^7.4.3",
    "@types/needle": "^3.3.0",
    "NeteaseCloudMusicApi": "^4.27.0",
+    "animate.css": "^4.1.1",
    "axios": "^1.11.0",
    "color-extraction": "^1.0.8",
    "crypto-js": "^4.2.0",
@@ -97,4 +98,4 @@
    "vue-eslint-parser": "^10.2.0",
    "vue-tsc": "^3.0.3"
  }
-}
+}
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -192,6 +192,11 @@ ipcMain.handle('service-music-request', async (_, api, args) => {
  return await musicService.request(api, args)
 })

+// 获取应用版本号
+ipcMain.handle('get-app-version', () => {
+  return app.getVersion()
+})
+
 aiEvents(mainWindow)
 import './events/musicCache'
 import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/autoUpdate'
@@ -199,18 +204,20 @@ import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/auto
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(async () => {
+app.whenReady().then(() => {
  // Set app user model id for windows

  electronApp.setAppUserModelId('com.cerulean.music')

-  // 初始化插件系统
-  try {
-    await pluginService.initializePlugins()
-    console.log('插件系统初始化完成')
-  } catch (error) {
-    console.error('插件系统初始化失败:', error)
-  }
+  setTimeout(async () => {
+    // 初始化插件系统
+    try {
+      await pluginService.initializePlugins()
+      console.log('插件系统初始化完成')
+    } catch (error) {
+      console.error('插件系统初始化失败:', error)
+    }
+  },1000)

  // Default open or close DevTools by F12 in development
  // and ignore CommandOrControl + R in production.
--- a/src/main/utils/musicSdk/kg/songList.js
+++ b/src/main/utils/musicSdk/kg/songList.js
@@ -407,6 +407,7 @@ export default {
    return result.list[0].global_collection_id
  },

+  
  async getUserListDetailByLink({ info }, link) {
    let listInfo = info['0']
    let total = listInfo.count
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
+    AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.vue')['default']
    FloatBall: typeof import('./src/components/AI/FloatBall.vue')['default']
    FullPlay: typeof import('./src/components/Play/FullPlay.vue')['default']
    GlobalAudio: typeof import('./src/components/Play/GlobalAudio.vue')['default']
@@ -20,7 +21,6 @@ declare module 'vue' {
    SearchComponent: typeof import('./src/components/Search/SearchComponent.vue')['default']
    ShaderBackground: typeof import('./src/components/Play/ShaderBackground.vue')['default']
    SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
-    ThemeDemo: typeof import('./src/components/ThemeDemo.vue')['default']
    ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
    TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
    UpdateExample: typeof import('./src/components/UpdateExample.vue')['default']
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -17,7 +17,7 @@ import './assets/theme/cyan.css'
 onMounted(() => {
  userInfo.init()
  loadSavedTheme()
-  
+
  // 应用启动后延迟3秒检查更新，避免影响启动速度
  setTimeout(() => {
    checkForUpdates()
@@ -42,23 +42,36 @@ const loadSavedTheme = () => {

 const applyTheme = (themeName) => {
  const documentElement = document.documentElement
-  
+
  // 移除之前的主题
  documentElement.removeAttribute('theme-mode')
-  
+
  // 应用新主题（如果不是默认主题）
  if (themeName !== 'default') {
    documentElement.setAttribute('theme-mode', themeName)
  }
-  
+
  // 保存到本地存储
  localStorage.setItem('selected-theme', themeName)
 }
 </script>

 <template>
-  <router-view />
-  <GlobalAudio />
-  <FloatBall />
-  <UpdateProgress />
+  <div class="page">
+    <router-view v-slot="{ Component }">
+      <Transition :enter-active-class="`animate__animated animate__fadeIn  pagesApp`"
+        :leave-active-class="`animate__animated animate__fadeOut pagesApp`">
+          <component :is="Component" />
+      </Transition>
+    </router-view>
+    <GlobalAudio />
+    <FloatBall />
+    <UpdateProgress />
+  </div>
 </template>
+<style>
+.pagesApp {
+  width: 100vw;
+  position: fixed;
+}
+</style>
--- a/src/renderer/src/components/AI/FloatBall.vue
+++ b/src/renderer/src/components/AI/FloatBall.vue
@@ -5,9 +5,12 @@ import DOMPurify from 'dompurify'
 import { Loading as TLoading } from 'tdesign-vue-next'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 import { storeToRefs } from 'pinia'
+import { useSettingsStore } from '@renderer/store/Settings'

 const userStore = LocalUserDetailStore()
+const settingsStore = useSettingsStore()
 const { userInfo } = storeToRefs(userStore)
+const { settings } = storeToRefs(settingsStore)

 const ball = ref<HTMLElement | null>(null)
 const ballClass = ref('hidden-right') // 默认半隐藏
@@ -30,7 +33,7 @@ const windowSize = ref({ width: 0, height: 0 }) // 窗口尺寸

 // 显示悬浮球
 // 悬浮球可见性控制
-const isFloatBallVisible = ref(true)
+const isFloatBallVisible = ref(settings.value.showFloatBall !== false) // 默认显示，除非明确设置为false
 const isHovering = ref(false)

 const showBall = () => {
@@ -42,6 +45,7 @@ const showBall = () => {
 const closeBall = (e: MouseEvent) => {
  e.stopPropagation() // 阻止事件冒泡
  isFloatBallVisible.value = false
+  settingsStore.updateSettings({ showFloatBall: false })
 }

 // 鼠标进入悬浮球
@@ -60,7 +64,7 @@ const handleMouseLeave = () => {
 const startAutoHide = () => {
  clearTimer()
  timer = window.setTimeout(() => {
-    ballClass.value = 'hidden-right'
+    ballClass.value = isOnLeft.value ? 'hidden-left' : 'hidden-right'
  }, 3000) // 3 秒没操作缩回去
 }

@@ -102,11 +106,12 @@ const handleMouseMove = (e: MouseEvent) => {

  // 限制在屏幕范围内，底部边界为 height - 196，考虑外层容器尺寸120px
  const maxX = windowSize.value.width - 120
-  const maxY = windowSize.value.height - 196
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制，不允许进入顶部90px区域

  ballPosition.value = {
    x: Math.max(0, Math.min(x, maxX)),
-    y: Math.max(0, Math.min(y, maxY))
+    y: Math.max(minY, Math.min(y, maxY))
  }
 }

@@ -119,8 +124,8 @@ const handleMouseUp = () => {
  document.removeEventListener('mouseup', handleMouseUp)

  if (hasDragged.value) {
-    // 自动吸边逻辑，考虑外层容器尺寸120px
-    const centerX = ballPosition.value.x + 60 // 外层容器中心点
+    // 自动吸边逻辑
+    const centerX = ballPosition.value.x + 60 // 悬浮球中心点
    const screenCenter = windowSize.value.width / 2

    if (centerX < screenCenter) {
@@ -130,12 +135,13 @@ const handleMouseUp = () => {
      ballClass.value = 'hidden-left'
    } else {
      // 吸附到右边
-      ballPosition.value.x = windowSize.value.width - 126
+      ballPosition.value.x = windowSize.value.width - 106
      isOnLeft.value = false
      ballClass.value = 'hidden-right'
    }
-
-    // 重新开启自动隐藏
+    // 保存位置到本地存储
+    saveBallPosition()
+    clearTimer()
    startAutoHide()
  }
 }
@@ -316,6 +322,15 @@ watch(
  { immediate: false }
 )

+// 监听设置变化，更新悬浮球可见性
+watch(
+  () => settings.value.showFloatBall,
+  (newValue) => {
+    isFloatBallVisible.value = newValue
+  },
+  { immediate: true }
+)
+
 // 更新窗口尺寸
 const updateWindowSize = () => {
  windowSize.value = {
@@ -324,25 +339,76 @@ const updateWindowSize = () => {
  }
 }

-// 初始化悬浮球位置
-const initBallPosition = () => {
+// 保存悬浮球位置到本地存储
+const saveBallPosition = () => {
+  const positionData = {
+    x: ballPosition.value.x,
+    y: ballPosition.value.y,
+    isOnLeft: isOnLeft.value
+  }
+  localStorage.setItem('floatBallPosition', JSON.stringify(positionData))
+}
+
+// 从本地存储加载悬浮球位置
+const loadBallPosition = () => {
+  try {
+    const savedPosition = localStorage.getItem('floatBallPosition')
+    if (savedPosition) {
+      const positionData = JSON.parse(savedPosition)
+      ballPosition.value = {
+        x: positionData.x,
+        y: positionData.y
+      }
+      isOnLeft.value = positionData.isOnLeft
+    } else {
+      // 如果没有保存过位置，使用默认位置
+      setDefaultPosition()
+    }
+  } catch (error) {
+    console.error('加载悬浮球位置失败:', error)
+    setDefaultPosition()
+  }
+}
+
+// 设置默认位置
+const setDefaultPosition = () => {
  updateWindowSize()
  ballPosition.value = {
    x: windowSize.value.width - 126, // 考虑外层容器尺寸120px
-    y: windowSize.value.height - 196
+    y: windowSize.value.height - 176
  }
  isOnLeft.value = false
 }

+// 初始化悬浮球位置
+const initBallPosition = () => {
+  updateWindowSize()
+  loadBallPosition()
+}
+
 // 定义 handleResize 函数
 const handleResize = () => {
  updateWindowSize()
-  initBallPosition()
+  // 保证悬浮球不超出边界
+  const maxX = windowSize.value.width - 120
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制
+  
+  // 如果悬浮球在右侧，随窗口宽度变化更新位置
+  if (!isOnLeft.value) {
+    // 重新计算右侧位置
+    ballPosition.value.x = windowSize.value.width - 106
+  }
+  
+  // 确保位置在有效范围内
+  ballPosition.value.x = Math.max(0, Math.min(ballPosition.value.x, maxX))
+  ballPosition.value.y = Math.max(minY, Math.min(ballPosition.value.y, maxY))
 }

 onMounted(() => {
  initBallPosition()
  startAutoHide()
+  handleResize()
  window.addEventListener('resize', handleResize)
 })

@@ -351,6 +417,7 @@ onBeforeUnmount(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
  window.removeEventListener('resize', handleResize)
+  saveBallPosition() // 保存位置
 })
 </script>

@@ -398,7 +465,7 @@ onBeforeUnmount(() => {
        :style="{
          left: isOnLeft ? ballPosition.x + 120 + 'px' : 'auto',
          right: isOnLeft ? 'auto' : windowSize.width - ballPosition.x + 20 + 'px',
-          bottom: Math.max(20, 196) + 'px'
+          bottom: Math.max(20, 176) + 'px'
        }"
      >
        <div class="ask-header">
@@ -452,8 +519,8 @@ onBeforeUnmount(() => {
 }

 .float-ball {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
  border-radius: 50%;
  background: #409eff;
  display: flex;
--- a/src/renderer/src/components/Play/PlayMusic.vue
+++ b/src/renderer/src/components/Play/PlayMusic.vue
@@ -530,6 +530,7 @@ watch(

 // 全屏展示相关
 const toggleFullPlay = () => {
+  if (!songInfo.value.songmid) return
  showFullPlay.value = !showFullPlay.value
 }

@@ -670,22 +671,24 @@ const handleProgressDragStart = (event: MouseEvent) => {
 const songInfo = ref<Omit<SongList, 'songmid'> & { songmid: null | number }>({
  songmid: null,
  hash: '',
-  singer: 'CeruMusic',
-  name: '未知歌曲名',
+  name: '欢迎使用CeruMusic 🎉',
+  singer: '可以配置音源插件来播放你的歌曲',
  albumName: '',
  albumId: 0,
  source: '',
  interval: '00:00',
-  img: 'https://oss.shiqianjiang.cn//storage/default/20250723/mmexport1744732a2f8406e483442888d29521de63ca4f98bc085a2.jpeg',
+  img: '',
  lrc: null,
  types: [],
  _types: {},
  typeUrl: {}
 })
-const maincolor = ref('rgba(0, 0, 0, 1)')
+const maincolor = ref('var(--td-brand-color-5)')
 const startmaincolor = ref('rgba(0, 0, 0, 1)')
 const contrastTextColor = ref('rgba(0, 0, 0, .8)')
-const hoverColor = ref('rgba(0,0,0,1)')
+const hoverColor = ref('var(--td-brand-color-5)')
+const playbg = ref('var(--td-brand-color-2)')
+const playbghover = ref('var(--td-brand-color-3)')
 async function setColor() {
  console.log('主题色刷新')
  const color = await extractDominantColor(songInfo.value.img)
@@ -694,8 +697,18 @@ async function setColor() {
  startmaincolor.value = `rgba(${color.r},${color.g},${color.b},.2)`
  contrastTextColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 0.6)
  hoverColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 1)
+  playbg.value = 'rgba(255,255,255,0.2)'
+  playbghover.value = 'rgba(255,255,255,0.33)'
 }
-watch(songInfo, setColor, { deep: true, immediate: true })
+watch(
+  songInfo,
+  async (newVal) => {
+    if (newVal.img) {
+      await setColor()
+    }
+  },
+  { deep: true, immediate: true }
+)
 // onMounted(setColor)
 </script>

@@ -718,7 +731,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
    <div class="player-content">
      <!-- 左侧：封面和歌曲信息 -->
      <div class="left-section">
-        <div class="album-cover">
+        <div class="album-cover" v-show="songInfo.img">
          <img :src="songInfo.img" alt="专辑封面" />
        </div>

@@ -793,14 +806,16 @@ watch(songInfo, setColor, { deep: true, immediate: true })

          <!-- 播放列表按钮 -->
          <t-tooltip content="播放列表">
-            <t-button
-              class="control-btn"
-              shape="circle"
-              variant="text"
-              @click.stop="togglePlaylist"
-            >
-              <liebiao style="width: 1.5em; height: 1.5em" />
-            </t-button>
+            <t-badge :count="list.length" :maxCount="99" color="#aaa">
+              <t-button
+                class="control-btn"
+                shape="circle"
+                variant="text"
+                @click.stop="togglePlaylist"
+              >
+                <liebiao style="width: 1.5em; height: 1.5em" />
+              </t-button>
+            </t-badge>
          </t-tooltip>
        </div>
      </div>
@@ -999,7 +1014,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })

    .song-name {
      font-size: 14px;
-      font-weight: 500;
+      font-weight: 700;
      color: v-bind(hoverColor);
      white-space: nowrap;
      overflow: hidden;
@@ -1044,7 +1059,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
    }

    &.play-btn {
-      background-color: #ffffff27;
+      background-color: v-bind(playbg);
      transition: background-color 0.2s ease;

      border-radius: 50%;
@@ -1061,7 +1076,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
      }

      &:hover {
-        background-color: #ffffff62;
+        background-color: v-bind(playbghover);
        color: v-bind(contrastTextColor);
      }
    }
--- a/src/renderer/src/components/Settings/AIFloatBallSettings.vue
+++ b/src/renderer/src/components/Settings/AIFloatBallSettings.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="float-ball-settings">
+    <t-card hover-shadow title="AI悬浮球设置">
+      <div class="card-body">
+        <div class="setting-item">
+          <span class="setting-label">显示AI悬浮球</span>
+          <t-switch v-model="showFloatBall" @change="handleFloatBallToggle" />
+        </div>
+        <div class="setting-description">
+          <p>开启后，AI悬浮球将显示在应用界面上，您可以随时与AI助手交流</p>
+          <p>关闭后，AI悬浮球将被隐藏，您可以随时在此处重新开启</p>
+        </div>
+      </div>
+    </t-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useSettingsStore } from '@renderer/store/Settings'
+import { storeToRefs } from 'pinia'
+
+const settingsStore = useSettingsStore()
+const { settings } = storeToRefs(settingsStore)
+
+// 悬浮球显示状态
+const showFloatBall = ref(settings.value.showFloatBall !== false)
+
+// 处理悬浮球开关切换
+const handleFloatBallToggle = (val: boolean) => {
+  settingsStore.updateSettings({ showFloatBall: val })
+}
+
+// 监听设置变化
+watch(
+  () => settings.value.showFloatBall,
+  (newValue) => {
+    showFloatBall.value = newValue !== false
+  }
+)
+
+onMounted(() => {
+  // 确保初始值与存储中的值一致
+  showFloatBall.value = settings.value.showFloatBall !== false
+})
+</script>
+
+<style scoped>
+.float-ball-settings {
+  width: 100%;
+}
+
+.card-body {
+  padding: 16px 0;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.setting-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--td-text-color-primary);
+}
+
+.setting-description {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--td-border-level-1-color);
+}
+
+.setting-description p {
+  margin: 8px 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+</style>
--- a/src/renderer/src/components/ThemeDemo.vue
+++ b/src/renderer/src/components/ThemeDemo.vue
@@ -1,195 +0,0 @@
-<template>
-  <div class="theme-demo">
-    <div class="demo-header">
-      <h1 class="demo-title">主题切换演示</h1>
-      <ThemeSelector />
-    </div>
-    
-    <div class="demo-content">
-      <div class="demo-card">
-        <h3 class="card-title">主要功能</h3>
-        <p class="card-text">这是一个现代化的主题切换组件，支持多种预设主题色。</p>
-        <button class="btn btn-primary">主要按钮</button>
-      </div>
-      
-      <div class="demo-card">
-        <h3 class="card-title">设计特点</h3>
-        <ul class="feature-list">
-          <li>简约美观的界面设计</li>
-          <li>平滑的过渡动画效果</li>
-          <li>响应式布局适配</li>
-          <li>深色模式支持</li>
-        </ul>
-      </div>
-      
-      <div class="demo-card">
-        <h3 class="card-title">交互元素</h3>
-        <div class="demo-controls">
-          <input type="text" class="form-control" placeholder="输入框示例" />
-          <button class="btn btn-secondary">次要按钮</button>
-          <a href="#" class="demo-link">链接示例</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import ThemeSelector from './ThemeSelector.vue'
-</script>
-
-<style scoped>
-.theme-demo {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.demo-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--td-component-border);
-}
-
-.demo-title {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--td-text-color-primary);
-  margin: 0;
-}
-
-.demo-content {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.demo-card {
-  background: var(--td-bg-color-container);
-  border: 1px solid var(--td-component-border);
-  border-radius: var(--td-radius-large);
-  padding: 24px;
-  box-shadow: var(--td-shadow-1);
-}
-
-.card-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--td-text-color-primary);
-  margin: 0 0 12px 0;
-}
-
-.card-text {
-  color: var(--td-text-color-secondary);
-  line-height: 1.6;
-  margin-bottom: 16px;
-}
-
-.feature-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.feature-list li {
-  color: var(--td-text-color-secondary);
-  padding: 8px 0;
-  position: relative;
-  padding-left: 20px;
-}
-
-.feature-list li::before {
-  content: '•';
-  color: var(--td-brand-color);
-  font-weight: bold;
-  position: absolute;
-  left: 0;
-}
-
-.demo-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.btn {
-  padding: 10px 16px;
-  border-radius: var(--td-radius-medium);
-  border: 1px solid transparent;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-  display: inline-block;
-  text-align: center;
-}
-
-.btn-primary {
-  background-color: var(--td-brand-color);
-  border-color: var(--td-brand-color);
-  color: white;
-}
-
-.btn-primary:hover {
-  background-color: var(--td-brand-color-hover);
-  border-color: var(--td-brand-color-hover);
-}
-
-.btn-secondary {
-  background-color: var(--td-bg-color-component);
-  border-color: var(--td-component-border);
-  color: var(--td-text-color-primary);
-}
-
-.btn-secondary:hover {
-  background-color: var(--td-bg-color-component-hover);
-  border-color: var(--td-component-border);
-}
-
-.form-control {
-  padding: 10px 12px;
-  border: 1px solid var(--td-component-border);
-  border-radius: var(--td-radius-medium);
-  background-color: var(--td-bg-color-container);
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  transition: all 0.2s ease;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--td-brand-color);
-  box-shadow: 0 0 0 3px var(--td-brand-color-light);
-}
-
-.demo-link {
-  color: var(--td-brand-color);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.demo-link:hover {
-  color: var(--td-brand-color-hover);
-  text-decoration: underline;
-}
-
-@media (max-width: 640px) {
-  .demo-header {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
-  }
-  
-  .demo-content {
-    grid-template-columns: 1fr;
-  }
-  
-  .demo-controls {
-    gap: 16px;
-  }
-}
-</style>
--- a/src/renderer/src/components/UpdateProgress.vue
+++ b/src/renderer/src/components/UpdateProgress.vue
@@ -5,20 +5,18 @@
        <h3>正在下载更新</h3>
        <p v-if="downloadState.updateInfo">版本 {{ downloadState.updateInfo.name }}</p>
      </div>
-      
+
      <div class="progress-content">
        <div class="progress-bar-container">
          <div class="progress-bar">
-            <div 
-              class="progress-fill" 
+            <div
+              class="progress-fill"
              :style="{ width: `${downloadState.progress.percent}%` }"
            ></div>
          </div>
-          <div class="progress-text">
-            {{ Math.round(downloadState.progress.percent) }}%
-          </div>
+          <div class="progress-text">{{ Math.round(downloadState.progress.percent) }}%</div>
        </div>
-        
+
        <div class="progress-details">
          <div class="download-info">
            <span>已下载: {{ formatBytes(downloadState.progress.transferred) }}</span>
@@ -46,46 +44,52 @@ let speedInterval: NodeJS.Timeout | null = null
 const calculateSpeed = () => {
  const currentTime = Date.now()
  const currentTransferred = downloadState.progress.transferred
-  
+
  if (lastTime > 0) {
    const timeDiff = (currentTime - lastTime) / 1000 // 秒
    const sizeDiff = currentTransferred - lastTransferred // 字节
-    
+
    if (timeDiff > 0) {
      downloadSpeed.value = sizeDiff / timeDiff
    }
  }
-  
+
  lastTransferred = currentTransferred
  lastTime = currentTime
 }

 // 监听下载进度变化
-watch(() => downloadState.progress.transferred, () => {
-  calculateSpeed()
-})
+watch(
+  () => downloadState.progress.transferred,
+  () => {
+    calculateSpeed()
+  }
+)

 // 开始监听时重置速度计算
-watch(() => downloadState.isDownloading, (isDownloading) => {
-  if (isDownloading) {
-    lastTransferred = 0
-    lastTime = 0
-    downloadSpeed.value = 0
-    
-    // 每秒更新一次速度显示
-    speedInterval = setInterval(() => {
-      if (!downloadState.isDownloading) {
-        downloadSpeed.value = 0
+watch(
+  () => downloadState.isDownloading,
+  (isDownloading) => {
+    if (isDownloading) {
+      lastTransferred = 0
+      lastTime = 0
+      downloadSpeed.value = 0
+
+      // 每秒更新一次速度显示
+      speedInterval = setInterval(() => {
+        if (!downloadState.isDownloading) {
+          downloadSpeed.value = 0
+        }
+      }, 1000)
+    } else {
+      if (speedInterval) {
+        clearInterval(speedInterval)
+        speedInterval = null
      }
-    }, 1000)
-  } else {
-    if (speedInterval) {
-      clearInterval(speedInterval)
-      speedInterval = null
+      downloadSpeed.value = 0
    }
-    downloadSpeed.value = 0
  }
-})
+)

 onUnmounted(() => {
  if (speedInterval) {
@@ -96,11 +100,11 @@ onUnmounted(() => {
 // 格式化字节大小
 const formatBytes = (bytes: number): string => {
  if (bytes === 0) return '0 B'
-  
+
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  
+
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 </script>
@@ -168,14 +172,14 @@ const formatBytes = (bytes: number): string => {

 .progress-fill {
  height: 100%;
-  background: linear-gradient(90deg, #0052d9, #266fe8);
+  background: linear-gradient(90deg, var(--td-brand-color-5), var(--td-brand-color-3));
  border-radius: 4px;
  transition: width 0.3s ease;
 }

 .progress-text {
  font-weight: 600;
-  color: #0052d9;
+  color: var(--td-brand-color-6);
  min-width: 40px;
  text-align: right;
 }
@@ -195,7 +199,7 @@ const formatBytes = (bytes: number): string => {

 .download-speed {
  text-align: center;
-  color: #0052d9;
+  color: var(--td-brand-color-4);
  font-weight: 500;
 }

@@ -205,21 +209,21 @@ const formatBytes = (bytes: number): string => {
    background: #2d2d2d;
    color: #fff;
  }
-  
+
  .progress-header h3 {
    color: #fff;
  }
-  
+
  .progress-header p {
    color: #ccc;
  }
-  
+
  .progress-bar {
    background-color: #404040;
  }
-  
+
  .progress-details {
    color: #ccc;
  }
 }
-</style>
+</style>
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -1,4 +1,5 @@
 import './assets/base.css'
+import 'animate.css';

 // 引入组件库的少量全局样式变量
 // import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式
--- a/src/renderer/src/router/index.ts
+++ b/src/renderer/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createWebHashHistory, createRouter, RouteRecordRaw, RouterOptions } from 'vue-router'

-const routes: RouteRecordRaw[] = [
+let routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'welcome',
@@ -11,10 +11,6 @@ const routes: RouteRecordRaw[] = [
    redirect: '/home/find',
    component: () => import('@renderer/views/home/index.vue'),
    children: [
-      {
-        path: '',
-        redirect: '/home/find'
-      },
      {
        path: 'find',
        name: 'find',
@@ -45,6 +41,10 @@ const routes: RouteRecordRaw[] = [
  {
    path: '/settings',
    name: 'settings',
+    meta: {
+      transitionIn: "animate__fadeIn",
+      transitionOut: "animate__fadeOut",
+    },
    component: () => import('@renderer/views/settings/index.vue')
  },
  {
@@ -53,9 +53,30 @@ const routes: RouteRecordRaw[] = [
    component: () => import('@renderer/views/settings/plugins.vue')
  }
 ]
+function setAnimate(routerObj: RouteRecordRaw[]) {
+  for (let i = 0; i < routerObj.length; i++) {
+    let item = routerObj[i];
+    if (item.children && item.children.length > 0) {
+      setAnimate(item.children);
+    } else {
+      if (item.meta) continue
+      item.meta = item.meta || {};
+      item.meta.transitionIn = 'animate__fadeInRight';
+      item.meta.transitionOut = 'animate__fadeOutLeft';
+    }
+  }
+}
+setAnimate(routes)
 const option: RouterOptions = {
  history: createWebHashHistory(),
-  routes
+  routes,
+  scrollBehavior(_to_, _from_, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
 }

 const router = createRouter(option)
--- a/src/renderer/src/store/LocalUserDetail.ts
+++ b/src/renderer/src/store/LocalUserDetail.ts
@@ -20,7 +20,8 @@ export const LocalUserDetailStore = defineStore('Local', () => {
        topBarStyle: false,
        mainColor: '#00DAC0',
        volume: 80,
-        currentTime: 0
+        currentTime: 0,
+        selectSources: 'wy'
      }
      localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
    }
--- a/src/renderer/src/store/Settings.ts
+++ b/src/renderer/src/store/Settings.ts
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface SettingsState {
+  showFloatBall: boolean
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  // 从本地存储加载设置，如果没有则使用默认值
+  const loadSettings = (): SettingsState => {
+    try {
+      const savedSettings = localStorage.getItem('appSettings')
+      if (savedSettings) {
+        return JSON.parse(savedSettings)
+      }
+    } catch (error) {
+      console.error('加载设置失败:', error)
+    }
+    
+    // 默认设置
+    return {
+      showFloatBall: true
+    }
+  }
+
+  const settings = ref<SettingsState>(loadSettings())
+
+  // 保存设置到本地存储
+  const saveSettings = () => {
+    localStorage.setItem('appSettings', JSON.stringify(settings.value))
+  }
+
+  // 更新设置
+  const updateSettings = (newSettings: Partial<SettingsState>) => {
+    settings.value = { ...settings.value, ...newSettings }
+    saveSettings()
+  }
+
+  // 切换悬浮球显示状态
+  const toggleFloatBall = () => {
+    settings.value.showFloatBall = !settings.value.showFloatBall
+    saveSettings()
+  }
+
+  return {
+    settings,
+    updateSettings,
+    toggleFloatBall
+  }
+})
--- a/src/renderer/src/utils/playlistManager.ts
+++ b/src/renderer/src/utils/playlistManager.ts
@@ -12,8 +12,8 @@ type PlaylistEvents = {
 // 创建全局事件总线
 const emitter = mitt<PlaylistEvents>()

-// 将事件总线挂载到全局
-;(window as any).musicEmitter = emitter
+  // 将事件总线挂载到全局
+  ; (window as any).musicEmitter = emitter
 const qualityMap: Record<string, string> = {
  '128k': '标准音质',
  '192k': '高品音质',
@@ -87,8 +87,12 @@ export async function addToPlaylistAndPlay(
    }

    await MessagePlugin.success('已添加到播放列表并开始播放')
-  } catch (error) {
+  } catch (error: any) {
    console.error('播放失败:', error)
+    if (error.message) {
+      await MessagePlugin.error('播放失败了: ' + error.message)
+      return
+    }
    await MessagePlugin.error('播放失败了，可能还没有版权')
  }
 }
--- a/src/renderer/src/views/home/index.vue
+++ b/src/renderer/src/views/home/index.vue
@@ -89,89 +89,86 @@ const handleKeyDown = () => {
 </script>

 <template>
-  <t-layout class="home-container">
-    <!-- sidebar -->
-    <t-aside class="sidebar">
-      <div class="sidebar-content">
-        <div class="logo-section">
-          <div class="logo-icon">
-            <i class="iconfont icon-music"></i>
+  <div class="home">
+    <t-layout class="home-container">
+      <!-- sidebar -->
+      <t-aside class="sidebar">
+        <div class="sidebar-content">
+          <div class="logo-section">
+            <div class="logo-icon">
+              <i class="iconfont icon-music"></i>
+            </div>
+            <p class="app-title">
+              <span style="color: #000; font-weight: 800">Ceru Music</span>
+            </p>
          </div>
-          <p class="app-title">
-            <span style="color: #000; font-weight: 800">Ceru Music</span>
-          </p>
+
+          <nav class="nav-section">
+            <t-button v-for="(item, index) in menuList" :key="index" :variant="menuActive == index ? 'base' : 'text'"
+              :class="menuActive == index ? 'nav-button active' : 'nav-button'" block @click="handleClick(index)">
+              <i :class="`iconfont ${item.icon} nav-icon`"></i>
+              {{ item.name }}
+            </t-button>
+          </nav>
        </div>
+      </t-aside>

-        <nav class="nav-section">
-          <t-button
-            v-for="(item, index) in menuList"
-            :key="index"
-            :variant="menuActive == index ? 'base' : 'text'"
-            :class="menuActive == index ? 'nav-button active' : 'nav-button'"
-            block
-            @click="handleClick(index)"
-          >
-            <i :class="`iconfont ${item.icon} nav-icon`"></i>
-            {{ item.name }}
-          </t-button>
-        </nav>
-      </div>
-    </t-aside>
+      <t-layout style="flex: 1">
+        <t-content>
+          <div class="content">
+            <!-- Header -->
+            <div class="header">
+              <t-button shape="circle" theme="default" class="nav-btn" @click="goBack">
+                <i class="iconfont icon-xiangzuo"></i>
+              </t-button>
+              <t-button shape="circle" theme="default" class="nav-btn" @click="goForward">
+                <i class="iconfont icon-xiangyou"></i>
+              </t-button>

-    <t-layout style="flex: 1">
-      <t-content>
-        <div class="content">
-          <!-- Header -->
-          <div class="header">
-            <t-button shape="circle" theme="default" class="nav-btn" @click="goBack">
-              <i class="iconfont icon-xiangzuo"></i>
-            </t-button>
-            <t-button shape="circle" theme="default" class="nav-btn" @click="goForward">
-              <i class="iconfont icon-xiangyou"></i>
-            </t-button>
+              <div class="search-container">
+                <div class="search-input">
+                  <svg class="icon" aria-hidden="true">
+                    <use :xlink:href="`#icon-${source}`"></use>
+                  </svg>
+                  <t-input v-model="keyword" placeholder="搜索音乐、歌手" style="width: 100%" @enter="handleKeyDown">
+                    <template #suffix>
+                      <t-button theme="primary" variant="text" shape="circle"
+                        style="display: flex; align-items: center; justify-content: center" @click="handleSearch">
+                        <SearchIcon style="font-size: 16px; color: #000" />
+                      </t-button>
+                    </template>
+                  </t-input>
+                </div>

-            <div class="search-container">
-              <div class="search-input">
-                <svg class="icon" aria-hidden="true">
-                  <use :xlink:href="`#icon-${source}`"></use>
-                </svg>
-                <t-input
-                  v-model="keyword"
-                  placeholder="搜索音乐、歌手"
-                  style="width: 100%"
-                  @enter="handleKeyDown"
-                >
-                  <template #suffix>
-                    <t-button
-                      theme="primary"
-                      variant="text"
-                      shape="circle"
-                      style="display: flex; align-items: center; justify-content: center"
-                      @click="handleSearch"
-                    >
-                      <SearchIcon style="font-size: 16px; color: #000" />
-                    </t-button>
-                  </template>
-                </t-input>
+                <TitleBarControls :color="'#000'"></TitleBarControls>
              </div>
+            </div>

-              <TitleBarControls :color="'#000'"></TitleBarControls>
+            <div class="mainContent">
+              <router-view v-slot="{ Component, route }">
+                <Transition name="page"
+                  :enter-active-class="`animate__animated ${route.meta.transitionIn} animate__fast`"
+                  :leave-active-class="`animate__animated ${route.meta.transitionOut} animate__fast`">
+                  <KeepAlive exclude="list">
+                    <component :is="Component" />
+                  </KeepAlive>
+                </Transition>
+              </router-view>
            </div>
          </div>
-
-          <div class="mainContent">
-            <keep-alive>
-              <router-view />
-            </keep-alive>
-          </div>
-        </div>
-      </t-content>
+        </t-content>
+      </t-layout>
    </t-layout>
-  </t-layout>
-  <PlayMusic />
+    <PlayMusic />
+  </div>
 </template>

 <style lang="scss" scoped>
+.animate__animated {
+  position: absolute;
+  width: 100%;
+}
+
 .home-container {
  height: calc(100vh - var(--play-bottom-height));
  overflow-y: hidden;
@@ -218,6 +215,7 @@ const handleKeyDown = () => {
        font-weight: 500;
        font-size: 1.125rem;
        color: #111827;
+
        span {
          font-weight: 500;
          color: #b8f0cc;
@@ -264,10 +262,12 @@ const handleKeyDown = () => {
    }
  }
 }
+
 :deep(.t-layout__content) {
  height: 100%;
  display: flex;
 }
+
 .content {
  padding: 0;
  background: #f6f6f6;
@@ -288,6 +288,7 @@ const handleKeyDown = () => {
      &:last-of-type {
        margin-right: 0.5rem;
      }
+
      .iconfont {
        font-size: 1rem;
        color: #3d4043;
@@ -303,6 +304,7 @@ const handleKeyDown = () => {
      flex: 1;
      position: relative;
      justify-content: space-between;
+
      .search-input {
        -webkit-app-region: no-drag;
        display: flex;
@@ -333,11 +335,14 @@ const handleKeyDown = () => {
      }
    }
  }
+
  .mainContent {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
-    height: 0; /* 确保flex子元素能够正确计算高度 */
+    position: relative;
+    height: 0;
+    /* 确保flex子元素能够正确计算高度 */

    &::-webkit-scrollbar {
      width: 0.375rem;
--- a/src/renderer/src/views/music/find.vue
+++ b/src/renderer/src/views/music/find.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch,WatchHandle, onUnmounted  } from 'vue'
 import { useRouter } from 'vue-router'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 // 路由实例
@@ -13,9 +13,16 @@ const error = ref('')
 // 热门歌曲数据
 const hotSongs: any = ref([])

+
+let watchSource:WatchHandle |null = null
 // 获取热门歌单数据
 const fetchHotSonglist = async () => {
  const LocalUserDetail = LocalUserDetailStore()
+  watchSource =watch(LocalUserDetail.userSource,()=>{
+    if(LocalUserDetail.userSource.source){
+      fetchHotSonglist()
+    }
+  },{deep:true})
  try {
    loading.value = true
    error.value = ''
@@ -71,6 +78,11 @@ const playSong = (song: any): void => {
 onMounted(() => {
  fetchHotSonglist()
 })
+onUnmounted(()=>{
+  if(watchSource){
+    watchSource()
+  }
+})
 </script>

 <template>
--- a/src/renderer/src/views/music/list.vue
+++ b/src/renderer/src/views/music/list.vue
@@ -186,6 +186,7 @@ onMounted(() => {

 <style lang="scss" scoped>
 .list-container {
+  box-sizing: border-box;
  background: #fafafa;
  box-sizing: border-box;
  width: 100%;
--- a/src/renderer/src/views/music/local.vue
+++ b/src/renderer/src/views/music/local.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'

 // 本地音乐数据
 const localSongs = ref([
@@ -85,25 +86,303 @@ const deleteSong = (song: any): void => {
  console.log('删除歌曲:', song.title)
  // 这里可以添加删除确认和实际删除逻辑
 }
+
+// 歌单相关功能
+interface Playlist {
+  id: number
+  name: string
+  songs: any[]
+  createdAt: string
+  updatedAt: string
+}
+
+const playlists = ref<Playlist[]>([
+  {
+    id: 1,
+    name: '我喜欢的音乐',
+    songs: [localSongs.value[0], localSongs.value[2]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  },
+  {
+    id: 2,
+    name: '周杰伦精选',
+    songs: [localSongs.value[1], localSongs.value[3], localSongs.value[4]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+])
+
+// 当前选中的歌单
+const currentPlaylist = ref<Playlist | null>(null)
+
+// 显示歌单对话框
+const showPlaylistDialog = ref(false)
+const showCreatePlaylistDialog = ref(false)
+const newPlaylistName = ref('')
+
+// 创建新歌单
+const createPlaylist = () => {
+  if (!newPlaylistName.value.trim()) {
+    MessagePlugin.warning('歌单名称不能为空')
+    return
+  }
+
+  const newPlaylist: Playlist = {
+    id: playlists.value.length + 1,
+    name: newPlaylistName.value,
+    songs: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+
+  playlists.value.push(newPlaylist)
+  newPlaylistName.value = ''
+  showCreatePlaylistDialog.value = false
+  MessagePlugin.success('歌单创建成功')
+}
+
+// 将当前播放列表保存为歌单
+const saveCurrentPlaylistAs = () => {
+  showCreatePlaylistDialog.value = true
+}
+
+// 一键播放歌单
+const playPlaylist = (playlist: Playlist) => {
+  if (playlist.songs.length === 0) {
+    MessagePlugin.warning('歌单中没有歌曲')
+    return
+  }
+
+  // 这里应该调用播放器的方法替换播放列表
+  console.log('播放歌单:', playlist.name, '共', playlist.songs.length, '首歌曲')
+  MessagePlugin.success(`已将播放列表替换为歌单"${playlist.name}"`)
+}
+
+// 查看歌单详情
+const viewPlaylist = (playlist: Playlist) => {
+  currentPlaylist.value = playlist
+  showPlaylistDialog.value = true
+}
+
+// 添加歌曲到歌单
+const addToPlaylist = (song: any, playlist: Playlist) => {
+  // 检查歌曲是否已在歌单中
+  const exists = playlist.songs.some((s) => s.id === song.id)
+  if (exists) {
+    MessagePlugin.warning(`歌曲"${song.title}"已在歌单中`)
+    return
+  }
+
+  playlist.songs.push(song)
+  playlist.updatedAt = new Date().toISOString()
+  MessagePlugin.success(`已将"${song.title}"添加到歌单"${playlist.name}"`)
+}
+
+// 从歌单中移除歌曲
+const removeFromPlaylist = (songId: number, playlist: Playlist) => {
+  const index = playlist.songs.findIndex((s) => s.id === songId)
+  if (index !== -1) {
+    const songTitle = playlist.songs[index].title
+    playlist.songs.splice(index, 1)
+    playlist.updatedAt = new Date().toISOString()
+    MessagePlugin.success(`已从歌单"${playlist.name}"中移除"${songTitle}"`)
+  }
+}
+
+// 删除歌单
+const deletePlaylist = (playlistId: number) => {
+  const index = playlists.value.findIndex((p) => p.id === playlistId)
+  if (index !== -1) {
+    const playlistName = playlists.value[index].name
+    playlists.value.splice(index, 1)
+
+    // 如果正在查看的歌单被删除，关闭对话框
+    if (currentPlaylist.value && currentPlaylist.value.id === playlistId) {
+      currentPlaylist.value = null
+      showPlaylistDialog.value = false
+    }
+
+    MessagePlugin.success(`已删除歌单"${playlistName}"`)
+  }
+}
 </script>

 <template>
-  <div class="local-container">
-    <!-- 页面标题和操作 -->
-    <div class="page-header">
-      <div class="header-left">
-        <h2>本地音乐</h2>
-        <div class="stats">
-          <span>{{ stats.totalSongs }} 首歌曲</span>
-          <span>总时长 {{ stats.totalDuration }}</span>
-          <span>总大小 {{ stats.totalSize }}</span>
+  <div>
+    <div class="local-container">
+      <!-- 页面标题和操作 -->
+      <div class="page-header">
+        <div class="header-left">
+          <h2>本地音乐</h2>
+          <div class="stats">
+            <span>{{ stats.totalSongs }} 首歌曲</span>
+            <span>总时长 {{ stats.totalDuration }}</span>
+            <span>总大小 {{ stats.totalSize }}</span>
+          </div>
+        </div>
+        <div class="header-actions">
+          <t-button theme="default" @click="openMusicFolder">
+            <i class="iconfont icon-shouye"></i>
+            打开文件夹
+          </t-button>
+          <t-button theme="primary" @click="importMusic">
+            <i class="iconfont icon-zengjia"></i>
+            导入音乐
+          </t-button>
+          <t-button theme="default" @click="saveCurrentPlaylistAs">
+            <i class="iconfont icon-baocun"></i>
+            保存为歌单
+          </t-button>
        </div>
      </div>
-      <div class="header-actions">
-        <t-button theme="default" @click="openMusicFolder">
-          <i class="iconfont icon-shouye"></i>
-          打开文件夹
-        </t-button>
+
+      <!-- 歌单区域 -->
+      <div class="playlists-section">
+        <div class="section-header">
+          <h3>我的歌单</h3>
+          <t-button theme="primary" variant="text" @click="showCreatePlaylistDialog = true">
+            <i class="iconfont icon-zengjia"></i>
+            新建歌单
+          </t-button>
+        </div>
+
+        <div class="playlists-grid">
+          <div v-for="playlist in playlists" :key="playlist.id" class="playlist-card">
+            <div class="playlist-cover" @click="viewPlaylist(playlist)">
+              <div class="cover-overlay">
+                <i class="iconfont icon-bofang"></i>
+              </div>
+            </div>
+            <div class="playlist-info">
+              <div class="playlist-name" @click="viewPlaylist(playlist)">{{ playlist.name }}</div>
+              <div class="playlist-meta">{{ playlist.songs.length }}首歌曲</div>
+            </div>
+            <div class="playlist-actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放歌单"
+                @click="playPlaylist(playlist)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="default"
+                variant="text"
+                size="small"
+                title="查看详情"
+                @click="viewPlaylist(playlist)"
+              >
+                <i class="iconfont icon-liebiao"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除歌单"
+                @click="deletePlaylist(playlist.id)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 音乐列表 -->
+      <div class="music-list">
+        <div class="list-header">
+          <div class="header-item index">#</div>
+          <div class="header-item title">标题</div>
+          <div class="header-item artist">艺术家</div>
+          <div class="header-item album">专辑</div>
+          <div class="header-item duration">时长</div>
+          <div class="header-item size">大小</div>
+          <div class="header-item format">格式</div>
+          <div class="header-item actions">操作</div>
+        </div>
+
+        <div class="list-body">
+          <div
+            v-for="(song, index) in localSongs"
+            :key="song.id"
+            class="song-row"
+            @dblclick="playSong(song)"
+          >
+            <div class="row-item index">{{ index + 1 }}</div>
+            <div class="row-item title">
+              <div class="song-title">{{ song.title }}</div>
+            </div>
+            <div class="row-item artist">{{ song.artist }}</div>
+            <div class="row-item album">{{ song.album }}</div>
+            <div class="row-item duration">{{ song.duration }}</div>
+            <div class="row-item size">{{ song.size }}</div>
+            <div class="row-item format">
+              <span class="format-badge">{{ song.format }}</span>
+              <span class="bitrate">{{ song.bitrate }}</span>
+            </div>
+            <div class="row-item actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放"
+                @click="playSong(song)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-dropdown
+                :options="[
+                  {
+                    content: '添加到歌单',
+                    value: 'addToPlaylist',
+                    children: playlists.map((p) => ({ content: p.name, value: `playlist-${p.id}` }))
+                  }
+                ]"
+                @click="
+                  (data) => {
+                    if (data.startsWith('playlist-')) {
+                      const playlistId = parseInt(data.split('-')[1])
+                      const targetPlaylist = playlists.find((p) => p.id === playlistId)
+                      if (targetPlaylist) {
+                        addToPlaylist(song, targetPlaylist)
+                      }
+                    }
+                  }
+                "
+              >
+                <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
+                  <i class="iconfont icon-gengduo"></i>
+                </t-button>
+              </t-dropdown>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除"
+                @click="deleteSong(song)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="localSongs.length === 0" class="empty-state">
+        <div class="empty-icon">
+          <i class="iconfont icon-music"></i>
+        </div>
+        <h3>暂无本地音乐</h3>
+        <p>点击"导入音乐"按钮添加您的音乐文件</p>
        <t-button theme="primary" @click="importMusic">
          <i class="iconfont icon-zengjia"></i>
          导入音乐
@@ -111,87 +390,110 @@ const deleteSong = (song: any): void => {
      </div>
    </div>

-    <!-- 音乐列表 -->
-    <div class="music-list">
-      <div class="list-header">
-        <div class="header-item index">#</div>
-        <div class="header-item title">标题</div>
-        <div class="header-item artist">艺术家</div>
-        <div class="header-item album">专辑</div>
-        <div class="header-item duration">时长</div>
-        <div class="header-item size">大小</div>
-        <div class="header-item format">格式</div>
-        <div class="header-item actions">操作</div>
-      </div>
+    <!-- 创建歌单对话框 -->
+    <t-dialog
+      v-model:visible="showCreatePlaylistDialog"
+      header="创建新歌单"
+      :confirm-btn="{ content: '创建', theme: 'primary' }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="createPlaylist"
+    >
+      <t-input
+        v-model="newPlaylistName"
+        placeholder="请输入歌单名称"
+        clearable
+        @keyup.enter="createPlaylist"
+      />
+    </t-dialog>

-      <div class="list-body">
-        <div
-          v-for="(song, index) in localSongs"
-          :key="song.id"
-          class="song-row"
-          @dblclick="playSong(song)"
-        >
-          <div class="row-item index">{{ index + 1 }}</div>
-          <div class="row-item title">
-            <div class="song-title">{{ song.title }}</div>
+    <!-- 歌单详情对话框 -->
+    <t-dialog
+      v-model:visible="showPlaylistDialog"
+      :header="currentPlaylist?.name || '歌单详情'"
+      width="800px"
+      :footer="false"
+    >
+      <template v-if="currentPlaylist">
+        <div class="playlist-header">
+          <div class="playlist-info">
+            <h3>{{ currentPlaylist.name }}</h3>
+            <div class="playlist-meta">
+              <span>{{ currentPlaylist.songs.length }} 首歌曲</span>
+              <span>创建于 {{ new Date(currentPlaylist.createdAt).toLocaleDateString() }}</span>
+            </div>
          </div>
-          <div class="row-item artist">{{ song.artist }}</div>
-          <div class="row-item album">{{ song.album }}</div>
-          <div class="row-item duration">{{ song.duration }}</div>
-          <div class="row-item size">{{ song.size }}</div>
-          <div class="row-item format">
-            <span class="format-badge">{{ song.format }}</span>
-            <span class="bitrate">{{ song.bitrate }}</span>
-          </div>
-          <div class="row-item actions">
-            <t-button
-              shape="circle"
-              theme="primary"
-              variant="text"
-              size="small"
-              title="播放"
-              @click="playSong(song)"
-            >
+          <div class="playlist-actions">
+            <t-button theme="primary" @click="playPlaylist(currentPlaylist)">
              <i class="iconfont icon-a-tingzhiwukuang"></i>
-            </t-button>
-            <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
-              <i class="iconfont icon-gengduo"></i>
-            </t-button>
-            <t-button
-              shape="circle"
-              theme="danger"
-              variant="text"
-              size="small"
-              title="删除"
-              @click="deleteSong(song)"
-            >
-              <i class="iconfont icon-shanchu"></i>
+              一键播放
            </t-button>
          </div>
        </div>
-      </div>
-    </div>

-    <!-- 空状态 -->
-    <div v-if="localSongs.length === 0" class="empty-state">
-      <div class="empty-icon">
-        <i class="iconfont icon-music"></i>
-      </div>
-      <h3>暂无本地音乐</h3>
-      <p>点击"导入音乐"按钮添加您的音乐文件</p>
-      <t-button theme="primary" @click="importMusic">
-        <i class="iconfont icon-zengjia"></i>
-        导入音乐
-      </t-button>
-    </div>
+        <div class="playlist-songs">
+          <div class="list-header">
+            <div class="header-item index">#</div>
+            <div class="header-item title">标题</div>
+            <div class="header-item artist">艺术家</div>
+            <div class="header-item album">专辑</div>
+            <div class="header-item duration">时长</div>
+            <div class="header-item actions">操作</div>
+          </div>
+
+          <div class="list-body">
+            <div
+              v-for="(song, index) in currentPlaylist.songs"
+              :key="song.id"
+              class="song-row"
+              @dblclick="playSong(song)"
+            >
+              <div class="row-item index">{{ index + 1 }}</div>
+              <div class="row-item title">
+                <div class="song-title">{{ song.title }}</div>
+              </div>
+              <div class="row-item artist">{{ song.artist }}</div>
+              <div class="row-item album">{{ song.album }}</div>
+              <div class="row-item duration">{{ song.duration }}</div>
+              <div class="row-item actions">
+                <t-button
+                  shape="circle"
+                  theme="primary"
+                  variant="text"
+                  size="small"
+                  title="播放"
+                  @click="playSong(song)"
+                >
+                  <i class="iconfont icon-a-tingzhiwukuang"></i>
+                </t-button>
+                <t-button
+                  shape="circle"
+                  theme="danger"
+                  variant="text"
+                  size="small"
+                  title="从歌单中移除"
+                  @click="removeFromPlaylist(song.id, currentPlaylist)"
+                >
+                  <i class="iconfont icon-shanchu"></i>
+                </t-button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="currentPlaylist.songs.length === 0" class="empty-playlist">
+            <p>歌单中暂无歌曲</p>
+          </div>
+        </div>
+      </template>
+    </t-dialog>
  </div>
 </template>

 <style lang="scss" scoped>
 .local-container {
  padding: 2rem;
-  max-width: 1400px;
  margin: 0 auto;
+  width: 100%;
+  position: relative;
 }

 .page-header {
@@ -231,6 +533,7 @@ const deleteSong = (song: any): void => {
 }

 .music-list {
+  width: 100%;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
@@ -239,7 +542,9 @@ const deleteSong = (song: any): void => {

 .list-header {
  display: grid;
-  grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+  width: 100%;
+  grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #f9fafb;
@@ -257,7 +562,8 @@ const deleteSong = (song: any): void => {
 .list-body {
  .song-row {
    display: grid;
-    grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
@@ -365,4 +671,152 @@ const deleteSong = (song: any): void => {
    margin-bottom: 2rem;
  }
 }
+
+/* 歌单区域样式 */
+.playlists-section {
+  margin-bottom: 2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+    }
+  }
+}
+
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.playlist-card {
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    .playlist-cover .cover-overlay {
+      opacity: 1;
+    }
+  }
+
+  .playlist-cover {
+    height: 160px;
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    position: relative;
+    cursor: pointer;
+
+    .cover-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      .iconfont {
+        font-size: 3rem;
+        color: #fff;
+      }
+    }
+  }
+
+  .playlist-info {
+    padding: 1rem;
+
+    .playlist-name {
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover {
+        color: #4f46e5;
+      }
+    }
+
+    .playlist-meta {
+      font-size: 0.75rem;
+      color: #6b7280;
+    }
+  }
+
+  .playlist-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 1rem 1rem;
+    gap: 0.5rem;
+  }
+}
+
+/* 歌单详情对话框样式 */
+.playlist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+
+  .playlist-info {
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.5rem;
+    }
+
+    .playlist-meta {
+      display: flex;
+      gap: 1rem;
+      font-size: 0.875rem;
+      color: #6b7280;
+
+      span {
+        &:not(:last-child)::after {
+          content: '•';
+          margin-left: 1rem;
+          color: #d1d5db;
+        }
+      }
+    }
+  }
+}
+
+.playlist-songs {
+  .list-header {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+
+  .list-body .song-row {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+}
+
+.empty-playlist {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
 </style>
--- a/src/renderer/src/views/settings/index.vue
+++ b/src/renderer/src/views/settings/index.vue
@@ -53,6 +53,7 @@ const clearAPIKey = (): void => {
 import { useRouter } from 'vue-router'
 import { computed, watch } from 'vue'
 import MusicCache from '@renderer/components/Settings/MusicCache.vue'
+import AIFloatBallSettings from '@renderer/components/Settings/AIFloatBallSettings.vue'
 const router = useRouter()
 const goPlugin = () => {
  router.push('/plugins')
@@ -181,7 +182,7 @@ const getCurrentSourceName = () => {
    <div class="settings-container">
      <div class="settings-content">
        <div class="settings-header">
-          <h2>标题栏控制组件演示</h2>
+          <h2>设置你的顶部控制栏</h2>
          <p>这里展示了两种不同风格的标题栏控制按钮</p>
        </div>

@@ -289,6 +290,8 @@ const getCurrentSourceName = () => {
              </div>
            </div>
          </div>
+          <AIFloatBallSettings></AIFloatBallSettings>
+
        </div>

        <!-- 播放列表管理部分 -->
@@ -430,7 +433,9 @@ const getCurrentSourceName = () => {
            <MusicCache></MusicCache>
          </div>
        </div>
-
+        <div class="demo-section">
+          <Versions></Versions>
+        </div>

        <div class="demo-section">
          <h3>功能说明</h3>
@@ -508,7 +513,7 @@ const getCurrentSourceName = () => {
 }

 .settings-content {
-  max-width: 800px;
+  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
@@ -574,7 +579,7 @@ const getCurrentSourceName = () => {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 0.75rem 1rem;
+  padding: 14px 1rem;
  background: #f6f6f6;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
@@ -602,7 +607,7 @@ const getCurrentSourceName = () => {

  .iconfont {
    font-size: 1.25rem;
-    color: #f97316;
+    color: var(--td-brand-color);
    margin-top: 0.125rem;
  }

@@ -1015,23 +1020,23 @@ const getCurrentSourceName = () => {
 }

 // 响应式设计
-@media (max-width: 768px) {
-  .music-config-container {
-    .source-cards {
-      grid-template-columns: 1fr;
-    }
+// @media (max-width: 768px) {
+//   .music-config-container {
+//     .source-cards {
+//       grid-template-columns: 1fr;
+//     }

-    .config-status {
-      grid-template-columns: 1fr;
-    }
-  }
+//     .config-status {
+//       grid-template-columns: 1fr;
+//     }
+//   }

-  .plugin-prompt {
-    flex-direction: column;
-    text-align: center;
-    gap: 1.5rem;
-  }
-}
+//   .plugin-prompt {
+//     flex-direction: column;
+//     text-align: center;
+//     gap: 1.5rem;
+//   }
+// }

 // 动画效果
@keyframes fadeInUp {
--- a/src/renderer/src/views/welcome/index.vue
+++ b/src/renderer/src/views/welcome/index.vue
@@ -1,13 +1,312 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-const router = useRouter()
-router.push('home')
-</script>
-
 <template>
-  <div>
-    <h1>欢迎来到Ceru Music</h1>
+  <div class="welcome-container">
+    <!-- 左侧Logo区域 -->
+    <div class="logo-section">
+      <div class="image-container">
+        <div class="image-bg"></div>
+        <img class="logo-image" src="/logo.svg" alt="Ceru Music Logo">
+      </div>
+    </div>
+
+    <!-- 右侧内容区域 -->
+    <div class="content-section">
+      <div class="brand-content">
+        <h1 class="brand-title">Cerulean Music</h1>
+        <p class="brand-subtitle">澜音-纯净音乐，极致音乐体验</p>
+
+        <!-- 加载状态 -->
+        <!-- <div class="loading-area">
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+          </div>
+          <p class="loading-text">{{ loadingText }}</p>
+        </div> -->
+
+        <!-- 特性标签 -->
+        <div class="feature-tags">
+          <span class="tag" v-for="(feature, index) in features" :key="index">
+            {{ feature }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 版本信息 -->
+    <div class="version-info">v{{ version }}</div>
  </div>
 </template>

-<style scoped></style>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const version = ref('1.0.0') // 默认版本号
+
+// 特性列表
+const features = ['高品质音乐', '简约风', '离线播放', '丰富的插件支持']
+
+onMounted(async () => {
+  // 通过IPC获取版本号
+  try {
+    const appVersion = await window.electron.ipcRenderer.invoke('get-app-version')
+    if (appVersion) {
+      version.value = appVersion
+    }
+  } catch (error) {
+    console.warn('Failed to get app version via IPC:', error)
+  }
+
+  setTimeout(() => {
+    router.push('/home')
+  }, 2000)
+})
+</script>
+
+<style scoped>
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
+  position: relative;
+}
+
+/* 左侧Logo区域 */
+.logo-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.image-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-bg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: min(30vw, 70vh);
+  height: min(30vw, 70vh);
+  background-image: linear-gradient(-45deg, #b8f1cf 50%, #47caff 50%);
+  filter: blur(56px);
+  transform: translate(-50%, -50%);
+  z-index: 0;
+}
+
+.logo-image {
+  width: min(30vw, 70vh);
+  height: min(30vw, 70vh);
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+}
+
+/* 右侧内容区域 */
+.content-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2rem 4rem 2rem 2rem;
+}
+
+.brand-content {
+  /* max-width: 400px; */
+  animation: slideInRight 1s ease-out;
+}
+
+.brand-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  background: -webkit-linear-gradient(120deg, #5dd6cc 30%, #b8f1cc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -2px;
+  line-height: 1.1;
+}
+
+.brand-subtitle {
+  font-size: 1.5rem;
+  color: #666666;
+  margin: 1rem 0 5rem 0;
+  font-weight: 400;
+}
+
+/* 加载区域 */
+.loading-area {
+  margin-bottom: 2rem;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background: #f0f0f0;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(-45deg, #b8f1cf 0%, #47caff 100%);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  font-size: 0.9rem;
+  color: #888888;
+  margin: 0;
+  font-weight: 400;
+}
+
+/* 特性标签 */
+.feature-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  padding: 0.4rem 0.8rem;
+  background: #B8F1CE;
+  border: 1px solid #e9ecef;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  color: #333333;
+  transition: all 0.3s ease;
+  opacity: 0.5;
+}
+
+.tag.active {
+  background: linear-gradient(-45deg, #25ff7c 0%, #47caff 100%);
+  border-color: transparent;
+  color: white;
+  opacity: 1;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(71, 202, 255, 0.3);
+}
+
+/* 版本信息 */
+.version-info {
+  position: absolute;
+  bottom: 2rem;
+  right: 2rem;
+  font-size: 0.8rem;
+  color: #9e9e9e;
+  font-weight: 300;
+}
+
+/* 动画定义 */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 响应式设计
+@media (max-width: 1024px) {
+  .welcome-container {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .logo-section {
+    flex: none;
+    padding: 2rem 2rem 1rem 2rem;
+  }
+  
+  .content-section {
+    flex: none;
+    justify-content: center;
+    padding: 1rem 2rem 2rem 2rem;
+  }
+  
+  .brand-title {
+    font-size: 2.8rem;
+  }
+  
+  .image-bg {
+    width: 150px;
+    height: 150px;
+    filter: blur(40px);
+  }
+  
+  .logo-image {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  .brand-title {
+    font-size: 2.2rem;
+  }
+  
+  .brand-subtitle {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 1rem;
+  }
+  
+  .image-bg {
+    width: 120px;
+    height: 120px;
+    filter: blur(30px);
+  }
+  
+  .logo-image {
+    width: 80px;
+    height: 80px;
+  }
+} */
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .welcome-container {
+    background: #1a1a1a;
+  }
+
+  .brand-subtitle {
+    color: #999999;
+  }
+
+  .loading-text {
+    color: #aaaaaa;
+  }
+
+  .progress-bar {
+    background: #333333;
+  }
+
+  .tag {
+    background: #2d2d2d;
+    border-color: #404040;
+    color: #cccccc;
+  }
+
+  .version-info {
+    color: #666666;
+  }
+}
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -2285,6 +2285,11 @@ alien-signals@^2.0.5:
  resolved "https://registry.npmmirror.com/alien-signals/-/alien-signals-2.0.6.tgz"
  integrity sha512-P3TxJSe31bUHBiblg59oU1PpaWPtmxF9GhJ/cB7OkgJ0qN/ifFSKUI25/v8ZhsT+lIG6ac8DpTOplXxORX6F3Q==

+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-regex@^2.0.0:
  version "2.1.1"
  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz"
@@ -5303,12 +5308,7 @@ lodash.merge@^4.6.2:
  resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

-lodash@^4.17.15:
-  version "4.17.21"
-  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
Author	SHA1	Message	Date
sqj	53d9197196	fix:修复已知bug	2025-08-30 05:06:14 +08:00
sqj	7a349272b2	feat(home.vue,App.vue):新增页面的切换过渡动画。fix(flowBall):悬浮球位置问题和调整悬浮球大小	2025-08-30 01:07:11 +08:00
sqj	29dfa45791	updateVersion	2025-08-28 21:36:16 +08:00
sqj	c2fcb25686	feat:优化部分ui设计，考虑目前Ai悬浮球功能不完善，新增Ai悬浮球全局隐藏功能	2025-08-28 21:34:58 +08:00