diff --git a/README.md b/README.md
index a7fb972a7accf7d0f46f21fb43253dae66ac21fc..a5744f7108306c145fb1b3bb522e91e0b846dd94 100644
--- a/README.md
+++ b/README.md
@@ -67,120 +67,25 @@ electron，react，typescript，less，axios，nodejs，koa，mongodb，jest，w
 [Dir] .vscode // vscode 配置文件
   [File] settings.json
 [Dir] app // 桌面端开发目录
-  [Dir] general
-    [File] common.js
-    [File] ipcEvent.js
-  [File] main.js // 入口文件
-  [File] preload.js // 主进程渲染进程桥梁配置
+  [Dir] render // 主进程渲染配置目录
+    [File] mainMenu.js // 菜单配置
+    [File] mainWindow.js // 窗口配置
+    [File] preload.js // 进程通信配置
+  [Dir] utils // 通用方法目录
+    [File] common.js // 公用api
+    [File] config.js // 全局global参数
+    [File] ipcEvent.js // 进程通信方法
+  [File] main.js // 主进程入口文件
 [Dir] build // 前端项目打包目录
-  [File] bundle.js
-  [File] favicon.ico
-  [File] index.d.ts
-  [File] index.html
-  [File] logo192.png
-  [File] logo256.png
-  [File] manifest.json
-  [File] robots.txt
+  ......
 [Dir] dist // 桌面端程序打包目录
   [Dir] .icon-ico
     [File] icon.ico
   [Dir] win-unpacked // 免安装应用测试启动程序
     [Dir] locales // 国际化资源包
-      [File] af.pak
-      [File] am.pak
-      [File] ar.pak
-      [File] bg.pak
-      [File] bn.pak
-      [File] ca.pak
-      [File] cs.pak
-      [File] da.pak
-      [File] de.pak
-      [File] el.pak
-      [File] en-GB.pak
-      [File] en-US.pak
-      [File] es-419.pak
-      [File] es.pak
-      [File] et.pak
-      [File] fa.pak
-      [File] fi.pak
-      [File] fil.pak
-      [File] fr.pak
-      [File] gu.pak
-      [File] he.pak
-      [File] hi.pak
-      [File] hr.pak
-      [File] hu.pak
-      [File] id.pak
-      [File] it.pak
-      [File] ja.pak
-      [File] kn.pak
-      [File] ko.pak
-      [File] lt.pak
-      [File] lv.pak
-      [File] ml.pak
-      [File] mr.pak
-      [File] ms.pak
-      [File] nb.pak
-      [File] nl.pak
-      [File] pl.pak
-      [File] pt-BR.pak
-      [File] pt-PT.pak
-      [File] ro.pak
-      [File] ru.pak
-      [File] sk.pak
-      [File] sl.pak
-      [File] sr.pak
-      [File] sv.pak
-      [File] sw.pak
-      [File] ta.pak
-      [File] te.pak
-      [File] th.pak
-      [File] tr.pak
-      [File] uk.pak
-      [File] ur.pak
-      [File] vi.pak
-      [File] zh-CN.pak
-      [File] zh-TW.pak
+     ......
     [Dir] resources // 桌面应用源码目录
-      [Dir] app
-        [Dir] app
-          [Dir] general
-            [File] common.js
-            [File] ipcEvent.js
-          [File] main.js
-          [File] preload.js
-        [Dir] build
-          [File] bundle.js
-          [File] favicon.ico
-          [File] index.html
-          [File] logo192.png
-          [File] logo256.png
-          [File] manifest.json
-          [File] robots.txt
-        [File] package.json
-      [Dir] server
-        [File] index.js
-        [File] package-lock.json
-        [File] package.json
-      [File] elevate.exe
-    [File] chrome_100_percent.pak
-    [File] chrome_200_percent.pak
-    [File] d3dcompiler_47.dll
-    [File] ffmpeg.dll
-    [File] icudtl.dat
-    [File] libEGL.dll
-    [File] libGLESv2.dll
-    [File] LICENSE.electron.txt
-    [File] LICENSES.chromium.html
-    [File] MTLH.exe
-    [File] resources.pak
-    [File] snapshot_blob.bin
-    [File] v8_context_snapshot.bin
-    [File] vk_swiftshader_icd.json
-    [File] vk_swiftshader.dll
-    [File] vulkan-1.dll
-  [File] builder-debug.yml
-  [File] builder-effective-config.yaml
+     ......
   [File] MTLH Setup 1.0.0.exe // 桌面应用安装程序
   [File] MTLH Setup 1.0.0.exe.blockmap
 [Dir] public // 前端静态资源目录
