diff --git a/publish/changeLog.md b/publish/changeLog.md
index 41196e6d..6ec4da7a 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -21,6 +21,7 @@
 - 桌面歌词新增在任务栏显示歌词进程设置（此设置用于在录屏软件无法捕获歌词窗口时的变通解决方法）（#1063）
 - 添加kg源罗马音歌词的支持
 - 支持打开波点音乐歌单（需在酷我源打开）
+- 新增设置-基本设置-播放栏进度条样式设置（此版本默认使用迷你进度条样式，对于某些不喜欢该样式的人可以将其换成其他样式）
 
 ### 优化（界面/交互/功能）
 
diff --git a/src/common/defaultSetting.ts b/src/common/defaultSetting.ts
index bec8c7a2..5c6542b4 100644
--- a/src/common/defaultSetting.ts
+++ b/src/common/defaultSetting.ts
@@ -15,6 +15,7 @@ const defaultSetting: LX.AppSetting = {
   'common.randomAnimate': true,
   'common.isAgreePact': false,
   'common.controlBtnPosition': process.platform === 'darwin' ? 'left' : 'right',
+  'common.playBarProgressStyle': 'mini',
 
   'player.startupAutoPlay': false,
   'player.togglePlayMethod': 'listLoop',
diff --git a/src/common/types/app_setting.d.ts b/src/common/types/app_setting.d.ts
index 14404fec..cea50340 100644
--- a/src/common/types/app_setting.d.ts
+++ b/src/common/types/app_setting.d.ts
@@ -63,6 +63,11 @@ declare global {
        */
       'common.controlBtnPosition': 'left' | 'right'
 
+      /**
+       * 播放栏进度条样式
+       */
+      'common.playBarProgressStyle': 'mini' | 'full' | 'middle'
+
       /**
        * 启动时自动播放歌曲
        */
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index f6754888..c2be004b 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -267,6 +267,10 @@
   "setting__basic_font_size_19px": "Very big",
   "setting__basic_lang": "Language",
   "setting__basic_lang_title": "The language displayed in the software",
+  "setting__basic_playbar_progress_style": "Play bar progress bar style",
+  "setting__basic_playbar_progress_style_full": "Full width",
+  "setting__basic_playbar_progress_style_middle": "Medium",
+  "setting__basic_playbar_progress_style_mini": "Mini",
   "setting__basic_show_animation": "Show switching animation",
   "setting__basic_source": "Music source",
   "setting__basic_source_status_failed": "Initialization failed",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 224eb584..07582fdb 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -267,6 +267,10 @@
   "setting__basic_font_size_19px": "非常大",
   "setting__basic_lang": "语言",
   "setting__basic_lang_title": "软件显示的语言",
+  "setting__basic_playbar_progress_style": "播放栏进度条样式",
+  "setting__basic_playbar_progress_style_full": "全宽",
+  "setting__basic_playbar_progress_style_middle": "中等",
+  "setting__basic_playbar_progress_style_mini": "迷你",
   "setting__basic_show_animation": "显示切换动画",
   "setting__basic_source": "音乐来源",
   "setting__basic_source_status_failed": "初始化失败",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index a9539768..1b1e18a9 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -267,6 +267,10 @@
   "setting__basic_font_size_19px": "非常大",
   "setting__basic_lang": "語言",
   "setting__basic_lang_title": "軟件顯示的語言",
+  "setting__basic_playbar_progress_style": "播放欄進度條樣式",
+  "setting__basic_playbar_progress_style_full": "全寬",
+  "setting__basic_playbar_progress_style_middle": "中等",
+  "setting__basic_playbar_progress_style_mini": "迷你",
   "setting__basic_show_animation": "顯示切換動畫",
   "setting__basic_source": "音樂來源",
   "setting__basic_source_status_failed": "初始化失敗",
diff --git a/src/renderer/components/layout/PlayBar/FullWidthProgress.vue b/src/renderer/components/layout/PlayBar/FullWidthProgress.vue
new file mode 100644
index 00000000..7b947f7a
--- /dev/null
+++ b/src/renderer/components/layout/PlayBar/FullWidthProgress.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :class="$style.player">
+    <div :class="$style.progress">
+      <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+    </div>
+    <div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
+      <img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
+      <div v-else :class="$style.emptyPic">L<span>X</span></div>
+    </div>
+    <div :class="$style.infoContent">
+      <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
+        {{ title }}
+      </div>
+      <div :class="$style.status">{{ statusText }}</div>
+    </div>
+    <div :class="$style.timeContent">
+      <span>{{ nowPlayTimeStr }}</span>
+      <span style="margin: 0 1px;">/</span>
+      <span>{{ maxPlayTimeStr }}</span>
+    </div>
+    <!-- <play-progress /> -->
+    <control-btns />
+    <div :class="$style.playBtnContent">
+      <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-prevMusic" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
+        <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-pause" />
+        </svg>
+        <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-play" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-nextMusic" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from '@common/utils/vueTools'
+import { useRouter } from '@common/utils/vueRouter'
+import { clipboardWriteText } from '@common/utils/electron'
+import ControlBtns from './ControlBtns'
+// import PlayProgress from './PlayProgress'
+import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
+// import { lyric } from '@renderer/core/share/lyric'
+import {
+  statusText,
+  musicInfo,
+  isShowPlayerDetail,
+  isPlay,
+  playInfo,
+  playMusicInfo,
+} from '@renderer/store/player/state'
+import {
+  setMusicInfo,
+  setShowPlayerDetail,
+} from '@renderer/store/player/action'
+import { appSetting } from '@renderer/store/setting'
+import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+
+export default {
+  name: 'CorePlayBar',
+  components: {
+    ControlBtns,
+    // PlayProgress,
+  },
+  setup() {
+    const router = useRouter()
+
+    const {
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+    } = usePlayProgress()
+
+    const showPlayerDetail = () => {
+      if (!playMusicInfo.musicInfo) return
+      setShowPlayerDetail(true)
+    }
+    const handleCopy = (text) => {
+      clipboardWriteText(text)
+    }
+
+    const imgError = () => {
+      // console.log(e)
+      setMusicInfo({ pic: null })
+    }
+
+    const handleToMusicLocation = () => {
+      const listId = playMusicInfo.listId
+      if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
+      if (playInfo.playIndex == -1) return
+      router.push({
+        path: '/list',
+        query: {
+          id: listId,
+          scrollIndex: playInfo.playIndex,
+        },
+      })
+    }
+
+    const title = computed(() => {
+      return musicInfo.name
+        ? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
+        : ''
+    })
+
+    // onBeforeUnmount(() => {
+    // window.eventHub.emit(eventPlayerNames.setTogglePlay)
+    // })
+
+    return {
+      musicInfo,
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+      handleCopy,
+      imgError,
+      statusText,
+      title,
+      showPlayerDetail,
+      isPlay,
+      togglePlay,
+      playNext,
+      playPrev,
+      handleToMusicLocation,
+      isShowPlayerDetail,
+    }
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.player {
+  position: relative;
+  height: @height-player;
+  // border-top: 1px solid var(--color-primary-alpha-900);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  contain: strict;
+  padding: 8px 6px 6px;
+  z-index: 2;
+  // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  * {
+    box-sizing: border-box;
+  }
+
+  &:before {
+    .mixin-after;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-main-background);
+    opacity: .9;
+    z-index: -1;
+  }
+}
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: 6px;
+  // height: 15px;
+  .progressBar {
+    height: 2px;
+    border-radius: 0;
+  }
+}
+
+.picContent {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  // color: var(--color-primary);
+  // transition: @transition-normal;
+  // transition-property: color;
+  flex: none;
+  opacity: 1;
+  transition: opacity @transition-fast;
+  // transition-property: opacity;
+  display: flex;
+  justify-content: center;
+  // align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  // svg {
+  //   fill: currentColor;
+  // }
+  img {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    max-width: 100%;
+    max-height: 100%;
+    transition: @transition-normal;
+    transition-property: border-color;
+    // border-radius: 50%;
+    border-radius: @radius-border;
+    // border: 2px solid @color-theme_2-background_1;
+  }
+
+  .emptyPic {
+    background-color: var(--color-primary-light-900-alpha-200);
+    border-radius: @radius-border;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary-light-400-alpha-200);
+    user-select: none;
+    font-size: 20px;
+    font-family: Consolas, "Courier New", monospace;
+
+    span {
+      padding-left: 3px;
+    }
+  }
+}
+
+.infoContent {
+  padding-left: 10px;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  font-size: 13px;
+  color: var(--color-font);
+  min-width: 0;
+  line-height: 1.5;
+}
+
+.title {
+  max-width: 100%;
+  font-size: 12px;
+  color: var(--color-font-label);
+  .mixin-ellipsis-1;
+}
+.status {
+  padding-top: 3px;
+  height: 23px;
+  .mixin-ellipsis-1;
+  max-width: 100%;
+}
+
+.timeContent {
+  flex: none;
+  color: var(--color-300);
+  font-size: 13px;
+  padding-left: 10px;
+}
+
+.playBtnContent {
+  height: 100%;
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 15px;
+  gap: 18px;
+}
+
+.play-btn {
+  flex: none;
+  height: 52%;
+  // margin-top: -2px;
+  transition: @transition-fast;
+  transition-property: color, opacity;
+  color: var(--color-button-font);
+  opacity: 1;
+  cursor: pointer;
+
+  svg {
+    fill: currentColor;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+</style>
diff --git a/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue b/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
new file mode 100644
index 00000000..ce7e0f96
--- /dev/null
+++ b/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
@@ -0,0 +1,323 @@
+<template>
+  <div :class="$style.player">
+    <div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
+      <img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
+      <div v-else :class="$style.emptyPic">L<span>X</span></div>
+    </div>
+    <div :class="$style.infoContent">
+      <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
+        {{ title }}
+      </div>
+      <div :class="$style.status">{{ statusText }}</div>
+    </div>
+    <div :class="$style.timeContent">
+      <span>{{ nowPlayTimeStr }}</span>
+      <div :class="$style.progress">
+        <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+      </div>
+      <!-- <span style="margin: 0 1px;">/</span> -->
+      <span>{{ maxPlayTimeStr }}</span>
+    </div>
+    <!-- <play-progress /> -->
+    <control-btns />
+    <div :class="$style.playBtnContent">
+      <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-prevMusic" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
+        <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-pause" />
+        </svg>
+        <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-play" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-nextMusic" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from '@common/utils/vueTools'
+import { useRouter } from '@common/utils/vueRouter'
+import { clipboardWriteText } from '@common/utils/electron'
+import ControlBtns from './ControlBtns'
+// import PlayProgress from './PlayProgress'
+import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
+// import { lyric } from '@renderer/core/share/lyric'
+import {
+  statusText,
+  musicInfo,
+  isShowPlayerDetail,
+  isPlay,
+  playInfo,
+  playMusicInfo,
+} from '@renderer/store/player/state'
+import {
+  setMusicInfo,
+  setShowPlayerDetail,
+} from '@renderer/store/player/action'
+import { appSetting } from '@renderer/store/setting'
+import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+
+export default {
+  name: 'CorePlayBar',
+  components: {
+    ControlBtns,
+    // PlayProgress,
+  },
+  setup() {
+    const router = useRouter()
+
+    const {
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+    } = usePlayProgress()
+
+    const showPlayerDetail = () => {
+      if (!playMusicInfo.musicInfo) return
+      setShowPlayerDetail(true)
+    }
+    const handleCopy = (text) => {
+      clipboardWriteText(text)
+    }
+
+    const imgError = () => {
+      // console.log(e)
+      setMusicInfo({ pic: null })
+    }
+
+    const handleToMusicLocation = () => {
+      const listId = playMusicInfo.listId
+      if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
+      if (playInfo.playIndex == -1) return
+      router.push({
+        path: '/list',
+        query: {
+          id: listId,
+          scrollIndex: playInfo.playIndex,
+        },
+      })
+    }
+
+    const title = computed(() => {
+      return musicInfo.name
+        ? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
+        : ''
+    })
+
+    // onBeforeUnmount(() => {
+    // window.eventHub.emit(eventPlayerNames.setTogglePlay)
+    // })
+
+    return {
+      musicInfo,
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+      handleCopy,
+      imgError,
+      statusText,
+      title,
+      showPlayerDetail,
+      isPlay,
+      togglePlay,
+      playNext,
+      playPrev,
+      handleToMusicLocation,
+      isShowPlayerDetail,
+    }
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.player {
+  position: relative;
+  height: @height-player;
+  border-top: 1px solid var(--color-primary-alpha-900);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  contain: strict;
+  padding: 6px;
+  z-index: 2;
+  // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  * {
+    box-sizing: border-box;
+  }
+
+  &:before {
+    .mixin-after;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-main-background);
+    opacity: .9;
+    z-index: -1;
+  }
+}
+
+.picContent {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  // color: var(--color-primary);
+  // transition: @transition-normal;
+  // transition-property: color;
+  flex: none;
+  opacity: 1;
+  transition: opacity @transition-fast;
+  // transition-property: opacity;
+  display: flex;
+  justify-content: center;
+  // align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  // svg {
+  //   fill: currentColor;
+  // }
+  img {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    max-width: 100%;
+    max-height: 100%;
+    transition: @transition-normal;
+    transition-property: border-color;
+    // border-radius: 50%;
+    border-radius: @radius-border;
+    // border: 2px solid @color-theme_2-background_1;
+  }
+
+  .emptyPic {
+    background-color: var(--color-primary-light-900-alpha-200);
+    border-radius: @radius-border;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary-light-400-alpha-200);
+    user-select: none;
+    font-size: 20px;
+    font-family: Consolas, "Courier New", monospace;
+
+    span {
+      padding-left: 3px;
+    }
+  }
+}
+
+.infoContent {
+  padding: 0 10px;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  font-size: 13px;
+  color: var(--color-font);
+  min-width: 0;
+  line-height: 1.5;
+}
+
+.title {
+  max-width: 100%;
+  font-size: 12px;
+  color: var(--color-font-label);
+  .mixin-ellipsis-1;
+}
+.status {
+  padding-top: 3px;
+  height: 23px;
+  .mixin-ellipsis-1;
+  max-width: 100%;
+}
+
+.timeContent {
+  width: 30%;
+  // position: relative;
+  flex: none;
+  color: var(--color-300);
+  font-size: 13px;
+  // padding-left: 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+.progress {
+  // position: absolute;
+  // top: 0;
+  // left: 0;
+  // width: 100%;
+  flex: auto;
+  // width: 160px;
+  position: relative;
+  // padding-bottom: 6px;
+  margin: 0 8px;
+  padding: 8px 0;
+  // height: 15px;
+  // .progressBar {
+  //   height: 4px;
+  //   // border-radius: 0;
+  // }
+}
+.time {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+.playBtnContent {
+  height: 100%;
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 15px;
+  gap: 18px;
+}
+
+.play-btn {
+  flex: none;
+  height: 52%;
+  // margin-top: -2px;
+  transition: @transition-fast;
+  transition-property: color, opacity;
+  color: var(--color-button-font);
+  opacity: 1;
+  cursor: pointer;
+
+  svg {
+    fill: currentColor;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+</style>
diff --git a/src/renderer/components/layout/PlayBar/MiniWidthProgress.vue b/src/renderer/components/layout/PlayBar/MiniWidthProgress.vue
new file mode 100644
index 00000000..54c07cd0
--- /dev/null
+++ b/src/renderer/components/layout/PlayBar/MiniWidthProgress.vue
@@ -0,0 +1,338 @@
+<template>
+  <div :class="$style.player">
+    <div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
+      <img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
+      <div v-else :class="$style.emptyPic">L<span>X</span></div>
+    </div>
+    <div :class="$style.infoContent">
+      <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
+        {{ title }}
+      </div>
+      <div :class="$style.status">{{ statusText }}</div>
+    </div>
+    <!-- <div :class="$style.timeContainer">
+      <div :class="$style.timeContent">
+        <span>{{ nowPlayTimeStr }}</span>
+        <span style="margin: 0 1px;">/</span>
+        <span>{{ maxPlayTimeStr }}</span>
+        <div :class="$style.progress">
+          <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+        </div>
+      </div>
+    </div> -->
+    <play-progress />
+    <control-btns />
+    <div :class="$style.playBtnContent">
+      <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-prevMusic" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
+        <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-pause" />
+        </svg>
+        <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-play" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
+          <use xlink:href="#icon-nextMusic" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from '@common/utils/vueTools'
+import { useRouter } from '@common/utils/vueRouter'
+import { clipboardWriteText } from '@common/utils/electron'
+import ControlBtns from './ControlBtns'
+import PlayProgress from './PlayProgress'
+import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
+// import { lyric } from '@renderer/core/share/lyric'
+import {
+  statusText,
+  musicInfo,
+  isShowPlayerDetail,
+  isPlay,
+  playInfo,
+  playMusicInfo,
+} from '@renderer/store/player/state'
+import {
+  setMusicInfo,
+  setShowPlayerDetail,
+} from '@renderer/store/player/action'
+import { appSetting } from '@renderer/store/setting'
+import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+
+export default {
+  name: 'CorePlayBar',
+  components: {
+    ControlBtns,
+    PlayProgress,
+  },
+  setup() {
+    const router = useRouter()
+
+    const {
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+    } = usePlayProgress()
+
+    const showPlayerDetail = () => {
+      if (!playMusicInfo.musicInfo) return
+      setShowPlayerDetail(true)
+    }
+    const handleCopy = (text) => {
+      clipboardWriteText(text)
+    }
+
+    const imgError = () => {
+      // console.log(e)
+      setMusicInfo({ pic: null })
+    }
+
+    const handleToMusicLocation = () => {
+      const listId = playMusicInfo.listId
+      if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
+      if (playInfo.playIndex == -1) return
+      router.push({
+        path: '/list',
+        query: {
+          id: listId,
+          scrollIndex: playInfo.playIndex,
+        },
+      })
+    }
+
+    const title = computed(() => {
+      return musicInfo.name
+        ? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
+        : ''
+    })
+
+    // onBeforeUnmount(() => {
+    // window.eventHub.emit(eventPlayerNames.setTogglePlay)
+    // })
+
+    return {
+      musicInfo,
+      nowPlayTimeStr,
+      maxPlayTimeStr,
+      progress,
+      isActiveTransition,
+      handleTransitionEnd,
+      handleCopy,
+      imgError,
+      statusText,
+      title,
+      showPlayerDetail,
+      isPlay,
+      togglePlay,
+      playNext,
+      playPrev,
+      handleToMusicLocation,
+      isShowPlayerDetail,
+    }
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.player {
+  position: relative;
+  height: @height-player;
+  border-top: 1px solid var(--color-primary-alpha-900);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  contain: strict;
+  padding: 6px;
+  z-index: 2;
+  // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  * {
+    box-sizing: border-box;
+  }
+
+  &:before {
+    .mixin-after;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-main-background);
+    opacity: .9;
+    z-index: -1;
+  }
+}
+
+.picContent {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  // color: var(--color-primary);
+  // transition: @transition-normal;
+  // transition-property: color;
+  flex: none;
+  opacity: 1;
+  transition: opacity @transition-fast;
+  // transition-property: opacity;
+  display: flex;
+  justify-content: center;
+  // align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  // svg {
+  //   fill: currentColor;
+  // }
+  img {
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    max-width: 100%;
+    max-height: 100%;
+    transition: @transition-normal;
+    transition-property: border-color;
+    // border-radius: 50%;
+    border-radius: @radius-border;
+    // border: 2px solid @color-theme_2-background_1;
+  }
+
+  .emptyPic {
+    background-color: var(--color-primary-light-900-alpha-200);
+    border-radius: @radius-border;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary-light-400-alpha-200);
+    user-select: none;
+    font-size: 20px;
+    font-family: Consolas, "Courier New", monospace;
+
+    span {
+      padding-left: 3px;
+    }
+  }
+}
+
+.infoContent {
+  padding: 0 10px;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  font-size: 13px;
+  color: var(--color-font);
+  min-width: 0;
+  line-height: 1.5;
+}
+
+.title {
+  max-width: 100%;
+  font-size: 12px;
+  color: var(--color-font-label);
+  .mixin-ellipsis-1;
+}
+.status {
+  padding-top: 3px;
+  height: 23px;
+  .mixin-ellipsis-1;
+  max-width: 100%;
+}
+
+// .timeContainer {
+//   flex: none;
+//   padding: 15px 0;
+//   &:hover {
+//     .progress {
+//       opacity: 1;
+//     }
+//   }
+// }
+// .timeContent {
+//   // width: 30%;
+//   position: relative;
+//   // flex: none;
+//   color: var(--color-300);
+//   font-size: 13px;
+//   // padding-left: 10px;
+//   // display: flex;
+//   // flex-flow: column nowrap;
+//   // align-items: center;
+//   padding-bottom: 3px;
+// }
+// .progress {
+//   position: absolute;
+//   top: 100%;
+//   left: 0;
+//   width: 100%;
+//   flex: auto;
+//   // width: 160px;
+//   // position: relative;
+//   // padding-bottom: 6px;
+//   // margin: 0 8px;
+//   padding: 2px 0;
+//   height: 8px;
+//   transition: opacity @transition-normal;
+//   opacity: .24;
+
+//   .progressBar {
+//     height: 2px;
+//     border-radius: 0;
+//   }
+// }
+// .time {
+//   display: flex;
+//   flex-flow: row nowrap;
+//   justify-content: space-between;
+// }
+
+.playBtnContent {
+  height: 100%;
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 15px;
+  gap: 18px;
+}
+
+.play-btn {
+  flex: none;
+  height: 52%;
+  // margin-top: -2px;
+  transition: @transition-fast;
+  transition-property: color, opacity;
+  color: var(--color-button-font);
+  opacity: 1;
+  cursor: pointer;
+
+  svg {
+    fill: currentColor;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+</style>
diff --git a/src/renderer/components/layout/PlayBar/index.vue b/src/renderer/components/layout/PlayBar/index.vue
index 54c07cd0..51d23ef7 100644
--- a/src/renderer/components/layout/PlayBar/index.vue
+++ b/src/renderer/components/layout/PlayBar/index.vue
@@ -1,338 +1,13 @@
 <template>
-  <div :class="$style.player">
-    <div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
-      <img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
-      <div v-else :class="$style.emptyPic">L<span>X</span></div>
-    </div>
-    <div :class="$style.infoContent">
-      <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
-        {{ title }}
-      </div>
-      <div :class="$style.status">{{ statusText }}</div>
-    </div>
-    <!-- <div :class="$style.timeContainer">
-      <div :class="$style.timeContent">
-        <span>{{ nowPlayTimeStr }}</span>
-        <span style="margin: 0 1px;">/</span>
-        <span>{{ maxPlayTimeStr }}</span>
-        <div :class="$style.progress">
-          <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
-        </div>
-      </div>
-    </div> -->
-    <play-progress />
-    <control-btns />
-    <div :class="$style.playBtnContent">
-      <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
-          <use xlink:href="#icon-prevMusic" />
-        </svg>
-      </div>
-      <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
-        <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
-          <use xlink:href="#icon-pause" />
-        </svg>
-        <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
-          <use xlink:href="#icon-play" />
-        </svg>
-      </div>
-      <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 1024 1024" space="preserve">
-          <use xlink:href="#icon-nextMusic" />
-        </svg>
-      </div>
-    </div>
-  </div>
+  <FullWidthProgress v-if="appSetting['common.playBarProgressStyle'] == 'full'" />
+  <MiddleWidthProgress v-else-if="appSetting['common.playBarProgressStyle'] == 'middle'" />
+  <MiniWidthProgress v-else />
 </template>
 
-<script>
-import { computed } from '@common/utils/vueTools'
-import { useRouter } from '@common/utils/vueRouter'
-import { clipboardWriteText } from '@common/utils/electron'
-import ControlBtns from './ControlBtns'
-import PlayProgress from './PlayProgress'
-import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
-// import { lyric } from '@renderer/core/share/lyric'
-import {
-  statusText,
-  musicInfo,
-  isShowPlayerDetail,
-  isPlay,
-  playInfo,
-  playMusicInfo,
-} from '@renderer/store/player/state'
-import {
-  setMusicInfo,
-  setShowPlayerDetail,
-} from '@renderer/store/player/action'
+<script setup>
 import { appSetting } from '@renderer/store/setting'
-import { togglePlay, playNext, playPrev } from '@renderer/core/player'
+import MiniWidthProgress from './MiniWidthProgress.vue'
+import FullWidthProgress from './FullWidthProgress.vue'
+import MiddleWidthProgress from './MiddleWidthProgress.vue'
 
-export default {
-  name: 'CorePlayBar',
-  components: {
-    ControlBtns,
-    PlayProgress,
-  },
-  setup() {
-    const router = useRouter()
-
-    const {
-      nowPlayTimeStr,
-      maxPlayTimeStr,
-      progress,
-      isActiveTransition,
-      handleTransitionEnd,
-    } = usePlayProgress()
-
-    const showPlayerDetail = () => {
-      if (!playMusicInfo.musicInfo) return
-      setShowPlayerDetail(true)
-    }
-    const handleCopy = (text) => {
-      clipboardWriteText(text)
-    }
-
-    const imgError = () => {
-      // console.log(e)
-      setMusicInfo({ pic: null })
-    }
-
-    const handleToMusicLocation = () => {
-      const listId = playMusicInfo.listId
-      if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
-      if (playInfo.playIndex == -1) return
-      router.push({
-        path: '/list',
-        query: {
-          id: listId,
-          scrollIndex: playInfo.playIndex,
-        },
-      })
-    }
-
-    const title = computed(() => {
-      return musicInfo.name
-        ? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
-        : ''
-    })
-
-    // onBeforeUnmount(() => {
-    // window.eventHub.emit(eventPlayerNames.setTogglePlay)
-    // })
-
-    return {
-      musicInfo,
-      nowPlayTimeStr,
-      maxPlayTimeStr,
-      progress,
-      isActiveTransition,
-      handleTransitionEnd,
-      handleCopy,
-      imgError,
-      statusText,
-      title,
-      showPlayerDetail,
-      isPlay,
-      togglePlay,
-      playNext,
-      playPrev,
-      handleToMusicLocation,
-      isShowPlayerDetail,
-    }
-  },
-}
 </script>
-
-
-<style lang="less" module>
-@import '@renderer/assets/styles/layout.less';
-
-.player {
-  position: relative;
-  height: @height-player;
-  border-top: 1px solid var(--color-primary-alpha-900);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  contain: strict;
-  padding: 6px;
-  z-index: 2;
-  // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
-  * {
-    box-sizing: border-box;
-  }
-
-  &:before {
-    .mixin-after;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-main-background);
-    opacity: .9;
-    z-index: -1;
-  }
-}
-
-.picContent {
-  height: 100%;
-  aspect-ratio: 1 / 1;
-
-  // color: var(--color-primary);
-  // transition: @transition-normal;
-  // transition-property: color;
-  flex: none;
-  opacity: 1;
-  transition: opacity @transition-fast;
-  // transition-property: opacity;
-  display: flex;
-  justify-content: center;
-  // align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    opacity: .8;
-  }
-
-  // svg {
-  //   fill: currentColor;
-  // }
-  img {
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-    max-width: 100%;
-    max-height: 100%;
-    transition: @transition-normal;
-    transition-property: border-color;
-    // border-radius: 50%;
-    border-radius: @radius-border;
-    // border: 2px solid @color-theme_2-background_1;
-  }
-
-  .emptyPic {
-    background-color: var(--color-primary-light-900-alpha-200);
-    border-radius: @radius-border;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-primary-light-400-alpha-200);
-    user-select: none;
-    font-size: 20px;
-    font-family: Consolas, "Courier New", monospace;
-
-    span {
-      padding-left: 3px;
-    }
-  }
-}
-
-.infoContent {
-  padding: 0 10px;
-  flex: auto;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
-  font-size: 13px;
-  color: var(--color-font);
-  min-width: 0;
-  line-height: 1.5;
-}
-
-.title {
-  max-width: 100%;
-  font-size: 12px;
-  color: var(--color-font-label);
-  .mixin-ellipsis-1;
-}
-.status {
-  padding-top: 3px;
-  height: 23px;
-  .mixin-ellipsis-1;
-  max-width: 100%;
-}
-
-// .timeContainer {
-//   flex: none;
-//   padding: 15px 0;
-//   &:hover {
-//     .progress {
-//       opacity: 1;
-//     }
-//   }
-// }
-// .timeContent {
-//   // width: 30%;
-//   position: relative;
-//   // flex: none;
-//   color: var(--color-300);
-//   font-size: 13px;
-//   // padding-left: 10px;
-//   // display: flex;
-//   // flex-flow: column nowrap;
-//   // align-items: center;
-//   padding-bottom: 3px;
-// }
-// .progress {
-//   position: absolute;
-//   top: 100%;
-//   left: 0;
-//   width: 100%;
-//   flex: auto;
-//   // width: 160px;
-//   // position: relative;
-//   // padding-bottom: 6px;
-//   // margin: 0 8px;
-//   padding: 2px 0;
-//   height: 8px;
-//   transition: opacity @transition-normal;
-//   opacity: .24;
-
-//   .progressBar {
-//     height: 2px;
-//     border-radius: 0;
-//   }
-// }
-// .time {
-//   display: flex;
-//   flex-flow: row nowrap;
-//   justify-content: space-between;
-// }
-
-.playBtnContent {
-  height: 100%;
-  flex: none;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  padding-left: 10px;
-  padding-right: 15px;
-  gap: 18px;
-}
-
-.play-btn {
-  flex: none;
-  height: 52%;
-  // margin-top: -2px;
-  transition: @transition-fast;
-  transition-property: color, opacity;
-  color: var(--color-button-font);
-  opacity: 1;
-  cursor: pointer;
-
-  svg {
-    fill: currentColor;
-    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
-  }
-  &:hover {
-    opacity: 0.8;
-  }
-  &:active {
-    opacity: 0.6;
-  }
-}
-
-</style>
diff --git a/src/renderer/views/Setting/components/SettingBasic.vue b/src/renderer/views/Setting/components/SettingBasic.vue
index b293571f..622f5dcd 100644
--- a/src/renderer/views/Setting/components/SettingBasic.vue
+++ b/src/renderer/views/Setting/components/SettingBasic.vue
@@ -79,6 +79,15 @@ dd
   div
     base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
       name="setting_basic_control_btn_position" need :modelValue="appSetting['common.controlBtnPosition']" @update:modelValue="updateSetting({'common.controlBtnPosition': $event})" :value="item.id" :label="item.name")
+dd
+  h3#basic_playbar_progress_style {{$t('setting__basic_playbar_progress_style')}}
+  div
+    base-checkbox.gap-left(id="setting_basic_playbar_progress_style_mini" name="setting_basic_playbar_progress_style"
+      need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="mini" :label="$t('setting__basic_playbar_progress_style_mini')")
+    base-checkbox.gap-left(id="setting_basic_playbar_progress_style_middle" name="setting_basic_playbar_progress_style"
+      need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="middle" :label="$t('setting__basic_playbar_progress_style_middle')")
+    base-checkbox.gap-left(id="setting_basic_playbar_progress_style_full" name="setting_basic_playbar_progress_style"
+      need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="full" :label="$t('setting__basic_playbar_progress_style_full')")
 
 ThemeSelectorModal(v-model="isShowThemeSelectorModal")
 ThemeEditModal(v-model="isShowThemeEditModal" :theme-id="editThemeId" @submit="handleRefreshTheme")