diff --git a/.env.development b/.env.development
index e9224a19de305318f0f6e7b2bb169a9006e5547a..24a66be225a4975018cef456f58d28fc8e7aba1a 100644
--- a/.env.development
+++ b/.env.development
@@ -12,4 +12,7 @@ VITE_API_WS_URL = 'ws://localhost:8000'
 VITE_BASE = '/'
 
 # 是否开启开发者工具
-VITE_OPEN_DEVTOOLS = false
\ No newline at end of file
+VITE_OPEN_DEVTOOLS = false
+
+# 应用配置面板
+VITE_APP_SETTING = true
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 7236d2e1ce73c35f38b3942b3053e504421c606d..1c5abb9b191bae7db453bbdbcb88152761ade020 100644
--- a/.env.production
+++ b/.env.production
@@ -8,4 +8,7 @@ VITE_API_BASE_URL = 'https://api.continew.top'
 VITE_API_WS_URL = 'wss://api.continew.top'
 
 # 地址前缀
-VITE_BASE = '/'
\ No newline at end of file
+VITE_BASE = '/'
+
+# 应用配置面板
+VITE_APP_SETTING = false
\ No newline at end of file
diff --git a/.env.test b/.env.test
index 3660da199574c56f01e0a567f18b28e8d1c884f3..68c14e1b7907b5b040749ca303e7ec5d8ff7d4e7 100644
--- a/.env.test
+++ b/.env.test
@@ -13,4 +13,7 @@ VITE_API_BASE_URL = 'http://localhost:8000'
 VITE_BASE = '/test'
 
 # 是否开启开发者工具
-VITE_OPEN_DEVTOOLS = true
\ No newline at end of file
+VITE_OPEN_DEVTOOLS = true
+
+# 应用配置面板
+VITE_APP_SETTING = false
\ No newline at end of file
diff --git a/src/config/setting.json b/src/config/setting.json
deleted file mode 100644
index 77c77d3725154663668767ba8faad73eb4fc42cf..0000000000000000000000000000000000000000
--- a/src/config/setting.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "theme": "light",
-  "themeColor": "#165DFF",
-  "tab": true,
-  "tabMode": "card-gutter",
-  "animate": false,
-  "animateMode": "zoom-fade",
-  "menuCollapse": true,
-  "menuAccordion": true,
-  "menuDark": false,
-  "copyrightDisplay": true,
-  "layout": "left"
-}
diff --git a/src/config/setting.ts b/src/config/setting.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9f81ee44e840b8be2d0e0303763e2b821c538f0
--- /dev/null
+++ b/src/config/setting.ts
@@ -0,0 +1,19 @@
+export const defaultSettings: App.AppSettings = {
+  theme: 'light',
+  themeColor: '#165DFF',
+  tab: true,
+  tabMode: 'card-gutter',
+  animate: false,
+  animateMode: 'zoom-fade',
+  menuCollapse: true,
+  menuAccordion: true,
+  menuDark: false,
+  copyrightDisplay: true,
+  layout: 'left',
+  enableColorWeaknessMode: false,
+  enableMourningMode: false,
+}
+// 根据环境返回配置
+export const getSettings = (): App.AppSettings => {
+  return defaultSettings
+}
diff --git a/src/layout/components/HeaderRightBar/SettingDrawer.vue b/src/layout/components/HeaderRightBar/SettingDrawer.vue
index 3ed98e8bef71082a7a6bf0c5c76483d3b608f8c7..df7a8fc3fe7d680e3decbb801135ac8d2d4fbc35 100644
--- a/src/layout/components/HeaderRightBar/SettingDrawer.vue
+++ b/src/layout/components/HeaderRightBar/SettingDrawer.vue
@@ -1,8 +1,11 @@
 <template>
   <a-drawer v-model:visible="visible" title="项目配置" width="300px" unmount-on-close :footer="false">
     <a-space :size="15" direction="vertical" fill>
-      <a-divider orientation="center">系统布局</a-divider>
-      <a-row justify="center">
+      <a-alert v-if="settingOpen" :show-icon="false" type="info">
+        「复制配置」按钮，并将配置粘贴到 src/config/settings.ts 文件中。
+      </a-alert>
+      <a-divider v-if="settingOpen" orientation="center">系统布局</a-divider>
+      <a-row v-if="settingOpen" justify="center">
         <a-space>
           <a-badge>
             <template #content>
@@ -35,9 +38,9 @@
         ></ColorPicker>
       </a-row>
 
-      <a-divider orientation="center">界面显示</a-divider>
+      <a-divider v-if="settingOpen" orientation="center">界面显示</a-divider>
 