@@ -195,8 +100,22 @@ electron，react，typescript，less，axios，nodejs，koa，mongodb，jest，w
   [File] package-lock.json
   [File] package.json
 [Dir] src // 前端项目工程目录
-  [Dir] styles
+  [Dir] assets // 前端静态资源目录
+    [Dir] base_background
+      [File] windows-xp-bliss-4k-lu.jpg
+    [Dir] logo
+      [File] logo256.png
+  [Dir] components // 前端公用组件目录
+    [File] TitleBar.tsx
+  [Dir] pages // 前端页面目录
+    [File] Home.tsx
+  [Dir] styles // 全局样式目录
+    [Dir] components
+      [File] TitleBar.less
+    [Dir] pages
+      [File] Home.less
     [File] index.less
+    [File] variables.less // 样式变量文件
   [File] index.tsx // 入口文件
   [File] setupTests.js
 [File] .babelrc // 编译转换配置
diff --git a/src/assets/base_background/windows-xp-bliss-4k-lu.jpg b/src/assets/base_background/windows-xp-bliss-4k-lu.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ee7cd8898435e26f299fd5d83701fd9098a39e9d
Binary files /dev/null and b/src/assets/base_background/windows-xp-bliss-4k-lu.jpg differ
diff --git a/src/assets/logo/logo256.png b/src/assets/logo/logo256.png
new file mode 100644
index 0000000000000000000000000000000000000000..41a1abd48b5da10e96a1793a452ddf090838d03b
Binary files /dev/null and b/src/assets/logo/logo256.png differ
diff --git a/src/index.tsx b/src/index.tsx
index a6c5f9d76e0e0b9b6798b3c85ccfd3496ad2d202..d6ecaa4532d225ca93c91c4e61c08c863a414db3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,13 +2,14 @@
  * @Author: wuruipeng
  * @Date: 2024-04-19 16:29:24
  * @LastEditors: wuruipeng
- * @LastEditTime: 2024-04-28 17:21:58
+ * @LastEditTime: 2024-05-07 14:23:29
  * @description:渲染进程入口组件
  */
 
 import React from 'react'
 import { Root, createRoot } from 'react-dom/client'
 import TitleBar from 'components/TitleBar'
+import Home from 'pages/Home'
 import '@/styles/index.less'
 
 const rootElement = document.getElementById('root')
@@ -18,6 +19,7 @@ if (rootElement) {
     <React.StrictMode>
       <div id="app">
         <TitleBar></TitleBar>
+        <Home></Home>
       </div>
     </React.StrictMode>
   )
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9bba623c28b9e27ddcefee1013777913749138d
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import '@/styles/pages/Home.less'
+
+const Home: React.FC = () => {
+  return <div className="home"></div>
+}
+
+export default Home
diff --git a/src/styles/components/TitleBar.less b/src/styles/components/TitleBar.less
index 2cf3a60ffa7d30c5ce06785226abd61ecae1d454..e28a699c9765db089851bde85caf4a72fd76c690 100644
--- a/src/styles/components/TitleBar.less
+++ b/src/styles/components/TitleBar.less
@@ -3,7 +3,8 @@
 @transprop: transition;
 @transvalue:all 0.1s;
 
