这个是StudioView页面的内容 <template> <div class="stud...

下面这两个文件可以直接替换。现在 LiveCanvas 画面和 AudioDock 音频栏会贴在一起，AudioDock 也放大成更精致的深色大厂风。

:::writing{variant="standard" id="48291"}

vue
<!-- StudioView.vue -->
<template>
  <div class="studio-wrapper">
    <header class="top-header drag-region">
      <div class="header-left no-drag">
        <span class="app-title">直播伴侣：{{ store.anchorName || "咖值" }}</span>

        <div class="avatar-circle" title="主播个人中心">
          <svg viewBox="0 0 1024 1024" width="15" height="15">
            <path
              d="M512 512A256 256 0 1 0 256 256a256 256 0 0 0 256 256zm0 64c-170.667 0-512 85.333-512 256v42.667h1024V832c0-170.667-341.333-256-512-256z"
              fill="#8f959e"
            />
          </svg>
        </div>

        <RouterLink to="/studio" class="nav-link">主播中心</RouterLink>
      </div>

      <div class="header-right no-drag">
        <button class="win-btn" @click="minimize" title="最小化">-</button>
        <button class="win-btn" @click="maximize" title="最大化">□</button>
        <button class="win-btn close-btn" @click="closeWin" title="关闭">×</button>
      </div>
    </header>

    <main class="main-layout">
      <aside class="left-dock">
        <section class="panel-card scene-card">
          <SceneBoard @add="showAddSource = true" />
        </section>

        <section class="panel-card tool-grid-card">
          <ToolGrid />
        </section>

        <section class="panel-card music-card">
          <MusicPanel />
        </section>
      </aside>

      <section class="center-stage">
        <div class="stage-top">
          <div class="title-edit">
            <span class="label-text">直播标题：</span>
            <input
              v-model="store.title"
              class="clean-input"
              placeholder=""
            />
          </div>

          <div class="live-actions">
            <button
              :class="['start-text-btn', { 'is-streaming': store.status === 'living' }]"
              @click="store.toggleLive()"
            >
              {{ store.liveStatusText || "开始直播" }}
            </button>

            <div class="orientation-switch">
              <button
                :class="['switch-text', { active: store.orientation === 'landscape' }]"
                @click="store.orientation = 'landscape'"
              >
                横屏
              </button>
              <button
                :class="['switch-text', { active: store.orientation === 'portrait' }]"
                @click="store.orientation = 'portrait'"
              >
                竖屏
              </button>
            </div>
          </div>
        </div>

        <div class="canvas-area">
          <div class="preview-stack">
            <div class="camera-frame">
              <LiveCanvas class="studio-canvas" @add="showAddSource = true" />
            </div>

            <div class="audio-wrapper">
              <AudioDock />
            </div>
          </div>
        </div>
      </section>

      <aside class="right-dock">
        <div class="right-panel-wrapper">
          <RightDock />
        </div>
      </aside>
    </main>

    <AddSourceModal v-if="showAddSource" @close="showAddSource = false" />

    <CameraSettingsModal
      v-if="modal === 'camera'"
      @close="closeModal"
    />

    <BeautySettingsModal
      v-if="modal === 'beauty'"
      @close="closeModal"
    />

    <GenericToolModal
      v-if="['shop', 'admin', 'sixsix'].includes(modal)"
      :type="modal"
      @close="closeModal"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useLiveStore } from "@/stores/live";

import SceneBoard from "@/components/SceneBoard.vue";
import ToolGrid from "@/components/ToolGrid.vue";
import MusicPanel from "@/components/MusicPanel.vue";
import LiveCanvas from "@/components/LiveCanvas.vue";
import AudioDock from "@/components/AudioDock.vue";
import RightDock from "@/components/RightDock.vue";
import AddSourceModal from "@/components/AddSourceModal.vue";
import CameraSettingsModal from "@/components/CameraSettingsModal.vue";
import BeautySettingsModal from "@/components/BeautySettingsModal.vue";
import GenericToolModal from "@/components/GenericToolModal.vue";

const store = useLiveStore();
const route = useRoute();
const router = useRouter();

const showAddSource = ref(false);
const modal = computed(() => String(route.params.modal ?? ""));

function closeModal() {
  router.push("/studio");
}

function minimize() {
  window.electronAPI?.minimize?.();
}

function maximize() {
  window.electronAPI?.maximize?.();
}

function closeWin() {
  window.electronAPI?.close?.();
}
</script>

<style scoped>
.studio-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #111111;
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  user-select: none;
}

