okooooooo/msime-windows
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor vertical ui

Browse Source
This commit is contained in:
fanlumaster committed 2025-11-09 18:00:13 +08:00
1 parent f08b0ba2da
commit af53ff483f
6 files changed
+356
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui-html/webview2/candwnd/assets/ziranma.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

ui-html/webview2/candwnd/assets/ziranmabak01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

ui-html/webview2/candwnd/assets/ziranmabak02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

ui-html/webview2/candwnd/body/vertical_candidate_window_dark.html
+54
View File
@@ -0,0 +1,54 @@
<!--0Anchor-->
<div class="row pinyin">
<div class="text">{0}</div>
<div class="hidden-pinyin">n</div>
</div>
<!--1Anchor-->
<div class="row-wrapper">
<div class="row cand first">
<div class="text">1 {1}</div>
</div>
</div>
<!--2Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">2 {2}</div>
</div>
</div>
<!--3Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">3 {3}</div>
</div>
</div>
<!--4Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">4 {4}</div>
</div>
</div>
<!--5Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">5 {5}</div>
</div>
</div>
<!--6Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">6 {6}</div>
</div>
</div>
<!--7Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">7 {7}</div>
</div>
</div>
<!--8Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">8 {8}</div>
</div>
</div>
<!--9Anchor-->
ui-html/webview2/candwnd/body/vertical_candidate_window_dark_measure.html
+54
View File
@@ -0,0 +1,54 @@
<!--0Anchor-->
<div class="row pinyin">
<div class="text">{0}</div>
<div class="hidden-pinyin">n</div>
</div>
<!--1Anchor-->
<div class="row-wrapper">
<div class="row cand first">
<div class="text">1 {1}</div>
</div>
</div>
<!--2Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">2 {2}</div>
</div>
</div>
<!--3Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">3 {3}</div>
</div>
</div>
<!--4Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">4 {4}</div>
</div>
</div>
<!--5Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">5 {5}</div>
</div>
</div>
<!--6Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">6 {6}</div>
</div>
</div>
<!--7Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">7 {7}</div>
</div>
</div>
<!--8Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">8 {8}</div>
</div>
</div>
<!--9Anchor-->
ui-html/webview2/candwnd/vertical_candidate_window_dark.html
+248
View File
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>(IME)VCandWnd</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
height: 100vh;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: transparent;
}
.containerParent {
width: fit-content;
}
.container {
margin-top: 0px;
margin-left: 0px;
background: #202020;
/* background: url("https://appassets/background.jpg"); */
padding: 2px;
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
min-width: 7em;
width: fit-content;
user-select: none;
border: 1.5px solid #9b9b9b2e;
}
.row {
justify-content: space-between;
padding: 2px;
padding-right: 12px;
padding-top: 0;
padding-bottom: 0;
margin-top: 2px;
}
.cand {
border-radius: 4px;
}
.hover-active .cand:hover {
background-color: #414141;
}
.row-wrapper {
position: relative;
}
.first {
background-color: #3e3e3eb9;
border-radius: 4px;
}
.first::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 0.8em;
width: 0.2em;
background: #6b69d6;
border-radius: 8px;
}
.text {
padding-left: 8px;
color: #e9e8e8;
}
.pinyin {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hidden-pinyin {
visibility: hidden;
}
.below-img {
margin-top: 6px;
width: 500px;
height: auto;
}
</style>
<script>
let a = false;
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('mousemove', function () {
if (a === true) {
const container = document.getElementById('container');
container.classList.add('hover-active');
}
a = true;
});
});
window.ClearState = function () {
a = false;
const container = document.getElementById('container');
container.classList.remove('hover-active');
}
</script>
</head>
<body>
<div id="realBody">
<div class="containerParent" id="realContainerParent">
<div class="container" id="realContainer">
<!--0Anchor-->
<div class="row pinyin">
<div class="text">ni</div>
<div class="hidden-pinyin">n</div>
</div>
<!--1Anchor-->
<div class="row-wrapper">
<div class="row cand first">
<div class="text">1 你你(rX)</div>
</div>
</div>
<!--2Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">2 什么(rP)</div>
</div>
</div>
<!--3Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">3 量(oA)</div>
</div>
</div>
<!--4Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">4 牛(pA)</div>
</div>
</div>
<!--5Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">5 仙(rE)</div>
</div>
</div>
<!--6Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">6 可(dK)</div>
</div>
</div>
<!--7Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">7 木(aN)</div>
</div>
</div>
<!--8Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">8 无(aV)</div>
</div>
</div>
<!--9Anchor-->
</div>
<img src="https://candwnd/assets/ziranma.png" alt="" class="below-img">
<!-- <img src="./assets/ziranma.png" alt="" class="below-img"> -->
</div>
</div>
<div id="measureBody" style="visibility: hidden;">
<div class="containerParent" id="measureContainerParent">
<div class="container" id="measureContainer">
<!--0Anchor-->
<div class="row pinyin">
<div class="text">{0}</div>
<div class="hidden-pinyin">n</div>
</div>
<!--1Anchor-->
<div class="row-wrapper">
<div class="row cand first">
<div class="text">1 {1} 你</div>
</div>
</div>
<!--2Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">2 {2} 我</div>
</div>
</div>
<!--3Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">3 {3} 什么</div>
</div>
</div>
<!--4Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">4 {4} 量子</div>
</div>
</div>
<!--5Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">5 {5} 可恶</div>
</div>
</div>
<!--6Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">6 {6} 不是</div>
</div>
</div>
<!--7Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">7 {7} 那么</div>
</div>
</div>
<!--8Anchor-->
<div class="row-wrapper">
<div class="row cand">
<div class="text">8 {8} 如果</div>
</div>
</div>
<!--9Anchor-->
</div>
<img src="https://candwnd/assets/ziranma.png" alt="" class="below-img">
<!-- <img src="./assets/ziranma.png" alt="" class="below-img"> -->
</div>
</div>
</body>
</html>