-#title-bar {
+#title-bar,
+.title-bar {
   display: @title-bar-display;
   grid-template-columns: 108px calc(100% - 108px - 160px) 160px;
   justify-content: space-between;
@@ -109,9 +110,10 @@
   .window-icon {
     position: relative;
     width: calc(@title-bar-height - 8px);
-    height: calc(@title-bar-height - (8 * 1.7px));
-    margin-right: 8px;
-    background: radial-gradient(red, orange, yellow, green, skyblue, blue);
+    height: calc(@title-bar-height - (8 * 1.7px) - 4px);
+    background-image: @logo-image;
+    background-repeat: no-repeat;
+    background-size: contain;
     &::before {
       content: attr(app-name);
       position: absolute;
diff --git a/src/styles/index.less b/src/styles/index.less
index b1336ab35ff27104c95b349d91e02e9edb9d545d..385e0e29674813bb3933b02ed45ba05181d56cce 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -58,7 +58,7 @@ img {
   position: relative;
   top: @title-bar-height;
   height: calc(100% - @title-bar-height);
-  padding-top: calc(@title-bar-height / 2);
+  padding-top: calc(@title-bar-height / 3);
   overflow: hidden auto;
   border: @theme-border-width solid @theme-color;
 }
diff --git a/src/styles/pages/Home.less b/src/styles/pages/Home.less
new file mode 100644
index 0000000000000000000000000000000000000000..794c46a20f8b1655ab1f4b47541b811789b06d06
--- /dev/null
+++ b/src/styles/pages/Home.less
@@ -0,0 +1,9 @@
+@import '../variables.less';
+
+.home {
+  width: 100%;
+  height: 100%;
+  background-image: @home-base-background-image;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
diff --git a/src/styles/variables.less b/src/styles/variables.less
index cda01bbd661b67dc42e949287f7a265b5dafede9..f60b66f697551a66cdf9ea45d7e19782f3c3e535 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -4,18 +4,48 @@
 }
 
 // 主题色变量
-@theme-color: #6262e8;
+@theme-color: #5262e6;
 @theme-border-width: 4px;
 
 // 窗口操作栏边框
 @title-bar-display: var(--title-bar-display);
 @title-bar-height: var(--title-bar-height);
-@title-bar-color: #fff;
-@title-bar-bg: linear-gradient(to top, #1e5be9, #4374e6, #fff);
-@title-bar-item-bg: linear-gradient(to top, #77b7ed, #1e5be9, #4374e6, #fff);
-@title-bar-close-bg: linear-gradient(to top, #ecbfbf, #ff0000, #f06e6e, #fff);
+@title-bar-color: #eee;
+@title-bar-bg: linear-gradient(
+  to top,
+  #1e5be9,
+  #7277e1,
+  #2e5bc3,
+  #083bb2,
+  #0848da,
+  #6dace2
+);
+@title-bar-bg2: linear-gradient(to top, #1e5be9, #4374e6, #fff);
+@title-bar-item-bg: linear-gradient(
+  to top,
+  #1e5be9,
+  #7277e1,
+  #2e5bc3,
+  #083bb2,
+  #0848da,
+  #6dace2
+);
+@title-bar-item-bg2: linear-gradient(to top, #77b7ed, #1e5be9, #4374e6, #fff);
+@title-bar-close-bg: linear-gradient(
+  to top,
+  #e8afaf,
+  #ec1e1e,
+  #f04545,
+  #d92121,
+  #e09999
+);
+@title-bar-close-bg2: linear-gradient(to top, #ecbfbf, #ff0000, #f06e6e, #fff);
 @shadow-color: #0000006d;
 
+// 主页相关
+@home-base-background-image: url(../assets/base_background/windows-xp-bliss-4k-lu.jpg);
+@logo-image: url(../assets//logo/logo256.png);
+
 // 全局类变量
 .drag-window {
   -webkit-app-region: drag;
diff --git a/tsconfig.json b/tsconfig.json
index 894d3b5566a5c6e7ab6ab16c0d9217f343319113..6e4b92c31f2b144187825ce491624f478cea3e8f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "module": "esnext",
     "lib": ["dom", "dom.iterable", "es2015", "es2016", "es2017", "esnext"],
     "strict": true,
-    "declaration": true,
+    "declaration": false, // 打包禁用生成声明文件(.d.ts)
     "sourceMap": true,
     "noEmit": false,
     "outDir": "./build",
diff --git a/webpack.config.js b/webpack.config.js
index 3b0ceed95010fbabf4104489d7f91851a034ad70..4e55510916b446486f9c8b317f6e671bbc9dfd38 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,8 +36,10 @@ module.exports = {
     alias: {
       '@': path.resolve(__dirname, 'src/'),
       components: path.resolve(__dirname, 'src/components/'),
+      pages: path.resolve(__dirname, 'src/pages/'),
       app: path.resolve(__dirname, 'app/'),
-      server: path.resolve(__dirname, 'server/')
+      server: path.resolve(__dirname, 'server/'),
+      assets: path.resolve(__dirname, 'assets/')
     },
     // 支持的扩展类型文件
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
@@ -73,6 +75,18 @@ module.exports = {
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader']
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        type: 'asset', // webpack5后不需要再显示配置file或url的loader，使用asset处理
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8192 // 文件大小小于 8KB 的将转换为 base64 编码
+          }
+        },
+        generator: {
+          filename: 'assets/[name].[hash][ext][query]' // 输出文件名格式
+        }
       }
     ]
   },