From 2e57f86bc54337d36f6d56dfbdd80553f14b17db Mon Sep 17 00:00:00 2001
From: Fridemn <702625325@qq.com>
Date: Tue, 7 Jul 2026 16:10:26 +0800
Subject: [PATCH] refactor: enhance settings section with resources and update
 sidebar styles

---
 .../i18n/locales/en-US/features/settings.json |  17 ++
 .../i18n/locales/ru-RU/features/settings.json |  17 ++
 .../i18n/locales/zh-CN/features/settings.json |  17 ++
 .../full/vertical-sidebar/VerticalSidebar.vue | 243 +-----------------
 dashboard/src/views/Settings.vue              |  98 ++++++-
 5 files changed, 147 insertions(+), 245 deletions(-)

diff --git a/dashboard/src/i18n/locales/en-US/features/settings.json b/dashboard/src/i18n/locales/en-US/features/settings.json
index e7427f1ed..82ab8463b 100644
--- a/dashboard/src/i18n/locales/en-US/features/settings.json
+++ b/dashboard/src/i18n/locales/en-US/features/settings.json
@@ -20,6 +20,23 @@
     },
     "openapi": {
       "title": "OpenAPI"
+    },
+    "resources": {
+      "title": "About"
+    }
+  },
+  "resources": {
+    "changelog": {
+      "subtitle": "Review changes in the current and previous versions."
+    },
+    "documentation": {
+      "subtitle": "Open the official AstrBot documentation."
+    },
+    "faq": {
+      "subtitle": "Read common questions and troubleshooting notes."
+    },
+    "github": {
+      "subtitle": "Visit the AstrBot GitHub repository."
     }
   },
   "systemConfig": {
diff --git a/dashboard/src/i18n/locales/ru-RU/features/settings.json b/dashboard/src/i18n/locales/ru-RU/features/settings.json
index 58cdda79c..468cfff00 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/settings.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/settings.json
@@ -20,6 +20,23 @@
         },
         "openapi": {
             "title": "OpenAPI"
+        },
+        "resources": {
+            "title": "О программе"
+        }
+    },
+    "resources": {
+        "changelog": {
+            "subtitle": "Просмотреть изменения текущей и предыдущих версий."
+        },
+        "documentation": {
+            "subtitle": "Открыть официальную документацию AstrBot."
+        },
+        "faq": {
+            "subtitle": "Посмотреть частые вопросы и советы по устранению проблем."
+        },
+        "github": {
+            "subtitle": "Открыть репозиторий AstrBot на GitHub."
         }
     },
     "systemConfig": {
diff --git a/dashboard/src/i18n/locales/zh-CN/features/settings.json b/dashboard/src/i18n/locales/zh-CN/features/settings.json
index 9784aa978..14120fdb8 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/settings.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/settings.json
@@ -20,6 +20,23 @@
     },
     "openapi": {
       "title": "OpenAPI"
+    },
+    "resources": {
+      "title": "关于"
+    }
+  },
+  "resources": {
+    "changelog": {
+      "subtitle": "查看当前版本和历史版本的更新内容。"
+    },
+    "documentation": {
+      "subtitle": "打开 AstrBot 官方文档。"
+    },
+    "faq": {
+      "subtitle": "查看常见问题与排障说明。"
+    },
+    "github": {
+      "subtitle": "访问 AstrBot GitHub 仓库。"
     }
   },
   "systemConfig": {
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index 1808e2e14..5866c96a8 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -1,18 +1,15 @@
 <script setup>
 import { ref, shallowRef, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useTheme } from 'vuetify';
 import { useCustomizerStore } from '../../../stores/customizer';
 import { useI18n } from '@/i18n/composables';
 import sidebarItems, { MORE_GROUP_KEY } from './sidebarItem';
 import NavItem from './NavItem.vue';
 import { applySidebarCustomization } from '@/utils/sidebarCustomization';
-import ChangelogDialog from '@/components/shared/ChangelogDialog.vue';
 import { usePluginSidebarItems } from '@/composables/usePluginSidebarItems';
 
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const customizer = useCustomizerStore();
-const theme = useTheme();
 const { pluginItems } = usePluginSidebarItems();
 
 function buildSidebarMenu() {
@@ -105,23 +102,11 @@ onUnmounted(() => {
   window.removeEventListener('sidebar-customization-changed', handleCustomEvent);
 });
 
-const showIframe = ref(false);
-const starCount = ref(null);
-
-// 更新日志对话框
-const changelogDialog = ref(false);
-
 const sidebarWidth = ref(235);
 const minSidebarWidth = 200;
 const maxSidebarWidth = 300;
 const isResizing = ref(false);
 
-const isDark = computed(() => customizer.uiTheme === 'PurpleThemeDark');
-const themeColors = computed(() => theme.current.value.colors);
-const iframeBackground = computed(() => isDark.value ? themeColors.value.surface || 'white' : 'white');
-const dragHeaderBackground = computed(() => isDark.value ? themeColors.value.mcpCardBg || themeColors.value.surface || 'white' : '#f0f0f0');
-const frameBorder = computed(() => `1px solid ${isDark.value ? (themeColors.value.borderLight || '#ccc') : '#ccc'}`);
-
 const isMobile = window.innerWidth < 768;
 const isRailSidebar = !isMobile;
 if (isMobile) {
@@ -130,137 +115,10 @@ if (isMobile) {
   customizer.SET_MINI_SIDEBAR(true);
 }
 
-const dragPos = ref({ left: '', top: '' });
-
-const iframeStyle = computed(() => {
-  const base = isMobile
-    ? { position: 'fixed', top: '10%', left: '0%', width: '100%', height: '80%', zIndex: '1002' }
-    : { position: 'fixed', bottom: '16px', right: '16px', width: '490px', height: '640px', zIndex: '10000000' };
-  const pos = dragPos.value.left ? { left: dragPos.value.left, top: dragPos.value.top, bottom: 'auto', right: 'auto' } : {};
-  return {
-    ...base,
-    ...pos,
-    minWidth: '300px',
-    minHeight: '200px',
-    background: iframeBackground.value,
-    resize: 'both',
-    overflow: 'auto',
-    borderRadius: '12px',
-    boxShadow: isDark.value ? '0px 4px 16px rgba(0, 0, 0, 0.5)' : '0px 4px 12px rgba(0, 0, 0, 0.1)',
-  };
-});
-
-const iframeInnerStyle = computed(() => ({
-  width: '100%',
-  height: 'calc(100% - 66px)',
-  border: 'none',
-  borderBottomLeftRadius: '12px',
-  borderBottomRightRadius: '12px',
-  filter: isDark.value ? 'invert(0.88) hue-rotate(180deg)' : 'none',
-}));
-
-const dragHeaderStyle = computed(() => ({
-  width: '100%',
-  padding: '8px',
-  background: dragHeaderBackground.value,
-  borderBottom: frameBorder.value,
-  borderTopLeftRadius: '8px',
-  borderTopRightRadius: '8px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  cursor: 'move'
-}));
-
-function toggleIframe() {
-  showIframe.value = !showIframe.value;
-}
-
-function openIframeLink(url) {
-  if (typeof window !== 'undefined') {
-    let url_ = url || "https://docs.astrbot.app";
-    window.open(url_, "_blank");
-  }
-}
-
-function openFaqLink() {
-  const faqUrl = locale.value === 'en-US'
-    ? 'https://docs.astrbot.app/en/faq.html'
-    : 'https://docs.astrbot.app/faq.html';
-  openIframeLink(faqUrl);
-}
-
-let offsetX = 0;
-let offsetY = 0;
-let isDragging = false;
-
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
-function startDrag(clientX, clientY) {
-  isDragging = true;
-  const dm = document.getElementById('draggable-iframe');
-  const rect = dm.getBoundingClientRect();
-  offsetX = clientX - rect.left;
-  offsetY = clientY - rect.top;
-  document.body.style.userSelect = 'none';
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', onMouseUp);
-  document.addEventListener('touchmove', onTouchMove, { passive: false });
-  document.addEventListener('touchend', onTouchEnd);
-}
-
-function onMouseDown(event) {
-  startDrag(event.clientX, event.clientY);
-}
-
-function onMouseMove(event) {
-  if (isDragging) {
-    moveAt(event.clientX, event.clientY);
-  }
-}
-
-function onMouseUp() {
-  endDrag();
-}
-
-function onTouchStart(event) {
-  if (event.touches.length === 1) {
-    const touch = event.touches[0];
-    startDrag(touch.clientX, touch.clientY);
-  }
-}
-
-function onTouchMove(event) {
-  if (isDragging && event.touches.length === 1) {
-    event.preventDefault();
-    const touch = event.touches[0];
-    moveAt(touch.clientX, touch.clientY);
-  }
-}
-
-function onTouchEnd() {
-  endDrag();
-}
-
-function moveAt(clientX, clientY) {
-  const dm = document.getElementById('draggable-iframe');
-  const newLeft = clamp(clientX - offsetX, 0, window.innerWidth - dm.offsetWidth);
-  const newTop = clamp(clientY - offsetY, 0, window.innerHeight - dm.offsetHeight);
-  // Sync dragged position to reactive variable
-  dragPos.value = { left: newLeft + 'px', top: newTop + 'px' };
-}
-
-function endDrag() {
-  isDragging = false;
-  document.body.style.userSelect = '';
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', onMouseUp);
-  document.removeEventListener('touchmove', onTouchMove);
-  document.removeEventListener('touchend', onTouchEnd);
-}
-
 function startSidebarResize(event) {
   isResizing.value = true;
   document.body.style.userSelect = 'none';
@@ -294,30 +152,6 @@ function startSidebarResize(event) {
   document.addEventListener('mouseup', onMouseUpResize);
 }
 
-function formatNumber(num) {
-  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
-async function fetchStarCount() {
-  try {
-    const response = await fetch('https://cloud.astrbot.app/api/v1/github/repo-info');
-    const data = await response.json();
-    if (data.data && data.data.stargazers_count) {
-      starCount.value = data.data.stargazers_count;
-      console.debug('Fetched star count:', starCount.value);
-    }
-  } catch (error) {
-    console.debug('Failed to fetch star count:', error);
-  }
-}
-
-fetchStarCount();
-
-// 打开更新日志对话框
-function openChangelogDialog() {
-  changelogDialog.value = true;
-}
-
 </script>
 
 <template>
@@ -345,43 +179,6 @@ function openChangelogDialog() {
           <template v-else>{{ t('core.navigation.settings') }}</template>
           <v-tooltip v-if="isRailSidebar" activator="parent" location="right" :text="t('core.navigation.settings')" open-delay="180" />
         </v-btn>
-        <v-btn class="sidebar-footer-btn" :class="{ 'sidebar-footer-icon-btn': isRailSidebar }" :size="isRailSidebar ? 'default' : 'small'"
-          variant="text" :prepend-icon="isRailSidebar ? undefined : 'mdi-note-text-outline'"
-          :aria-label="t('core.navigation.changelog')" @click="openChangelogDialog">
-          <v-icon v-if="isRailSidebar" icon="mdi-note-text-outline" />
-          <template v-else>{{ t('core.navigation.changelog') }}</template>
-          <v-tooltip v-if="isRailSidebar" activator="parent" location="right" :text="t('core.navigation.changelog')" open-delay="180" />
-        </v-btn>
-        <v-btn class="sidebar-footer-btn" :class="{ 'sidebar-footer-icon-btn': isRailSidebar }" :size="isRailSidebar ? 'default' : 'small'"
-          variant="text" :prepend-icon="isRailSidebar ? undefined : 'mdi-book-open-variant'"
-          :aria-label="t('core.navigation.documentation')" @click="toggleIframe">
-          <v-icon v-if="isRailSidebar" icon="mdi-book-open-variant" />
-          <template v-else>{{ t('core.navigation.documentation') }}</template>
-          <v-tooltip v-if="isRailSidebar" activator="parent" location="right" :text="t('core.navigation.documentation')" open-delay="180" />
-        </v-btn>
-        <v-btn class="sidebar-footer-btn" :class="{ 'sidebar-footer-icon-btn': isRailSidebar }" :size="isRailSidebar ? 'default' : 'small'"
-          variant="text" :prepend-icon="isRailSidebar ? undefined : 'mdi-frequently-asked-questions'"
-          :aria-label="t('core.navigation.faq')" @click="openFaqLink">
-          <v-icon v-if="isRailSidebar" icon="mdi-frequently-asked-questions" />
-          <template v-else>{{ t('core.navigation.faq') }}</template>
-          <v-tooltip v-if="isRailSidebar" activator="parent" location="right" :text="t('core.navigation.faq')" open-delay="180" />
-        </v-btn>
-        <v-btn class="sidebar-footer-btn" :class="{ 'sidebar-footer-icon-btn': isRailSidebar }" :size="isRailSidebar ? 'default' : 'small'"
-          variant="text" :prepend-icon="isRailSidebar ? undefined : 'mdi-github'" :aria-label="t('core.navigation.github')"
-          @click="openIframeLink('https://github.com/AstrBotDevs/AstrBot')">
-          <v-icon v-if="isRailSidebar" icon="mdi-github" />
-          <template v-else>
-            {{ t('core.navigation.github') }}
-             <v-chip
-              v-if="starCount"
-              size="x-small"
-              variant="outlined"
-              class="ml-2"
-              style="font-weight: normal;"
-            >{{ formatNumber(starCount) }}</v-chip>
-          </template>
-          <v-tooltip v-if="isRailSidebar" activator="parent" location="right" :text="t('core.navigation.github')" open-delay="180" />
-        </v-btn>
       </div>
     </div>
     
@@ -394,44 +191,6 @@ function openChangelogDialog() {
     </div>
   </v-navigation-drawer>
   
-  <div
-    v-if="showIframe"
-    id="draggable-iframe"
-    :style="iframeStyle"
-  >
-
-    <div :style="dragHeaderStyle" @mousedown="onMouseDown" @touchstart="onTouchStart">
-      <div style="display: flex; align-items: center;">
-        <v-icon icon="mdi-cursor-move" />
-        <span style="margin-left: 8px;">{{ t('core.navigation.drag') }}</span>
-      </div>
-      <div style="display: flex; gap: 8px;">
-        <v-btn
-          icon
-          @click.stop="openIframeLink('https://docs.astrbot.app')"
-          @mousedown.stop
-          :style="{ borderRadius: '8px', border: frameBorder }"
-        >
-          <v-icon icon="mdi-open-in-new" />
-        </v-btn>
-        <v-btn
-          icon
-          @click.stop="toggleIframe"
-          @mousedown.stop
-          :style="{ borderRadius: '8px', border: frameBorder }"
-        >
-          <v-icon icon="mdi-close" />
-        </v-btn>
-      </div>
-    </div>
-    <iframe
-      src="https://docs.astrbot.app"
-      :style="iframeInnerStyle"
-      ></iframe>
-  </div>
-
-  <!-- 更新日志对话框 -->
-  <ChangelogDialog v-model="changelogDialog" />
 </template>
 
 <style scoped>
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index 1020b51e2..096a6df07 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -11,7 +11,10 @@
                     :key="item.id"
                     type="button"
                     class="settings-nav__item"
-                    :class="{ 'settings-nav__item--active': activeSettingsSection === item.id }"
+                    :class="{
+                        'settings-nav__item--active': activeSettingsSection === item.id,
+                        'settings-nav__item--divider': item.dividerBefore
+                    }"
                     :aria-pressed="activeSettingsSection === item.id"
                     @click="activeSettingsSection = item.id"
                 >
@@ -395,12 +398,39 @@
                         </div>
                     </div>
                 </section>
+
+                <section id="settings-resources" class="settings-section" v-show="activeSettingsSection === 'resources'">
+                    <div class="settings-section__heading">
+                        <div class="settings-section__title">{{ tm('sections.resources.title') }}</div>
+                    </div>
+                    <div class="settings-section__content">
+                        <div class="settings-list-card">
+                            <div
+                                v-for="item in resourceItems"
+                                :key="item.key"
+                                class="settings-item"
+                            >
+                                <div class="settings-item__label">
+                                    <div class="settings-item__title">{{ item.title }}</div>
+                                    <div class="settings-item__subtitle">{{ item.subtitle }}</div>
+                                </div>
+                                <div class="settings-item__control">
+                                    <v-btn variant="tonal" @click="item.action()">
+                                        <v-icon class="mr-2">{{ item.icon }}</v-icon>
+                                        {{ item.title }}
+                                    </v-btn>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
             </main>
         </div>
     </div>
 
     <WaitingForRestart ref="wfr" />
     <BackupDialog ref="backupDialog" />
+    <ChangelogDialog v-model="changelogDialog" />
     <DashboardTwoFactorDialog
         v-model="configSave2faDialogVisible"
         :error-message="configSave2faError"
@@ -421,9 +451,10 @@ import SidebarCustomizer from '@/components/shared/SidebarCustomizer.vue';
 import BackupDialog from '@/components/shared/BackupDialog.vue';
 import StorageCleanupPanel from '@/components/shared/StorageCleanupPanel.vue';
 import DashboardTwoFactorDialog from '@/components/shared/DashboardTwoFactorDialog.vue';
+import ChangelogDialog from '@/components/shared/ChangelogDialog.vue';
 import { restartAstrBot as restartAstrBotRuntime } from '@/utils/restartAstrBot';
 import { copyToClipboard } from '@/utils/clipboard';
-import { useModuleI18n } from '@/i18n/composables';
+import { useI18n, useModuleI18n } from '@/i18n/composables';
 import { useTheme } from 'vuetify';
 import { PurpleTheme } from '@/theme/LightTheme';
 import { useToastStore } from '@/stores/toast';
@@ -431,6 +462,7 @@ import { askForConfirmation, useConfirmDialog } from '@/utils/confirmDialog';
 
 const { tm } = useModuleI18n('features/settings');
 const { tm: tmMeta } = useModuleI18n('features/config-metadata');
+const { t, locale } = useI18n();
 const toastStore = useToastStore();
 const confirmDialog = useConfirmDialog();
 const theme = useTheme();
@@ -497,6 +529,7 @@ const configSave2faRotationHint = ref('');
 const configSavePendingData = ref(null);
 const systemConfigAutoSaveTimer = ref(null);
 const activeSettingsSection = ref('general');
+const changelogDialog = ref(false);
 
 const apiKeyExpiryOptions = computed(() => [
     { title: tm('apiKey.expiryOptions.day1'), value: 1 },
@@ -526,7 +559,50 @@ const settingsNavItems = computed(() => [
     { id: 'network', label: tm('sections.network.title'), icon: 'mdi mdi-lan-connect' },
     { id: 'security', label: tm('sections.security.title'), icon: 'mdi mdi-shield-lock-outline' },
     { id: 'maintenance', label: tm('sections.maintenance.title'), icon: 'mdi mdi-tools' },
-    { id: 'openapi', label: tm('sections.openapi.title'), icon: 'mdi mdi-api' }
+    { id: 'openapi', label: tm('sections.openapi.title'), icon: 'mdi mdi-api' },
+    { id: 'resources', label: tm('sections.resources.title'), icon: 'mdi mdi-information-outline', dividerBefore: true }
+]);
+
+const openExternalLink = (url) => {
+    if (typeof window === 'undefined') return;
+    window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const openFaqLink = () => {
+    openExternalLink(locale.value === 'en-US'
+        ? 'https://docs.astrbot.app/en/faq.html'
+        : 'https://docs.astrbot.app/faq.html');
+};
+
+const resourceItems = computed(() => [
+    {
+        key: 'changelog',
+        title: t('core.navigation.changelog'),
+        subtitle: tm('resources.changelog.subtitle'),
+        icon: 'mdi-note-text-outline',
+        action: () => { changelogDialog.value = true; }
+    },
+    {
+        key: 'documentation',
+        title: t('core.navigation.documentation'),
+        subtitle: tm('resources.documentation.subtitle'),
+        icon: 'mdi-book-open-variant',
+        action: () => openExternalLink('https://docs.astrbot.app')
+    },
+    {
+        key: 'faq',
+        title: t('core.navigation.faq'),
+        subtitle: tm('resources.faq.subtitle'),
+        icon: 'mdi-frequently-asked-questions',
+        action: openFaqLink
+    },
+    {
+        key: 'github',
+        title: t('core.navigation.github'),
+        subtitle: tm('resources.github.subtitle'),
+        icon: 'mdi-github',
+        action: () => openExternalLink('https://github.com/AstrBotDevs/AstrBot')
+    }
 ]);
 
 const configIncludedScopes = ['bot', 'provider'];
@@ -916,6 +992,8 @@ onMounted(async () => {
         activeSettingsSection.value = 'maintenance';
     } else if (hash.includes('settings-openapi')) {
         activeSettingsSection.value = 'openapi';
+    } else if (hash.includes('settings-resources')) {
+        activeSettingsSection.value = 'resources';
     }
 });
 
@@ -995,6 +1073,20 @@ onUnmounted(() => {
     color: rgb(var(--v-theme-on-surface));
 }
 
+.settings-nav__item--divider {
+    margin-top: 13px;
+}
+
+.settings-nav__item--divider::after {
+    position: absolute;
+    top: -9px;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background: var(--settings-divider);
+    content: "";
+}
+
 .settings-nav__item--active {
     background: rgba(var(--v-theme-on-surface), 0.07);
     color: rgb(var(--v-theme-on-surface));