.top-header {
  height: 42px;
  flex-shrink: 0;
  padding: 0 10px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.drag-region {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-title {
  font-size: 12px;
  font-weight: 700;
  color: #111111;
}

.avatar-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f2f4;
  border: 1px solid #dcdfe5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-link {
  font-size: 12px;
  color: #333333;
  text-decoration: none;
}

.nav-link:hover {
  color: #000000;
}

.header-right {
  height: 100%;
  display: flex;
  align-items: center;
}

.win-btn {
  width: 38px;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #111111;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

.win-btn:hover {
  background: #eeeeee;
}

.close-btn:hover {
  background: #ff3b30;
  color: #ffffff;
}

.main-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(520px, 1fr) 300px;
  gap: 16px;
  padding: 0 18px 18px;
  overflow: hidden;
}

.left-dock {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.panel-card {
  background: #dedede;
  border-radius: 3px;
  padding: 14px;
  overflow: hidden;
}

.scene-card {
  height: 120px;
  flex-shrink: 0;
}

.tool-grid-card {
  height: 205px;
  flex-shrink: 0;
}

.music-card {
  flex: 1;
  min-height: 190px;
}

.center-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.stage-top {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-edit {
  display: flex;
  align-items: center;
  min-width: 0;
}

.label-text {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  white-space: nowrap;
}

.clean-input {
  width: 280px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  padding: 0;
}

.clean-input::placeholder {
  color: #bbbbbb;
}

.live-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 6px;
}

.start-text-btn {
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
}

.start-text-btn:hover {
  color: #ff3b30;
}

.start-text-btn.is-streaming {
  color: #ff3b30;
}

.orientation-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch-text {
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: #8f8f8f;
  cursor: pointer;
}

.switch-text.active {
  color: #ff3b30;
}

.canvas-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 34px;
  overflow: hidden;
}

.preview-stack {
  width: min(78%, 680px);
  min-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 22px 45px rgba(0, 0, 0, 0.16));
}

.camera-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  border: 1px solid #7f7f7f;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-canvas {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

.audio-wrapper {
  width: 100%;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.right-dock {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.right-panel-wrapper {
  flex: 1;
  min-height: 0;
  background: linear-gradient(160deg, #473033 0%, #292929 62%, #252525 100%);
  border-radius: 3px;
  overflow: hidden;
}

:deep(.panel-card h1),
:deep(.panel-card h2),
:deep(.panel-card h3) {
  color: #111111;
}

:deep(button) {
  font-family: inherit;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background: #bcbcbc;
  border-radius: 10px;
}

@media (max-width: 1180px) {
  .main-layout {
    grid-template-columns: 230px minmax(460px, 1fr) 280px;
    gap: 12px;
    padding: 0 14px 14px;
  }

  .preview-stack {
    width: min(82%, 620px);
    min-width: 460px;
  }
}
</style>

:::

:::writing{variant="standard" id="73604"}

vue
<!-- AudioDock.vue -->
<template>
  <div class="audio-dock-container">
    <div class="audio-control-group">
      <div class="icon-box">
        <svg
          class="audio-icon"
          viewBox="0 0 24 24"
          width="18"
          height="18"
          fill="currentColor"
        >
          <path
            d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"
          />
        </svg>
      </div>

      <div class="slider-block">
        <div class="control-top">
          <span class="control-name">麦克风</span>
          <span class="volume-text">{{ store.micVolume }}%</span>
        </div>

        <input
          v-model.number="store.micVolume"
          type="range"
          min="0"
          max="100"
          class="custom-slider"
          :style="sliderStyle(store.micVolume)"
        />
      </div>
    </div>

    <div class="divider"></div>

    <div class="audio-control-group">
      <div class="icon-box">
        <svg
          class="audio-icon"
          viewBox="0 0 24 24"
          width="18"
          height="18"
          fill="currentColor"
        >
          <path
            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
          />
        </svg>
      </div>

      <div class="slider-block">
        <div class="control-top">
          <span class="control-name">系统声音</span>
          <span class="volume-text">{{ store.speakerVolume }}%</span>
        </div>

        <input
          v-model.number="store.speakerVolume"
          type="range"
          min="0"
          max="100"
          class="custom-slider"
          :style="sliderStyle(store.speakerVolume)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLiveStore } from "@/stores/live";

const store = useLiveStore();

function sliderStyle(value: number) {
  return {
    background: `linear-gradient(to right, #ff3158 0%, #ff3158 ${value}%, rgba(255,255,255,0.18) ${value}%, rgba(255,255,255,0.18) 100%)`,
  };
}
</script>

<style scoped>
.audio-dock-container {
  width: 100%;
  height: 64px;
  padding: 0 24px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 49, 88, 0.22), transparent 34%),
    linear-gradient(180deg, #17171c 0%, #0b0b0f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 14px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.22);
}

.audio-control-group {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-box {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.audio-icon {
  opacity: 0.95;
}

.slider-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.control-name {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.volume-text {
  min-width: 38px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  text-align: right;
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.custom-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow:
    0 0 0 4px rgba(255, 49, 88, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 5px rgba(255, 49, 88, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.38);
}

.custom-slider::-webkit-slider-thumb:active {
  transform: scale(1.14);
}

.custom-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.custom-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #ff3158;
}

.custom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow:
    0 0 0 4px rgba(255, 49, 88, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.34);
}

.divider {
  width: 1px;
  height: 34px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
}

@media (max-width: 1180px) {
  .audio-dock-container {
    padding: 0 18px;
    gap: 18px;
  }

  .audio-control-group {
    gap: 10px;
  }

  .icon-box {
    width: 32px;
    height: 32px;
  }
}
</style>

:::

主要改动是：AudioDock 从底部独立区域移到了 preview-stack 里，紧贴 camera-frame 下方；音频栏宽度改成 100%，跟直播画面同宽。