Skip to content

Commit

Permalink
feat: ui细节调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuanqb
xuanqb committed Mar 22, 2024
1 parent 0811cae commit adc5635
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 11 deletions.
2 changes: 1 addition & 1 deletion components/chapter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ Vue.component('chapter', {
<div v-if="item.subMenu && item.subMenu.length>0">
<li class="chapter-item" :class="item.expanded?'expanded':''"
@click="item.expanded = !item.expanded">
<a href="#">{{item.menuName}}</a>
<a class="toggle">
<div>❱</div>
</a>
<a>{{item.menuName}}</a>
</li>
<li>
<ol class="section">
Expand Down
52 changes: 47 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,54 @@
group-values="columns" group-label="status" :group-select="true" :max-height="500"
track-by="value" label="name" select-label="" deselect-label="" @input="loadColumn"
@open="handleSelectOpen">
<!-- <template slot="singleLabel" slot-scope="{ option }">
{{ option.name }}
</template> -->
</multiselect>
<div class="header-title">
<span class="ht-left">
<svg width="16" height="16" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"
class="larkui-icon larkui-icon-directory">
<path
d="M88 40.8c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L88 60.8H65.997L66 61v47c0 5.43 4.327 9.848 9.72 9.996L76 118h11c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L87 138H76c-3.506 0-6.872-.602-10-1.707V186c0 5.43 4.327 9.848 9.72 9.996L76 196h11c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L87 216H76c-16.403 0-29.731-13.164-29.996-29.504L46 186V61l.002-.2H26c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L26 40.8h62Zm49.983-.653 92 .353c5.523.021 9.983 4.516 9.962 10.038-.02 5.43-4.365 9.832-9.758 9.96l-.28.002-92-.354c-5.523-.02-9.983-4.515-9.962-10.038.021-5.43 4.365-9.831 9.759-9.959l.28-.002Zm0 78 92 .353c5.523.021 9.983 4.516 9.962 10.038-.02 5.43-4.365 9.832-9.758 9.96l-.28.002-92-.354c-5.523-.02-9.983-4.515-9.962-10.038.021-5.43 4.365-9.831 9.759-9.959l.28-.002Zm0 78 92 .353c5.523.021 9.983 4.516 9.962 10.038-.02 5.43-4.365 9.832-9.758 9.96l-.28.002-92-.354c-5.523-.02-9.983-4.515-9.962-10.038.021-5.43 4.365-9.831 9.759-9.959l.28-.002Z"
fill="currentColor" fill-rule="nonzero"></path>
</svg>
<span>目录</span>
</span>
<div class="ht-right">
<span class="position">
<span title="目录定位" @click="positionMenuNode">
<!-- 定位 -->
<svg width="1em" height="1em" viewBox="0 0 14.625 14.625"
xmlns="http://www.w3.org/2000/svg"
class="larkui-icon larkui-icon-directory-position BookCatalog-module_icon_7p-9h">
<path
d="M7.313 0c.345 0 .625.28.625.625v.783a5.94 5.94 0 0 1 5.28 5.279H14a.625.625 0 1 1 0 1.25l-.783.001a5.94 5.94 0 0 1-5.279 5.28V14a.625.625 0 1 1-1.25 0l-.001-.783a5.94 5.94 0 0 1-5.28-5.279H.626a.625.625 0 1 1 0-1.25l.783-.001a5.94 5.94 0 0 1 5.279-5.28V.626c0-.345.28-.625.625-.625Zm.625 2.666v1.709a.625.625 0 1 1-1.25 0V2.666a4.69 4.69 0 0 0-4.022 4.021h1.709a.625.625 0 1 1 0 1.25H2.666a4.69 4.69 0 0 0 4.021 4.022V10.25a.625.625 0 1 1 1.25 0v1.709a4.69 4.69 0 0 0 4.022-4.021H10.25a.625.625 0 1 1 0-1.25h1.709a4.69 4.69 0 0 0-4.021-4.022Z"
fill="currentColor" fill-rule="nonzero"></path>
</svg>
</span>
<span v-if="!globalIsExpanded" @click="foldMenus(false)" title="全部折叠">
<!-- 折叠 -->
<svg width="1em" height="1em" viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
class="larkui-icon larkui-icon-catalog-expand CatalogTreeCollapseTrigger-module_icon_k49Ct">
<path
d="M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z"
fill="currentColor" fill-rule="evenodd"></path>
</svg>
</span>
<span v-else @click="foldMenus(true)" title="全部展开">
<!-- 展开 -->
<svg width="1em" height="1em" viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
class="larkui-icon larkui-icon-catalog-fold CatalogTreeCollapseTrigger-module_icon_k49Ct">
<path
d="M26 41h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 155h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm93-78h111c5.523 0 10 4.477 10 10s-4.477 10-10 10H119c-5.523 0-10-4.477-10-10s4.477-10 10-10ZM16.4 103.318v49.764a8.333 8.333 0 0 0 14.226 5.892l24.881-24.881a8.333 8.333 0 0 0 0-11.786L30.626 97.426a8.333 8.333 0 0 0-14.226 5.892Z"
fill="currentColor" fill-rule="evenodd"></path>
</svg>
</span>
</span>
</div>
</div>
</div>
<div>
<div class="menu_list_box">
<chapter :menus="menus" />
</div>
</div>
Expand Down Expand Up @@ -240,7 +282,7 @@
</div>
</div>
</div>
<script src="./style/core.js?v=23"></script>
<script src="./style/core.js?v=24"></script>
</div>
</body>

Expand Down
27 changes: 26 additions & 1 deletion style/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ new Vue({
// 专栏和菜单的映射
columnMenuMap: {},
// 屏蔽标题中的字符串
isDialogVisible: false
isDialogVisible: false,
// 全局折叠
globalIsExpanded: false
},
watch: {
'selectColumn.name': (n, o) => {
Expand Down Expand Up @@ -94,6 +96,28 @@ new Vue({
window.removeEventListener('resize', this.showOrHideSideBar);
},
methods: {
positionMenuNode() {
if (this.globalIsExpanded) {
this.foldMenus(true)
}
this.$nextTick(() => {
scrollIntoView(document.querySelector('.active'))
})
},
// 折叠菜单
foldMenus(isExpanded) {
function fondMenu(menu) {
if (menu && menu.length > 0) {
menu.forEach(m => fondMenu(m))
}
if (menu.subMenu && menu.subMenu.length > 0) {
menu.expanded = isExpanded
fondMenu(menu.subMenu)
}
}
this.globalIsExpanded = !this.globalIsExpanded
fondMenu(this.menus)
},
// 清除缓存
clearCache() {
localStorage.removeItem(cloumuMenuProgressKey)
Expand Down Expand Up @@ -700,6 +724,7 @@ function clearColumnConfig() {
function scrollIntoView(target) {
// const target = document.querySelector('.active')
if (target) {
// target.scrollIntoView({ block: "end" });
target.scrollIntoViewIfNeeded(true);
}
}
Expand Down
36 changes: 33 additions & 3 deletions style/css/chrome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,8 +527,26 @@ ul#searchresults span.teaser em {
bottom: 0;
left: 0;
right: 0;
/* padding: 10px 10px; */
padding: 0px 10px;
padding: 10px 10px;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* padding: 0px 10px; */
}

.sidebar .menu_list_box {
flex: 1;
overflow: hidden auto;
}

.sidebar .menu_list_box::-webkit-scrollbar {
width: 4px !important;
background: transparent;
scrollbar-color: red !important;
}

.sidebar .menu_list_box::-webkit-scrollbar-thumb {
background-color: red;
}

.sidebar .sidebar-resize-handle {
Expand Down Expand Up @@ -594,6 +612,10 @@ ul#searchresults span.teaser em {
line-height: 2.2em;
}

.menu_list_box {
margin-top: -8px;
}

.chapter ol {
width: 100%;
}
Expand Down Expand Up @@ -621,7 +643,7 @@ ul#searchresults span.teaser em {
.chapter li>a.toggle {
cursor: pointer;
display: block;
margin-inline-start: auto;
/* margin-inline-start: auto; */
padding: 0 10px;
user-select: none;
opacity: 0.68;
Expand All @@ -637,10 +659,18 @@ ul#searchresults span.teaser em {
}

.chapter li.chapter-item {
width: 90%;
line-height: 1.5em;
margin-block-start: 0.6em;
}

.chapter li.chapter-item a {
/* width: 100%; */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.chapter li.expanded>a.toggle div {
transform: rotate(90deg);
}
Expand Down
28 changes: 27 additions & 1 deletion style/css/general.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,10 +358,36 @@ iframe {
.fixed-header {
position: sticky;
top: 0;
/* background-color: #fff; */
background-color: #FAFAFA;
z-index: 1;
}

.header-title {
padding: 10px 0;
display: flex;
justify-content: space-between;
}

.ht-left {
display: flex;
align-items: center;
}

.ht-right {
display: flex;
justify-content: flex-end;
align-items: center;
}

.header-title svg {
margin-right: 12px;
}

.header-title .position {
display: flex;
justify-content: center;
}

/* Dialog 蒙层样式 */
.dialog-overlay {
position: fixed;
Expand Down

0 comments on commit adc5635

Please sign in to comment.