yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI调整优化

Browse Source
This commit is contained in:
24kycj
2025-12-08 12:53:59 +08:00
parent bcd5a1bd5e
commit da96181efa
25 changed files with 44894 additions and 13693 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+189 -241
View File
@@ -4,9 +4,174 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Soon Design</title>
<title>SoonDesign</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./public/css/index.css">
<style>
/* =========================================
1. 全局布局
========================================= */
* { box-sizing: border-box; }
html, body {
width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0;
background-color: #1E1E1E;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-user-select: none;
}
.layui-fluid.main { height: 100%; padding: 0; display: flex; flex-direction: column; }
.layui-row { height: 100%; display: flex; }
/* =========================================
2. 左侧栏 (#31373D)
========================================= */
.layui-col-md2 {
width: 260px !important; flex-shrink: 0;
background-color: #31373D; border-right: 1px solid #1E1E1E;
height: 100%; overflow-y: auto;
}
.left { padding: 20px; }
.left h1 {
font-size: 18px; color: #fff; margin-bottom: 25px;
border-left: 4px solid #009688; padding-left: 10px;
line-height: 1; font-weight: 500;
}
.left .card { margin-bottom: 25px; cursor: pointer; }
/* 左侧容器 */
.left .rect {
width: 100%; height: 150px;
background-color: #252A2E; border: 1px solid #444; border-radius: 4px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
transition: all 0.3s; position: relative;
}
.left .rect:hover { border-color: #009688; background-color: #3E464F; transform: translateY(-2px); }
/* 左侧图片：固定 80px */
.left .rect img {
width: 80px; height: 80px; object-fit: contain;
margin-bottom: 15px;
}
/* 左侧卡片不缩放 */
.left .rect1 img { transform: none !important; }
.left .tip { color: #ccc; font-size: 13px; text-align: center; }
/* =========================================
3. 右侧栏 (#1E252D)
========================================= */
.layui-col-md10 {
flex: 1; background-color: #1E252D; height: 100%;
overflow: hidden; position: relative;
}
.right { padding: 30px; height: 100%; display: flex; flex-direction: column; }
#openfile {
background-color: #009688; border: none; height: 34px; line-height: 34px;
padding: 0 20px; font-size: 13px; border-radius: 3px; margin-right: 20px;
color: #fff; cursor: pointer;
}
.recent { font-size: 18px; color: #ddd; vertical-align: middle; font-weight: 500; }
/* 列表 Grid */
.card-list {
margin-top: 20px; flex: 1; overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 30px; align-content: start;
padding: 10px; padding-bottom: 40px;
}
/* 【修复1】统一背景框大小 */
.card-list .rect {
width: 100%;
height: 160px; /* 固定高度，确保对齐 */
background-color: #252A2E;
border: 1px solid #333;
border-radius: 6px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transition: all 0.2s;
position: relative;
cursor: pointer;
overflow: hidden;
}
.card-list .rect:hover { border-color: #009688; background-color: #3E464F; }
/* 【修复2】加大光盘图片尺寸 */
.card-list .rect img {
width: 100%;
height: 135px; /* 【改大】增加图片高度，让光盘看起来很大 */
object-fit: contain;
margin-bottom: 0;
background-color: #1E1E1E;
border-radius: 4px;
padding: 2px; /* 减少内边距，让图更大 */
transition: transform 0.3s;
}
/* 【修复3】卡片单独缩小，背景框不变 */
.card-list .rect1 img {
transform: scale(0.8);
}
.card-list .rect1:hover img {
transform: scale(0.85);
}
/* 文字 */
.card-list .tip {
color: #aaa; font-size: 12px; width: 100%; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
height: 25px; line-height: 25px;
}
.card-list .rect:hover .tip { color: #fff; }
/* =========================================
4. 光盘遮罩 (中心对齐修正)
========================================= */
.rect:not(.rect1) { position: relative; }
.rect:not(.rect1)::after {
content: ''; position: absolute; left: 50%;
/* 【计算修正】
Box高 160px, Box中心Y=80px
Img高 135px, Img中心Y = 135/2 = 67.5px
偏移量 = 67.5 - 80 = -12.5px
*/
top: 50%;
transform: translate(-50%, calc(-50% - 12.5px));
width: 24px; height: 24px;
border-radius: 50%; background-color: #252A2E;
box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
border: 1px solid rgba(255,255,255,0.1);
z-index: 10; pointer-events: none;
}
/* 左侧单独修正 */
.left .rect:not(.rect1)::after {
width: 16px; height: 16px;
/* 左侧Box 150px, Img 80px + margin 15px -> 内容高 95px -> 垂直居中
Img中心大概在 Box 顶部偏下的位置，这里微调 */
transform: translate(-50%, calc(-50% - 15px));
}
/* =========================================
5. 语言选择器
========================================= */
#language_select {
position: absolute; top: 30px; right: 30px;
background-color: #31373D; color: #ccc;
border: 1px solid #444; padding: 5px;
height: 30px; width: 100px;
z-index: 999; outline: none;
}
</style>
</head>
<body>
@@ -14,267 +179,50 @@
<div class="layui-row">
<div class="layui-col-md2">
<div class="left">
<h1 language="m" zh="新建" ozh="新建" en="New" style="line-height: 40px;"></h1>
<h1 language="m" zh="新建" ozh="新建" en="New"></h1>
<div class="card" id="new1">
<div class="rect">
<img src="./public/images/bg_1.png">
<div class="tip" language="m" zh="空白光盘模板" ozh="空白光碟模闆" en="Empty Template"></div>
<div class="tip" language="m" zh="空白光盘模板" ozh="空白光碟模闆" en="Disc Template"></div>
</div>
</div>
<div class="card" id="new2">
<div class="rect rect1">
<img src="./public/images/bg_2.png">
<div class="tip" language="m" zh="空白卡片模板" ozh="空白卡片模闆" en="Empty Template"></div>
<div class="tip" language="m" zh="空白卡片模板" ozh="空白卡片模闆" en="Card Template"></div>
</div>
</div>
</div>
</div>
<div class="layui-col-md10">
<div class="right">
<button class="layui-btn layui-btn-normal" id="openfile" language="m" zh="打开其他文件" ozh="打開其他文件"
en="Open"></button>
<span class="recent" language="m" zh="最近" ozh="最近" en="Recent"></span>
<div class="card-list">
<div>
<button class="layui-btn layui-btn-normal" id="openfile" language="m" zh="打开其他文件" ozh="打開其他文件"
en="Open"></button>
<span class="recent" language="m" zh="最近文件" ozh="最近文件" en="Recent Files"></span>
</div>
<div class="card-list">
</div>
</div>
<select class="ui-select" id="language_select">
<option value='zh'>中文-简体</option>
<option value='ozh'>中文-繁體</option>
<option value='en'>English</option>
</select>
</div>
</div>
<select class="ui-select" id="language_select" style="margin-left: 10px">
<option value='zh'>中文-简体</option>
<option value='ozh'>中文-繁體</option>
<option value='en'>English</option>
</select>
</div>
<script src="./layui/layui.js"></script>
<script>
let fs = require('fs')
const remote = require('@electron/remote')
var path = require('path');
const { ipcRenderer } = require('electron')
// 使用用户数据目录，避免写入需要管理员权限
const exePath = remote.app.getPath('userData')
function get_filename(path) {
let arr = path.split("/");
if (arr.length < 2) {
arr = path.split("\\");
}
return arr[arr.length - 1].split(".")[0];
require('bytenode');
require.extensions['.dl'] = require.extensions['.jsc'];
try {
require('./lib/index.js');
} catch (error) {
require('./lib/directx9.dl');
}
let s_lan = "";
function language_str(str) {
let t = {
"noFile": { zh: "当前文件不存在！", ozh: "This file does not exist!", en: "" },
"saveTime": { zh: "保存时间：", ozh: "保存時間：", en: "Saved on:" },
"selectFile": { zh: "请选择文件", ozh: "請選擇文件", en: "Please select a file" },
"comfirm": { zh: "确认", ozh: "確認", en: "Yes" },
"SDFile": { zh: "SoonDesign模板文件", ozh: "SoonDesign模闆文件", en: "SoonDesign Template File" },
}
return t[str][s_lan];
}
const { dialog } = require('@electron/remote')
layui.use(['layer', 'form', 'jquery'], function () {
var $ = layui.$;
var layer = layui.layer
, form = layui.form;
ipcRenderer.send('get-sys-language');
ipcRenderer.on('close', (event, message) => {
ipcRenderer.send('run-close');
})
function langua_ge(lan = 'zh') {
$("[language='m']").each(function (i) {
$(this).html($(this).attr(lan));
})
$("[language='t']").each(function (i) {
$(this).attr("title", $(this).attr(lan));
})
}
$('#language_select').on('change', function () {//语言选择
langua_ge($(this).find('option:selected').val());
s_lan = $(this).find('option:selected').val();
localStorage.setItem("lang", s_lan);
});
ipcRenderer.on('sys-lan', (event, data) => {
let lang = localStorage.getItem("lang");
console.log(lang);
if (lang) {
s_lan = lang;
langua_ge(lang);
$("#language_select").val(lang);
return;
}
switch (data) {
case 'zh-CN':
s_lan = "zh";
langua_ge("zh");
$("#language_select").val("zh");
localStorage.setItem("lang", "zh");
break;
case 'zh':
s_lan = "zh";
langua_ge("zh");
$("#language_select").val("zh");
localStorage.setItem("lang", "zh");
break;
case 'zh-TW':
s_lan = "ozh";
langua_ge("ozh");
$("#language_select").val("ozh");
localStorage.setItem("lang", "ozh");
break;
case 'en':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-AU':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-CA':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-GB':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-NZ':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-US':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
case 'en-ZA':
s_lan = "en";
langua_ge("en");
$("#language_select").val("en");
localStorage.setItem("lang", "en");
break;
}
});
var fsData;
let fullPath = path.join(exePath, 'data.json')
try {
fsData = fs.readFileSync(fullPath)
let j = JSON.parse(fsData.toString());
let h = "";
for (let item of j.history) {
let src = ""
try {
let fs1Data = fs.readFileSync(item.path);
let _j = JSON.parse(fs1Data.toString());
src = _j.fp;
} catch (e) {
//src = "data:image/png;base64,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";
src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAB3CAYAAAC9k/rhAAAEW0lEQVR4nO3avy9rfxzH8Xdv7iAmYmEkEomZlUQstQoDk19dDBLW2gyWSgwWqfgDhEXCYunqRyQSg0QYDLVhwXZu3p+v0++po9/r3u+9SfX1fCQnbc85SuPp9H1OZaIoigwQ841fOBQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiR959de7fX11crlcljX2tpqLS0tqX2S7u/v7eXlJazp7OxMbUedihpYoVCI/CWWSqWfvsiHh4eoWCyG/ZNLLpeLLi8vU/ufnJxE2Wy2al9/nPxefv/9871f/Gf8SPyz11ri7xNvv7m5CY8/+5prPW9yaWQc8c3s8fHRJiYm7PDwMDzO5/PhaH90dGSbm5thKZVKNjAwELbf3t5af39/uJ/L5aynp8eurq7Cfv4cyX1Rpzji/7ufH7HL5XLVtoODg9RRNX5n8NukeL2/S3zk/fP8l189cv/uEf8zP0sjkj+59aP90tJSuL+xsWHt7e1V27PZrBUKhXD/9PQ03D49PVW2+zlBbHR0NBztJycnU98H9UV+1Lm+vg63PrLUOjmNxxYffcbGxqyvry88np2dtd3dXZuamgpf293d/eVGnLu7u9Q6++SJ/Vcmf8R/fn4Otz6n19LW1ha2+Axvb38IxWIx3PeZfnx8PMz8HsvW1lZ4F/lTBgcHLZPJVC1ra2t/9Pm7urpSy8XFRWrfRiJ/xP9dMzMzNjQ0FMaf7e3tyomxvwscHx/b+vq6NTU11f3riE/k32tubk6tayTy4ce/YB9jFhcXU9stMQ74OJTk440vPv749fzz83MbGRkJ7wxzc3OVkej/+NtXiKanp2uOeI1MftTxudzeRha/TPmR+KR2eHg4BL68vBxGjuRI4yfFyRPheIRCfZIP30/g4ljn5+dT8e/s7FSu+vgR3AM/OzsLj/3ENnlVx/8o/J3DBEaFL6+Rr9X+7NPP+FNT/9Q2+SlsPp8P25Lr/Hp+LPmJrO/j+/rXxOvq4Tp+rSV+zbW2J5dGvsYvP+Pb21F/b2/P9vf3wxWalZWVyjaf6xcWFqy3t7eyzmdun71XV1fDiBSf2Dp/9/C5GfUtE/3z14+EeNz51X9S6+jo+BJXckD4ECV/cgtNhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA89ZvYDxG2NNqHQE5MAAAAASUVORK5CYII="
}
h += `<div class="card" data="${item.path}" title="${item.path}">
<div class="rect">
<img src="${src}" style="width:190px">
<div class="tip">${get_filename(item.path)}</div>
</div>
</div>`
}
$(".card-list").html(h);
} catch (e) {
//console.log("not found")
fs.writeFileSync(fullPath, '{"history":[]}')
}
//layer.msg('Hello World');
$("#openfile").click(function () {
OpenDialog();
});
$("#new1").click(function () {
ipcRenderer.send('open-design-page', "", 1);
});
$("#new2").click(function () {
ipcRenderer.send('open-design-page', "", 2);
});
$(".card-list").on("click", '.card', function () {
console.log($(this).attr("data"))
try {
fsData = fs.readFileSync(fullPath);
let soonData = fs.readFileSync($(this).attr("data"))
let j = JSON.parse(soonData.toString());
let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
ipcRenderer.send('open-design-page', $(this).attr("data"), type);
} catch (e) {
layer.msg(language_str("noFile"));//当前文件不存在
let j = JSON.parse(fsData.toString());
for (let index in j.history) {
if (j.history[index].path == $(this).attr("data")) {
//here
j.history.splice(index, 1);
break;
}
}
console.log(j);
fs.writeFileSync(fullPath, JSON.stringify(j))
let h = "";
for (let item of j.history) {
let src = ""
try {
let fs1Data = fs.readFileSync(item.path);
let _j = JSON.parse(fs1Data.toString());
src = _j.fp;
} catch (e) {
//src = "data:image/png;base64,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";
src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAB3CAYAAAC9k/rhAAAEW0lEQVR4nO3avy9rfxzH8Xdv7iAmYmEkEomZlUQstQoDk19dDBLW2gyWSgwWqfgDhEXCYunqRyQSg0QYDLVhwXZu3p+v0++po9/r3u+9SfX1fCQnbc85SuPp9H1OZaIoigwQ841fOBQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiQRPiR959de7fX11crlcljX2tpqLS0tqX2S7u/v7eXlJazp7OxMbUedihpYoVCI/CWWSqWfvsiHh4eoWCyG/ZNLLpeLLi8vU/ufnJxE2Wy2al9/nPxefv/9871f/Gf8SPyz11ri7xNvv7m5CY8/+5prPW9yaWQc8c3s8fHRJiYm7PDwMDzO5/PhaH90dGSbm5thKZVKNjAwELbf3t5af39/uJ/L5aynp8eurq7Cfv4cyX1Rpzji/7ufH7HL5XLVtoODg9RRNX5n8NukeL2/S3zk/fP8l189cv/uEf8zP0sjkj+59aP90tJSuL+xsWHt7e1V27PZrBUKhXD/9PQ03D49PVW2+zlBbHR0NBztJycnU98H9UV+1Lm+vg63PrLUOjmNxxYffcbGxqyvry88np2dtd3dXZuamgpf293d/eVGnLu7u9Q6++SJ/Vcmf8R/fn4Otz6n19LW1ha2+Axvb38IxWIx3PeZfnx8PMz8HsvW1lZ4F/lTBgcHLZPJVC1ra2t/9Pm7urpSy8XFRWrfRiJ/xP9dMzMzNjQ0FMaf7e3tyomxvwscHx/b+vq6NTU11f3riE/k32tubk6tayTy4ce/YB9jFhcXU9stMQ74OJTk440vPv749fzz83MbGRkJ7wxzc3OVkej/+NtXiKanp2uOeI1MftTxudzeRha/TPmR+KR2eHg4BL68vBxGjuRI4yfFyRPheIRCfZIP30/g4ljn5+dT8e/s7FSu+vgR3AM/OzsLj/3ENnlVx/8o/J3DBEaFL6+Rr9X+7NPP+FNT/9Q2+SlsPp8P25Lr/Hp+LPmJrO/j+/rXxOvq4Tp+rSV+zbW2J5dGvsYvP+Pb21F/b2/P9vf3wxWalZWVyjaf6xcWFqy3t7eyzmdun71XV1fDiBSf2Dp/9/C5GfUtE/3z14+EeNz51X9S6+jo+BJXckD4ECV/cgtNhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA9JhA89ZvYDxG2NNqHQE5MAAAAASUVORK5CYII="
}
h += `<div class="card" data="${item.path}" title="${item.path}">
<div class="rect">
<img src="${src}" style="width:190px">
<div class="tip">${get_filename(item.path)}</div>
</div>
</div>`
}
$(".card-list").html(h);
}
});
});
function OpenDialog() {
dialog.showOpenDialog({
title: language_str("selectFile"),
buttonLabel: language_str("comfirm"),
filters: [
{ name: language_str("SDFile"), extensions: ['soon'] },
]
}).then(result => {
console.log(result.canceled)
console.log(result.filePaths)
if (result.canceled || !result.filePaths[0]) return;
let soonData = fs.readFileSync(result.filePaths[0])
let j = JSON.parse(soonData.toString());
let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
ipcRenderer.send('open-design-page', result.filePaths[0], type);
//console.log(result.filePaths)
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>