feat: 更新App.vue和BiliAuthView.vue组件，优化主题颜色和认证流程界面

- 在App.vue中调整主题颜色设置，提升可读性和对比度
- 在BiliAuthView.vue中重构认证流程界面，增强用户体验，添加响应式设计
- 更新IndexView.vue和ManageLayout.vue中的按钮和提示信息，提升界面一致性
- 在PointUserLayout.vue中优化认证提示信息，明确用户操作步骤

src/App.vue

@@ -63,45 +63,48 @@ watchEffect(() => {
 const themeOverrides = computed(() => {
   return {
     common: {
-      // 主色调 (中蓝色基调，调整对比度)
-      primaryColor: '#5A7A9E',
-      primaryColorHover: '#7390B1',      // 略微提亮悬浮色
-      primaryColorPressed: '#4F7094',     // 调整按下色，避免在暗色模式下过暗
-      primaryColorSuppl: '#8CA6C1',     // 调整补充色，使其与背景有区分
+      // 主色调 (中蓝色基调，提升可读性并增强对比)
+      primaryColor: '#4D6E9C',
+      primaryColorHover: '#6483A9',      // 略微提亮悬浮色
+      primaryColorPressed: '#365A7D',     // 调整按下色，避免在暗色模式下过暗
+      primaryColorSuppl: '#809BC1',     // 调整补充色，使其与背景有区分
 
-      // 信息色 (浅蓝色基调，调整对比度)
-      infoColor: '#8CB1C7',              // 稍微加深基础信息色
-      infoColorHover: '#A6C3D6',        // 提亮悬浮色
-      infoColorPressed: '#7DA0B5',       // 调整按下色
-      infoColorSuppl: '#D0DDE8',        // 调整补充色
+      // 信息色 (浅蓝色基调，提升对比度)
+      infoColorHover: '#79AFDE',        // 提亮悬浮色
+      infoColorPressed: '#4B8AC3',       // 调整按下色
 
-      // 成功色 (柔和青绿)
-      successColor: '#4DB6AC',
-      successColorHover: '#6BC4B9',      // 调整悬浮色
-      successColorPressed: '#3E9A90',     // 调整按下色
-      successColorSuppl: '#C1E7E2',      // 调整补充色
+      // 成功色 (柔和青绿, 增强对比)
+      successColor: '#3AA89C',
+      successColorHover: '#5AB9AE',      // 调整悬浮色
+      successColorPressed: '#2C8C82',     // 调整按下色
+      successColorSuppl: '#B4E4DF',      // 调整补充色
 
-      // 警告色 (柔和橙色)
-      warningColor: '#FFB74D',
-      warningColorHover: '#FFC870',      // 调整悬浮色
-      warningColorPressed: '#F8A830',     // 调整按下色
-      warningColorSuppl: '#FFE9C7',      // 调整补充色
-
-      // 错误色 (柔和红色)
-      errorColor: '#E57373',
-      errorColorHover: '#EC8F8F',       // 调整悬浮色
-      errorColorPressed: '#D96060',      // 调整按下色
-      errorColorSuppl: '#F5C7C7',       // 调整补充色
+      // 警告色 (柔和橙色, 微调对比)
+      warningColor: '#FFA64D',
+      warningColorHover: '#FFBA70',      // 调整悬浮色
+      warningColorPressed: '#E89530',     // 调整按下色
+      warningColorSuppl: '#FFE2C2',      // 调整补充色
 
+      // 错误色 (柔和红色, 微调对比)
+      errorColor: '#E16565',
+      errorColorHover: '#EA8282',       // 调整悬浮色
+      errorColorPressed: '#D44848',      // 调整按下色
+      errorColorSuppl: '#F3C0C0',       // 调整补充色
 
       // 保持字体设置
       fontFamily:
         'Inter ,"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
+
+      // 文本颜色 (提升可读性, 但不过度突兀)
+      textColorBase: isDarkMode.value ? '#ECECEC' : '#333333',
+      textColor1: isDarkMode.value ? '#E6E6E6' : '#333333',
+      textColor2: isDarkMode.value ? '#CCCCCC' : '#4F4F4F',
+      textColor3: isDarkMode.value ? '#AAAAAA' : '#656565',
     },
     Tooltip: {
       color: isDarkMode.value ? '#48484e' : '#FFFFFF',
-      textColor: isDarkMode.value ? '#FFFFFF' : '#333639',
-    }
+      textColor: isDarkMode.value ? '#FFFFFF' : '#333333',
+    },
   };
 })
 const body = document.body;

src/views/BiliAuthView.vue

@@ -31,7 +31,7 @@ type AuthStartModel = {
 
 const message = useMessage()
 const breakpoints = useVueUseBreakpoints(breakpointsTailwind)
-const isSmallScreen = breakpoints.smaller('sm')
+const isSmallScreen = breakpoints.smaller('md')
 
 const guidKey = useStorage('Bili.Auth.Key', uuidv4())
 const currentToken = useStorage<string>('Bili.Auth.Selected', null)
@@ -122,95 +122,111 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NFlex
-    justify="center"
-    align="center"
-    style="min-height: 100vh; padding: 20px; box-sizing: border-box"
-  >
+  <div class="auth-container">
     <NCard
       embedded
-      style="width: 100%; max-width: 1000px"
+      class="auth-card"
     >
       <template #header>
-        <NText style="font-size: 1.2em; font-weight: bold">
+        <div class="auth-header">
+          <NText class="auth-title">
             Bilibili 身份验证
           </NText>
+        </div>
       </template>
-      <NFlex
-        :wrap="false"
-        :vertical="isSmallScreen"
-      >
+
+      <div class="auth-content">
+        <!-- 步骤指示器 -->
+        <div class="steps-container">
           <NSteps
             :current="currentStep + 1"
             vertical
-          style="min-width: 200px; max-width: 300px; margin-bottom: 20px"
+            :size="isSmallScreen ? 'small' : 'medium'"
+            class="auth-steps"
           >
             <NStep
               title="准备认证"
-            description="就是开始认证前的一个步骤"
+              description="开始认证前的准备工作"
             />
             <NStep
               title="进行认证"
-            description="你需要在指定直播间输入一串验证码来证明自己的身份"
+              description="在指定直播间输入验证码"
             />
             <NStep
               title="认证完成"
-            description="现在就已经通过了认证!"
+              description="验证成功，获取登录链接"
             />
           </NSteps>
-        <div style="flex-grow: 1; padding-left: 20px; border-left: 1px solid var(--n-border-color); min-width: 0;">
-          <template v-if="currentStep == 1">
-            <NFlex
-              vertical
-              justify="center"
-              align="center"
-              style="width: 100%; height: 100%; padding-top: 20px; min-height: 250px;"
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="content-container">
+          <!-- 步骤1: 进行认证 -->
+          <div
+            v-if="currentStep === 1"
+            class="step-content"
           >
             <template v-if="!timeOut">
+              <div class="auth-progress">
                 <NSpin size="large" />
-                <NText style="margin-top: 15px; font-size: 1.1em;">
+                <NText class="countdown-text">
                   剩余时间：<NCountdown :duration="timeLeft" />
                 </NText>
+              </div>
+
+              <div class="verification-section">
                 <NText
-                  depth="3"
-                  style="margin-top: 20px;"
+                  depth="2"
+                  class="instruction-text"
                 >
                   请复制下方的认证码，并前往指定直播间发送：
                 </NText>
-                <NInputGroup style="margin-top: 10px; max-width: 300px;">
+
+                <div class="code-input-section">
+                  <NInputGroup class="code-input-group">
                     <NInput
                       :value="startModel?.code"
                       readonly
                       placeholder="认证码"
-                    style="text-align: center; font-size: 1.2em; letter-spacing: 2px;"
+                      class="code-input"
                     />
                     <NButton
                       type="primary"
+                      class="copy-button"
                       @click="copyCode"
                     >
                       复制
                     </NButton>
                   </NInputGroup>
+                </div>
+
                 <NButton
                   type="info"
                   tag="a"
                   :href="'https://live.bilibili.com/' + startModel?.targetRoomId"
                   target="_blank"
-                  style="margin-top: 20px"
+                  class="live-room-button"
+                  size="large"
                 >
                   前往直播间
                 </NButton>
+              </div>
             </template>
+
             <NAlert
               v-else
               type="error"
               title="认证超时"
-                style="width: 100%; max-width: 400px;"
+              class="timeout-alert"
             >
-                <NFlex justify="center">
+              <div class="timeout-content">
+                <NText depth="3">
+                  认证时间已过，请重新开始认证流程
+                </NText>
                 <NButton
                   type="error"
-                    style="margin-top: 10px"
+                  size="large"
+                  class="restart-button"
                   @click="
                     () => {
                       currentStep = 0
@@ -220,91 +236,107 @@ onMounted(async () => {
                 >
                   重新开始认证
                 </NButton>
-                </NFlex>
+              </div>
             </NAlert>
-            </NFlex>
-          </template>
-          <template v-else-if="currentStep == 0">
-            <NSpace
-              vertical
-              align="stretch"
-              style="width: 100%; padding-top: 10px"
+          </div>
+
+          <!-- 步骤0: 准备认证 -->
+          <div
+            v-else-if="currentStep === 0"
+            class="step-content"
           >
-              <NAlert type="info">
+            <div class="start-section">
+              <NAlert
+                type="info"
+                class="info-alert"
+              >
+                <div class="info-content">
                   <NText>
-                  点击
-                  <NText
+                    点击 <NText
                       type="primary"
                       strong
                     >
                       开始认证
-                  </NText>
-                  后请在 5 分钟之内使用
+                    </NText> 后请在 5 分钟之内使用
                     <NText
                       strong
                       type="primary"
                     >
-                    需要认证的账户
+                      需要认证的B站账户
                     </NText>
-                  在指定的直播间直播间内发送给出的验证码
+                    在指定的直播间内发送给出的验证码
                   </NText>
+                </div>
               </NAlert>
-              <NFlex
-                justify="center"
-                style="margin-top: 20px"
-              >
+
+              <div class="start-button-section">
                 <NButton
                   size="large"
                   type="primary"
+                  class="start-button"
                   @click="onStartVerify"
                 >
                   开始认证
                 </NButton>
-              </NFlex>
-            </NSpace>
-          </template>
-          <template v-else-if="currentStep == 2">
-            <NSpace
-              vertical
-              align="stretch"
-              style="width: 100%; padding-top: 10px"
+              </div>
+            </div>
+          </div>
+
+          <!-- 步骤2: 认证完成 -->
+          <div
+            v-else-if="currentStep === 2"
+            class="step-content"
           >
+            <div class="success-section">
               <NAlert
                 type="success"
                 title="验证成功！"
-                style="margin-bottom: 15px"
+                class="success-alert"
               >
-                你已完成验证! 请妥善保存你的登陆链接, 请勿让其他人获取. 丢失后可以再次通过认证流程获得.
-                <br>
-                要在其他地方登陆, 或者需要重新登陆的话把这个链接复制到浏览器地址栏打开即可
+                <div class="success-content">
+                  <NText>
+                    您已完成验证！请妥善保存您的登录链接，请勿让其他人获取。
+                    丢失后可以再次通过认证流程获得。
+                  </NText>
+                  <br><br>
+                  <NText depth="2">
+                    要在其他地方登录，或者需要重新登录时，
+                    请将此链接复制到浏览器地址栏打开即可。
+                  </NText>
+                </div>
               </NAlert>
-              <NText strong>
-                你的登陆链接为:
+
+              <div class="login-link-section">
+                <NText
+                  strong
+                  class="link-label"
+                >
+                  您的登录链接：
                 </NText>
                 <NInput
                   :value="`${CURRENT_HOST}bili-user?auth=${currentToken}`"
                   type="textarea"
                   readonly
-                style="margin-top: 5px"
+                  class="login-link-input"
+                  :autosize="{ minRows: 2, maxRows: 4 }"
                 />
-              <NFlex
-                justify="end"
-                style="margin-top: 10px"
-              >
+                <div class="link-actions">
                   <NButton
                     type="primary"
+                    size="large"
+                    class="copy-link-button"
                     @click="copyCode"
                   >
-                  复制登陆链接
+                    复制登录链接
                   </NButton>
-              </NFlex>
-              <NFlex
-                justify="center"
-                style="margin-top: 20px"
-                :wrap="true"
-              >
+                </div>
+              </div>
+
+              <div class="action-buttons">
                 <NButton
                   type="primary"
+                  size="large"
+                  class="dashboard-button"
                   @click="$router.push({ name: 'bili-user' })"
                 >
                   前往个人中心
@@ -322,17 +354,285 @@ onMounted(async () => {
                   "
                 >
                   <template #trigger>
-                    <NButton type="warning">
+                    <NButton
+                      type="warning"
+                      size="large"
+                      class="auth-other-button"
+                    >
                       认证其他账号
                     </NButton>
                   </template>
-                  这将会登出当前已认证的账号, 请先在认证其他账号前保存你的登陆链接
+                  这将会登出当前已认证的账号，请先保存您的登录链接再认证其他账号
                 </NPopconfirm>
-              </NFlex>
-            </NSpace>
-          </template>
               </div>
-      </NFlex>
+            </div>
+          </div>
+        </div>
+      </div>
     </NCard>
-  </NFlex>
+  </div>
 </template>
+
+<style scoped>
+.auth-container {
+  min-height: 100vh;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, var(--n-color-target) 0%, var(--n-modal-color) 100%);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 1000px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+}
+
+.auth-header {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.auth-title {
+  font-size: 1.5em;
+  font-weight: 600;
+  color: var(--n-text-color);
+}
+
+.auth-content {
+  display: flex;
+  gap: 30px;
+  min-height: 400px;
+  border-top: 1px solid var(--n-border-color);
+}
+
+.steps-container {
+  flex-shrink: 0;
+  min-width: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.auth-steps {
+  padding: 20px 0;
+}
+
+.content-container {
+  flex: 1;
+  padding-left: 30px;
+  border-left: 1px solid var(--n-border-color);
+  display: flex;
+  margin-top: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-content {
+  width: 100%;
+  max-width: 500px;
+}
+
+/* 进行认证步骤样式 */
+.auth-progress {
+  text-align: center;
+  margin-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.countdown-text {
+  margin-top: 20px;
+  font-size: 1.1em;
+  font-weight: 500;
+}
+
+.verification-section {
+  text-align: center;
+}
+
+.instruction-text {
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.code-input-section {
+  margin: 25px 0;
+}
+
+.code-input-group {
+  max-width: 320px;
+  margin: 0 auto;
+}
+
+.code-input {
+  text-align: center;
+  font-size: 1.3em;
+  letter-spacing: 3px;
+  font-weight: 600;
+}
+
+.copy-button {
+  font-weight: 500;
+}
+
+.live-room-button {
+  margin-top: 25px;
+  font-weight: 500;
+  padding: 0 30px;
+}
+
+.timeout-alert {
+  text-align: center;
+}
+
+.timeout-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.restart-button {
+  font-weight: 500;
+  padding: 0 30px;
+}
+
+/* 准备认证步骤样式 */
+.start-section {
+  text-align: center;
+}
+
+.info-alert {
+  margin-bottom: 30px;
+}
+
+.info-content {
+  line-height: 1.7;
+}
+
+.start-button-section {
+  margin-top: 30px;
+}
+
+.start-button {
+  font-weight: 500;
+  padding: 0 40px;
+  height: 50px;
+  font-size: 1.1em;
+}
+
+/* 认证完成步骤样式 */
+.success-section {
+  text-align: center;
+}
+
+.success-alert {
+  margin-bottom: 30px;
+  text-align: left;
+}
+
+.success-content {
+  line-height: 1.7;
+}
+
+.login-link-section {
+  margin-bottom: 30px;
+  text-align: left;
+}
+
+.link-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1.05em;
+}
+
+.login-link-input {
+  margin-bottom: 15px;
+  font-family: monospace;
+}
+
+.link-actions {
+  text-align: right;
+}
+
+.copy-link-button {
+  font-weight: 500;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.dashboard-button,
+.auth-other-button {
+  font-weight: 500;
+  padding: 0 25px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .auth-container {
+    padding: 15px;
+  }
+
+  .auth-content {
+    flex-direction: column;
+    gap: 20px;
+    min-height: auto;
+  }
+
+  .steps-container {
+    min-width: auto;
+  }
+
+  .content-container {
+    padding-left: 0;
+    border-left: none;
+    border-top: 1px solid var(--n-border-color);
+    padding-top: 20px;
+  }
+
+  .auth-title {
+    font-size: 1.3em;
+  }
+
+  .code-input {
+    font-size: 1.1em;
+    letter-spacing: 2px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dashboard-button,
+  .auth-other-button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .auth-container {
+    padding: 10px;
+  }
+
+  .start-button {
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .live-room-button {
+    width: 100%;
+    max-width: 200px;
+  }
+}
+</style>

src/views/IndexView.vue

@@ -153,47 +153,95 @@ onMounted(async () => {
               一个给主播提供便利功能的网站 😊
             </NText>
             <span />
+            <!-- 主播 / 观众入口 -->
             <NSpace
               justify="center"
               align="center"
             >
-              <NSpace align="center">
-                <NSpace
+              <NFlex
+                :wrap="false"
+                justify="center"
+                align="center"
+                style="gap: 24px; margin-top: 10px;"
+              >
+                <!-- 主播入口 -->
+                <NTooltip placement="bottom">
+                  <template #trigger>
+                    <NCard
+                      hoverable
+                      style="width: 240px; background: rgba(255, 255, 255, 0.15); cursor: pointer; border: none;"
+                      @click="$router.push({ name: 'manage-index' })"
+                    >
+                      <NFlex
                         vertical
-                  justify="end"
-                >
-                  <NText
-                    style="font-size: medium"
-                    italic
+                        align="center"
+                        justify="center"
+                        :size="8"
                       >
+                        <NIcon
+                          :component="PersonFeedback24Filled"
+                          size="36"
+                          color="white"
+                        />
+                        <NText style="font-size: 1.2rem; font-weight: 500; color: white;">
                           我是主播
                         </NText>
                         <NButton
                           type="primary"
+                          secondary
                           size="small"
-                    @click="$router.push({ name: 'manage-index' })"
                         >
                           开始使用
                         </NButton>
-                </NSpace>
-                <NSpace vertical>
-                  <NText
-                    style="font-size: medium"
-                    italic
+                      </NFlex>
+                    </NCard>
+                  </template>
+                  进入主播后台，管理直播相关工具与设置
+                </NTooltip>
+
+                <!-- 观众入口 -->
+                <NTooltip placement="bottom">
+                  <template #trigger>
+                    <NCard
+                      hoverable
+                      style="width: 240px; background: rgba(255, 255, 255, 0.15); cursor: pointer; border: none;"
+                      @click="$router.push({ name: 'bili-user' })"
                     >
+                      <NFlex
+                        vertical
+                        align="center"
+                        justify="center"
+                        :size="8"
+                      >
+                        <NIcon
+                          :component="Chat24Filled"
+                          size="36"
+                          color="white"
+                        />
+                        <NText style="font-size: 1.2rem; font-weight: 500; color: white;">
                           我是观众
                         </NText>
                         <NButton
-                    type="primary"
-                    size="small"
+                          type="info"
                           secondary
-                    bordered
-                    @click="$router.push({ name: 'bili-user' })"
+                          size="small"
                         >
                           用户主页
                         </NButton>
+                      </NFlex>
+                    </NCard>
+                  </template>
+                  进入个人主页，查看积分与互动记录
+                </NTooltip>
+              </NFlex>
             </NSpace>
-              </NSpace>
+
+            <!-- 其他操作按钮 -->
+            <NSpace
+              justify="center"
+              align="center"
+              style="margin-top: 20px;"
+            >
               <NButton
                 size="large"
                 @click="$router.push('/@Megghy')"
@@ -491,7 +539,9 @@ onMounted(async () => {
 
 <style lang="stylus" scoped>
 .index-background
-    display: abslute;
+    position: relative;
+    /* 保证全屏高度，避免底部留白 */
+    min-height: 100vh;
     background: #8360c3;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

src/views/ManageLayout.vue

@@ -604,7 +604,12 @@ onMounted(() => {
                         depth="3"
                         style="text-align: center; margin-top: 8px;"
                       >
-                        我们已向您的邮箱发送了验证链接，请查收并点击链接完成验证
+                        我们已向您的邮箱 <NText
+                          type="primary"
+                          strong
+                        >
+                          {{ accountInfo?.bindEmail }}
+                        </NText> 发送了验证链接，请查收并点击链接完成验证
                       </NText>
                     </NFlex>
 

src/views/pointViews/PointUserLayout.vue

@@ -279,7 +279,7 @@ onMounted(async () => {
       <NResult
         status="error"
         title="你还未进行过B站账户验证"
-        description="请先进行认证"
+        description="请先进行认证. 如果你已经认证过, 请直接访问认证完成时给出的链接"
         style="padding-top: 64px"
       >
         <template #footer>