-      <a-descriptions :column="1" :align="{ value: 'right' }" :value-style="{ paddingRight: 0 }">
+      <a-descriptions v-if="settingOpen" :column="1" :align="{ value: 'right' }" :value-style="{ paddingRight: 0 }">
         <a-descriptions-item label="页签显示">
           <a-switch v-model="appStore.tab" />
         </a-descriptions-item>
@@ -70,10 +73,28 @@
         <a-descriptions-item label="水印">
           <a-switch v-model="appStore.isOpenWatermark" />
         </a-descriptions-item>
-        <a-descriptions-item v-if="appStore.isOpenWatermark" label="水印信息">
+        <a-descriptions-item label="水印信息">
           <a-input v-model="appStore.watermark" placeholder="留空则显示用户名" />
         </a-descriptions-item>
       </a-descriptions>
+
+      <a-divider orientation="center">其它</a-divider>
+      <a-descriptions :column="1" :align="{ value: 'right' }" :value-style="{ paddingRight: 0 }">
+        <a-descriptions-item label="色弱模式">
+          <a-switch v-model="appStore.enableColorWeaknessMode" />
+        </a-descriptions-item>
+        <a-descriptions-item v-if="settingOpen" label="哀悼模式">
+          <a-switch v-model="appStore.enableMourningMode" />
+        </a-descriptions-item>
+      </a-descriptions>
+      <a-space v-if="settingOpen" direction="vertical" fill>
+        <a-button type="primary" long @click="copySettings">
+          <template #icon>
+            <icon-copy />
+          </template>
+          复制配置
+        </a-button>
+      </a-space>
     </a-space>
   </a-drawer>
 </template>
@@ -81,13 +102,15 @@
 <script setup lang="ts">
 import { ColorPicker } from 'vue-color-kit'
 import 'vue-color-kit/dist/vue-color-kit.css'
+import { useClipboard } from '@vueuse/core'
+import { Message } from '@arco-design/web-vue'
 import LayoutItem from './components/LayoutItem.vue'
 import { useAppStore } from '@/stores'
 
 defineOptions({ name: 'SettingDrawer' })
 const appStore = useAppStore()
 const visible = ref(false)
