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) {
+
) 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
+} + +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]' // 输出文件名格式 + } } ] },