style: 移除Python文件中的编码声明并优化代码格式

refactor: 重构前端组件和样式，添加AI助手功能

docs: 更新README文档，添加ruff代码检查说明

feat: 新增AI助手相关API和前端组件

chore: 更新.gitignore文件，添加ruff缓存配置

fix: 修复前端布局和设置相关的问题

perf: 优化代码结构和性能，移除冗余代码

test: 更新测试文件，移除编码声明

build: 更新依赖版本，调整requirements.txt

frontend/src/layouts/components/NavBar/components/NavbarActions.vue

@@ -21,12 +21,21 @@
       <div v-if="settingStore.showLangSelect" class="navbar-actions__item">
         <LangSelect />
       </div>
-    </template>
 
-    <!-- 通知 -->
-    <div v-if="settingStore.showNotification" class="navbar-actions__item">
-      <Notification />
-    </div>
+      <!-- 通知 -->
+      <div v-if="settingStore.showNotification" class="navbar-actions__item">
+        <Notification />
+      </div>
+
+      <!-- 系统设置按钮 -->
+      <div
+        v-if="settingStore.showSettings"
+        class="navbar-actions__item"
+        @click="handleSettingsClick"
+      >
+        <div class="i-svg:setting" />
+      </div>
+    </template>
 
     <!-- 用户菜单,不管桌面还是移动端都显示 -->
     <div class="navbar-actions__item">
@@ -146,6 +155,13 @@ function handleDocumentClick() {
   window.open("https://service.fastapiadmin.com", "_blank");
 }
 
+/**
+ * 打开系统设置页面
+ */
+function handleSettingsClick() {
+  settingStore.settingsVisible = true;
+}
+
 /**
  * Gitee 项目地址
  */
@@ -259,7 +275,6 @@ function logout() {
     justify-content: center;
     min-width: 44px; /* 增加最小点击区域到44px，符合人机交互标准 */
     height: 100%;
-    min-height: 44px;
     padding: 0 8px;
     text-align: center;
     cursor: pointer;
@@ -282,6 +297,15 @@ function logout() {
       height: 100%;
     }
 
+    :deep(.i-svg\:language) {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      font-size: 18px;
+      line-height: 18px;
+      background-size: 18px 18px;
+    }
+
     // 图标样式
     :deep([class^="i-svg:"]) {
       font-size: 18px;
@@ -303,6 +327,7 @@ function logout() {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 44px;
     padding: 0 8px;
 
     &__avatar-wrapper {
@@ -313,6 +338,9 @@ function logout() {
     }
 
     &__avatar {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
       border-radius: 50%;
     }
 

frontend/src/layouts/components/Settings/index.vue

@@ -140,7 +140,17 @@
           <el-switch v-model="settingsStore.showWatermark" />
         </div>
 
-        <!-- 桌面端工具项控制 -->
+        <div class="flex-x-between">
+          <span class="text-xs">灰色模式</span>
+          <el-switch v-model="settingsStore.grayMode" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">AI 助手</span>
+          <el-switch v-model="settingsStore.userEnableAi" />
+        </div>
+
+        <!-- 工具控制 -->
         <el-divider>{{ t("settings.showDesktopTools") }}</el-divider>
 
         <div class="flex-x-between">
@@ -218,11 +228,9 @@
 import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
 
 const { t } = useI18n();
-import { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
-import { useSettingsStore } from "@/store";
+import { LayoutMode, SidebarColor, ThemeMode, DeviceEnum } from "@/enums";
+import { useSettingsStore, useAppStore } from "@/store";
 import { themeColorPresets } from "@/settings";
-import { useAppStore } from "@/store/modules/app.store";
-import { DeviceEnum } from "@/enums/settings/device.enum";
 
 const appStore = useAppStore();
 const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "400px" : "90%"));
@@ -375,6 +383,8 @@ const generateSettingsCode = (): string => {
     showWatermark: settingsStore.showWatermark,
     watermarkContent: "pkg.name",
     sidebarColorScheme: `SidebarColor.${settingsStore.sidebarColorScheme.toUpperCase().replace("-", "_")}`,
+    grayMode: settingsStore.grayMode,
+    userEnableAi: settingsStore.userEnableAi,
   };
 
   return `const defaultSettings: AppSettings = {
@@ -396,6 +406,8 @@ const generateSettingsCode = (): string => {
   showWatermark: ${settings.showWatermark},
   watermarkContent: ${settings.watermarkContent},
   sidebarColorScheme: ${settings.sidebarColorScheme},
+  grayMode: ${settings.grayMode},
+  userEnableAi: ${settings.userEnableAi},
 };`;
 };
 
@@ -412,6 +424,8 @@ const handleCloseDrawer = () => {
 .settings-drawer {
   :deep(.el-drawer__body) {
     position: relative;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     padding: 0;
     overflow: hidden;
@@ -420,9 +434,8 @@ const handleCloseDrawer = () => {
 
 /* 设置内容区域 */
 .settings-content {
-  height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */
+  flex: 1 1 auto;
   padding: 20px;
-  padding-bottom: 20px;
   overflow-y: auto;
 }
 
@@ -448,11 +461,11 @@ const handleCloseDrawer = () => {
     border: none;
     border-radius: 0;
 
+    /* 底部操作区域样式 */
     .action-buttons {
       display: flex;
-      gap: 12px;
 
-      .action-btn {
+      & > .el-button {
         flex: 1;
         font-size: 14px;
         border-radius: 8px;
@@ -554,7 +567,11 @@ const handleCloseDrawer = () => {
     position: absolute;
     left: 4px;
     width: 12px;
-    background: var(--el-color-primary-light-3);
+    background: linear-gradient(
+      180deg,
+      var(--el-color-primary-dark-2) 0%,
+      var(--el-color-primary) 100%
+    );
     border-radius: 2px;
   }
 
@@ -637,7 +654,11 @@ const handleCloseDrawer = () => {
   }
 
   &.is-active {
-    background: var(--el-color-primary-light-9);
+    background: linear-gradient(
+      145deg,
+      var(--el-color-primary-light-9) 0%,
+      var(--el-color-primary-light-8) 100%
+    );
     border-color: var(--el-color-primary);
     transform: translateY(-2px) scale(1.08);