-
+const settingOpen = JSON.parse(import.meta.env.VITE_APP_SETTING)
 const tabModeList: App.TabItem[] = [
   { label: '卡片', value: 'card' },
   { label: '间隔卡片', value: 'card-gutter' },
@@ -138,6 +161,36 @@ const changeColor = (colorObj: ColorObj) => {
   appStore.setThemeColor(colorObj.hex)
 }
 
+// 复制配置
+const copySettings = () => {
+  const settings: App.AppSettings = {
+    theme: 'light',
+    themeColor: appStore.themeColor,
+    tab: appStore.tab,
+    tabMode: appStore.tabMode,
+    animate: appStore.animate,
+    animateMode: appStore.animateMode,
+    menuCollapse: appStore.menuCollapse,
+    menuAccordion: appStore.menuAccordion,
+    menuDark: appStore.menuDark,
+    copyrightDisplay: appStore.copyrightDisplay,
+    layout: appStore.layout,
+    isOpenWatermark: appStore.isOpenWatermark,
+    watermark: appStore.watermark,
+    enableColorWeaknessMode: appStore.enableColorWeaknessMode,
+    enableMourningMode: appStore.enableMourningMode,
+  }
+
+  const settingJson = JSON.stringify(settings, null, 2)
+  const { isSupported, copy } = useClipboard({ source: settingJson })
+  if (isSupported) {
+    copy(settingJson)
+    Message.success({ content: '复制成功!' })
+  } else {
+    Message.error({ content: '请检查浏览器权限是否开启' })
+  }
+}
+
 defineExpose({ open })
 </script>
 
diff --git a/src/layout/components/HeaderRightBar/index.vue b/src/layout/components/HeaderRightBar/index.vue
index 10bdabd8eaf557f5c5b1f5f971783b2ba888fdc5..4ca4b5947985820c6d04b4e4049a3e6f3214b671 100644
--- a/src/layout/components/HeaderRightBar/index.vue
+++ b/src/layout/components/HeaderRightBar/index.vue
@@ -80,7 +80,6 @@ import { isMobile } from '@/utils'
 import { getToken } from '@/utils/auth'
 
 defineOptions({ name: 'HeaderRight' })
-
 let socket: WebSocket
 onBeforeUnmount(() => {
   if (socket) {
diff --git a/src/stores/modules/app.ts b/src/stores/modules/app.ts
index 1d5c13b7e78b0580c838ba684b1eac256fb1f2ec..286834f378e90ccdf401a48e8c4b080af0fc896c 100644
--- a/src/stores/modules/app.ts
+++ b/src/stores/modules/app.ts
@@ -2,11 +2,11 @@ import { defineStore } from 'pinia'
 import { computed, reactive, toRefs } from 'vue'
 import { generate, getRgbStr } from '@arco-design/color'
 import { type BasicConfig, listSiteOptionDict } from '@/apis'
-import defaultSettings from '@/config/setting.json'
+import { getSettings } from '@/config/setting'
 
 const storeSetup = () => {
   // App配置
-  const settingConfig = reactive({ ...defaultSettings }) as App.SettingConfig
+  const settingConfig = reactive({ ...getSettings() }) as App.AppSettings
   // 页面切换动画类名
   const transitionName = computed(() => (settingConfig.animate ? settingConfig.animateMode : ''))
 
@@ -81,6 +81,27 @@ const storeSetup = () => {
     document.title = config.SITE_TITLE || ''
     document.querySelector('link[rel="shortcut icon"]')?.setAttribute('href', config.SITE_FAVICON || '/favicon.ico')
   }
+  // 监听 色弱模式 和 哀悼模式
+  watch([
+    () => settingConfig.enableMourningMode,
+    () => settingConfig.enableColorWeaknessMode,
+  ], ([mourningMode, colorWeaknessMode]) => {
+    const filters = [] as string[]
+    if (mourningMode) {
+      filters.push('grayscale(100%)')
+    }
+    if (colorWeaknessMode) {
+      filters.push('invert(80%)')
+    }
+    // 如果没有任何滤镜条件，移除 `filter` 样式
+    if (filters.length === 0) {
+      document.documentElement.style.removeProperty('filter')
+    } else {
+      document.documentElement.style.setProperty('filter', filters.join(' '))
+    }
+  }, {
+    immediate: true,
+  })
 
   const getFavicon = () => {
     return siteConfig.SITE_FAVICON
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index 0cbb8f8f23c1c3995689512c977a2756dcf911f9..989d92de142d8c3392a78dba00567dec4817a9dc 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -1,20 +1,22 @@
 declare namespace App {
-  /** 系统配置 */
-  interface SettingConfig {
-    theme: 'light' | 'dark' // 主题
-    themeColor: string // 主题色
-    tab: boolean // 是否显示页签
-    tabMode: TabType // 页签风格
-    animate: boolean // 是否显示动画
-    animateMode: AnimateType // 动画类名
-    menuCollapse: boolean // 左侧菜单折叠状态
-    menuAccordion: boolean // 左侧菜单手风琴效果
-    copyrightDisplay: boolean // 是否显示底部版权信息
-    menuDark: boolean // 菜单深色模式
+  interface AppSettings {
+    theme: 'light' | 'dark'
+    themeColor: string
+    tab: boolean
+    tabMode: 'card' | 'card-gutter' | 'rounded'
+    animate: boolean
+    animateMode: 'zoom-fade' | 'slide-dynamic-origin' | 'fade-slide' | 'fade' | 'fade-bottom' | 'fade-scale'
+    menuCollapse: boolean
+    menuAccordion: boolean
+    menuDark: boolean
+    copyrightDisplay: boolean
     layout: 'left' | 'mix'
-    isOpenWatermark: boolean // 是否开启水印
-    watermark: string // 水印
+    isOpenWatermark?: boolean
+    watermark?: string
+    enableColorWeaknessMode?: boolean
+    enableMourningMode?: boolean
   }
+
   /** 导航页签的样式类型 */
   type TabType = 'card' | 'card-gutter' | 'rounded'
   interface TabItem {
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
index 72a6327211cbd7ff1c34f6f596b00966559015f7..97c8118b3cbfd8ef59d079e750323f03877bdbed 100644
--- a/src/types/env.d.ts
+++ b/src/types/env.d.ts
@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_API_PREFIX: string
   readonly VITE_API_BASE_URL: string
   readonly VITE_BASE: string
+  readonly VITE_APP_SETTING: string
 }
 
 interface ImportMeta {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 498a4ec5b83a0e66e1037277c854652cbcd4e941..ee4afa0d53605d783cb9bb80d9bf60e5eb7956ac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login pc">
+  <div v-if="isDesktop" class="login pc">
     <h3 class="login-logo">
       <img v-if="logo" :src="logo" alt="logo" />
       <img v-else src="/logo.svg" alt="logo" />
@@ -15,13 +15,13 @@
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
           <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
-          <EmailLogin v-show="isEmailLogin" />
-          <a-tabs v-show="!isEmailLogin" class="login-right__form">
+          <EmailLogin v-if="isEmailLogin" />
+          <a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
             <a-tab-pane key="1" title="账号登录">
-              <AccountLogin />
+              <component :is="AccountLogin" v-if="activeTab === '1'" />
             </a-tab-pane>
             <a-tab-pane key="2" title="手机号登录">
-              <PhoneLogin />
+              <component :is="PhoneLogin" v-if="activeTab === '2'" />
             </a-tab-pane>
           </a-tabs>
           <div class="login-right__oauth">
@@ -50,7 +50,8 @@
     <GiThemeBtn class="theme-btn" />
     <Background />
   </div>
-  <div class="login h5">
+
+  <div v-else class="login h5">
     <div class="login-logo">
       <img v-if="logo" :src="logo" alt="logo" />
       <img v-else src="/logo.svg" alt="logo" />
@@ -60,13 +61,13 @@
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
           <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
-          <EmailLogin v-show="isEmailLogin" />
-          <a-tabs v-show="!isEmailLogin" class="login-right__form">
+          <EmailLogin v-if="isEmailLogin" />
+          <a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
             <a-tab-pane key="1" title="账号登录">
-              <AccountLogin />
+              <component :is="AccountLogin" v-if="activeTab === '1'" />
             </a-tab-pane>
             <a-tab-pane key="2" title="手机号登录">
-              <PhoneLogin />
+              <component :is="PhoneLogin" v-if="activeTab === '2'" />
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -89,6 +90,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import Background from './components/background/index.vue'
 import AccountLogin from './components/account/index.vue'
 import PhoneLogin from './components/phone/index.vue'
@@ -105,6 +107,8 @@ const title = computed(() => appStore.getTitle())
 const logo = computed(() => appStore.getLogo())
 
 const isEmailLogin = ref(false)
+const activeTab = ref('1')
+
 // 切换登录模式
 const toggleLoginMode = () => {
   isEmailLogin.value = !isEmailLogin.value
diff --git a/src/views/system/role/RoleAddModal.vue b/src/views/system/role/RoleAddModal.vue
index dba78ce4bc7cf0ec7085a16ccb41a147898a4ec7..8e107b363594d40d9f0dd743ab676c35ac939d9d 100644
--- a/src/views/system/role/RoleAddModal.vue
+++ b/src/views/system/role/RoleAddModal.vue
@@ -45,7 +45,7 @@
             <a-tree
               ref="menuTreeRef"
               v-model:checked-keys="form.menuIds"
-              class="w-full"
+              class="w-full menu-tree"
               :data="menuList"
               :default-expand-all="isMenuExpanded"
               :check-strictly="!form.menuCheckStrictly"
@@ -283,7 +283,17 @@ fieldset legend {
 :deep(.arco-form-item-extra) {
   width: 100%;
 }
+
 :deep(.arco-modal-footer){
   margin-top: -20px;
 }
+
+.menu-tree{
+  :deep(.arco-tree-node-is-leaf) {
+    display: inline-flex;
+  }
+  :deep(.arco-tree-node-indent-block){
+    width: 10px;
+  }
+}
 </style>
diff --git a/src/views/system/role/RoleUpdateDrawer.vue b/src/views/system/role/RoleUpdateDrawer.vue
index 95dd74e799b1daa8f3e6fe66a16020f40bf93c66..e070999872d2bd07982b67cc6daac781c94f7a69 100644
--- a/src/views/system/role/RoleUpdateDrawer.vue
+++ b/src/views/system/role/RoleUpdateDrawer.vue
@@ -15,7 +15,7 @@
           <a-input v-model.trim="form.name" placeholder="请输入名称" />
         </a-form-item>
         <a-form-item label="编码" field="code">
-          <a-input v-model.trim="form.code" placeholder="请输入编码" :disabled="isUpdate" />
+          <a-input v-model.trim="form.code" placeholder="请输入编码" :disabled="true" />
         </a-form-item>
         <a-form-item label="排序" field="sort">
           <a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />
@@ -41,6 +41,7 @@
           <template #extra>
             <a-tree
               ref="menuTreeRef"
+              class="menu-tree"
               :data="menuList"
               :default-expand-all="isMenuExpanded"
               :check-strictly="!form.menuCheckStrictly"
@@ -235,4 +236,12 @@ fieldset legend {
   border: 1px solid var(--color-neutral-3);
   border-radius: 3px;
 }
+.menu-tree{
+  :deep(.arco-tree-node-is-leaf) {
+    display: inline-flex;
+  }
+  :deep(.arco-tree-node-indent-block){
+    width: 10px;
+  }
+}
 </style>