Skip to content

Commit 53dd17e

Browse files
terwerterwer
authored
Merge pull request #616 from terwer/dev
feat: new UI
2 parents aee3f9b + 752dbfa commit 53dd17e

30 files changed

+979
-304
lines changed

‎apps/app/assets/css/db.styl‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
div[data-av-type="table"]
2+
display flex
3+
flex-direction column
4+
5+
/* 整体 Tabs 样式 */
6+
.db-tabs
7+
display flex
8+
flex-direction row
9+
border-bottom 2px solid #007bff
10+
margin-bottom 8px
11+
padding-bottom 4px
12+
flex-wrap wrap
13+
14+
/* Tab 标题样式 */
15+
.db-tabs-title
16+
font-size 18px
17+
font-weight bold
18+
margin-bottom 8px
19+
color #333
20+
21+
/* 每个 Tab 按钮样式 */
22+
.db-tab-button
23+
padding 6px 12px
24+
cursor pointer
25+
background-color transparent
26+
border none
27+
border-radius 4px
28+
margin-right 4px
29+
font-size 14px
30+
color #333
31+
transition background-color 0.2s ease, color 0.2s ease
32+
outline none
33+
34+
&.active
35+
background-color #f0f8ff
36+
color #007bff
37+
38+
&:hover
39+
background-color #eef6ff
40+
41+
/* Tab 内容容器样式 */
42+
.db-tab-contents
43+
display flex
44+
flex-direction column
45+
width 100%
46+
padding 0 12px
47+
overflow-y auto
48+
overflow-x hidden
49+
50+
/* 每个 Tab 内容 */
51+
.db-tab-content
52+
display none
53+
flex 1 0 auto
54+
opacity 0
55+
transition opacity 0.3s ease
56+
57+
&.active
58+
display block !important
59+
opacity 1
60+
61+
/* 表格样式 */
62+
.db-data-table
63+
width 100%
64+
border-collapse collapse
65+
margin-top 12px
66+
font-size 14px
67+
border-radius 8px
68+
overflow hidden
69+
box-shadow 0 2px 6px rgba(0, 0, 0, 0.1)
70+
71+
th, td
72+
padding 10px 12px
73+
text-align left
74+
border-bottom 1px solid #f0f0f0
75+
transition background-color 0.2s ease
76+
77+
th
78+
background-color #f9f9f9
79+
color #666
80+
81+
td
82+
background-color #fff
83+
color #333
84+
85+
tr:hover
86+
background-color #f9f9f9
87+
88+
/* 暗黑模式 */
89+
html[data-theme-mode="dark"]
90+
.db-tabs
91+
border-bottom 2px solid #4aaef8
92+
93+
.db-tabs-title
94+
color #ddd
95+
96+
.db-tab-button
97+
color #ddd
98+
99+
&.active
100+
background-color #2a3b4d
101+
color #4aaef8
102+
103+
&:hover
104+
background-color #33475b
105+
106+
.db-data-table
107+
box-shadow 0 2px 6px rgba(255, 255, 255, 0.1)
108+
109+
th, td
110+
border-bottom 1px solid #444
111+
112+
th
113+
background-color #2c3e50
114+
color #bbb
115+
116+
td
117+
background-color #1e2d3a
118+
color #ddd
119+
120+
tr:hover
121+
background-color #2c3e50
122+
123+
/* 数据库选项类型数据样式 */
124+
.db-select-item
125+
padding 2px 4px
126+
border-radius 3px
127+
128+
.db-phone-button-group
129+
display inline-flex
130+
align-items center
131+
padding 4px 8px
132+
//background-color #f9f9f9
133+
border-radius 4px
134+
cursor pointer
135+
transition background-color 0.3s ease
136+
137+
//&:hover
138+
// background-color #e6f7ff
139+
140+
.db-phone-icon
141+
margin-right 4px
142+
font-size 14px
143+
color #1890ff
144+
145+
.db-phone-label
146+
margin-right 4px
147+
font-weight bold
148+
color #595959
149+
150+
.db-phone-value
151+
color inherit

‎apps/app/assets/css/fold.styl‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* 按钮样式 */
2+
.fold-block-toggle-button
3+
display inline-block
4+
padding 2px 6px
5+
font-size 12px !important /* 字体大小固定为12px */
6+
border-radius 3px /* 边框圆角 */
7+
cursor pointer /* 鼠标指针为手形 */
8+
line-height 12px /* 行高为12px，确保按钮内文本垂直居中 */
9+
font-weight bold /* 加粗字体 */
10+
margin-right 8px /* 按钮右边距 */
11+
width 32px /* 固定宽度，确保按钮大小一致 */
12+
color #888 /* 按钮文字颜色 */
13+
text-align center /* 文本居中对齐 */
14+
&:hover
15+
color #666 /* 悬停时文字颜色变深 */
16+
&:active
17+
color #444 /* 点击时文字颜色进一步变深 */

‎apps/app/assets/css/index.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ body
1818
@import "./siyuan.styl"
1919
// vdoing 主题样式
2020
@import "./vdoing.styl"
21+
// 数据库
22+
@import "./db.styl"
23+
// 折叠块
24+
@import "./fold.styl"
2125

2226
// 其他修复样式
2327

‎apps/app/assets/css/siyuan.styl‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@
2323
height calc(100% - 34px)
2424
top 34px
2525

26-
.protyle-wysiwyg [data-node-id] [spellcheck]
27-
min-height 26px
26+
// fix database
27+
// v6.2.0+
28+
//.protyle-wysiwyg [data-node-id] [spellcheck]
29+
// min-height 26px
2830

2931
.protyle-wysiwyg .li
3032
min-height 34px

‎apps/app/components/static/Detail.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ await getSetting()
6969
// SEO
7070
if (!props.overrideSeo) {
7171
const titleSign = " - " + t("blog.share")
72-
const title = `${formData.post?.title ?? "404 Not Found"}${props.showTitleSign ? titleSign : ""}`
72+
const title = `${formData.post?.title ?? t("blog.index.no.title") + " - " + docId}${props.showTitleSign ? titleSign : ""}`
7373
const desc = getSummery(formData?.post?.description ?? "")
7474
const headImage = getFirstImageSrc(formData?.post?.description ?? "")
7575
const seoMeta = {

‎apps/app/components/static/content/Main.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,16 @@ const VNode = () =>
3939
v-highlight
4040
v-sbeauty
4141
v-sdomparser
42+
v-db
43+
v-embedblock
44+
v-fold
4245
class="protyle-wysiwyg protyle-wysiwyg--attr"
4346
spellcheck="false"
4447
contenteditable="false"
4548
data-doc-type="NodeDocument"
4649
:data-page-id="props.post.postid"
50+
:data-dataviews="JSON.stringify(props.post.dataViews)"
51+
:data-embedblocks="JSON.stringify(props.post.embedBlocks)"
4752
>
4853
<VNode />
4954
</div>

‎apps/app/components/static/content/left/Sidebar.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const items = computed(() => {
6464
<el-scrollbar class="sidebar-container">
6565
<!-- 顶部标题 -->
6666
<div class="sidebar-header">
67-
{{ t("static.outline") }}
67+
{{ t("static.docTree") }}
6868
</div>
6969
<!-- 菜单部分 -->
7070
<el-menu class="sidebar-menu" :default-openeds="expandedIds" :default-active="activeIndex">
@@ -84,11 +84,13 @@ const items = computed(() => {
8484
border-right 1px solid var(--el-menu-border-color)
8585
8686
.sidebar-header
87+
margin-top: 20px
8788
font-size 16px
8889
font-weight bold
89-
text-align center
90+
//text-align center
91+
margin-left 20px
9092
padding 10px 0
91-
border-bottom 1px solid var(--el-menu-border-color)
93+
//border-bottom 1px solid var(--el-menu-border-color)
9294
9395
.sidebar-menu
9496
border none

‎apps/app/components/static/content/right/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ onUnmounted(() => {
152152
/* 切换按钮 */
153153
.toggle-btn
154154
position fixed /* 按钮始终固定 */
155-
top 16px
155+
top 28px
156156
right 20px
157157
z-index 100
158158
cursor pointer

‎apps/app/components/static/content/right/Outline.vue‎

Lines changed: 57 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,33 +49,55 @@ const getItemLevel = (item) => {
4949
<template>
5050
<div class="outline">
5151
<div class="outline-title">
52-
<a class="outline-title-link"> {{ t("static.outline") }} </a>
52+
<a class="outline-title-link">{{ t("static.outline") }}</a>
5353
</div>
54-
<div v-for="(item, index) in outlineData" :key="index">
55-
<static-content-right-outline-item
56-
:item="item"
57-
:max-depth="maxDepth"
58-
:root-level="getRootLevel()"
59-
:is-root="true"
60-
:active-text="activeText"
61-
/>
54+
<div class="outline-content">
55+
<div
56+
v-for="(item, index) in outlineData"
57+
:key="index"
58+
class="outline-item"
59+
>
60+
<static-content-right-outline-item
61+
:item="item"
62+
:max-depth="maxDepth"
63+
:root-level="getRootLevel()"
64+
:is-root="true"
65+
:active-text="activeText"
66+
/>
67+
</div>
6268
</div>
6369
</div>
6470
</template>
6571

6672
<style lang="stylus" scoped>
6773
.outline
6874
width: 240px
75+
height: 100vh
6976
background-color: #fff
70-
padding: 10px
7177
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1)
72-
z-index: 9
73-
overflow-y auto
74-
height: 100vh
75-
position: relative
78+
border: 1px solid #eaeaea
79+
display: flex
80+
flex-direction: column
81+
position fixed
82+
83+
// Dark mode styles
84+
html[data-theme-mode="dark"] &
85+
background-color: #1e1e1e
86+
border-color: #3a3a3a
7687
7788
.outline-title
78-
margin-bottom: 1rem
89+
flex-shrink: 0
90+
padding: 10px 20px
91+
background-color: inherit
92+
position: sticky
93+
top: 0
94+
z-index: 10
95+
//border-bottom: 1px solid #eaeaea
96+
97+
// Dark mode styles
98+
html[data-theme-mode="dark"] &
99+
border-bottom-color: #3a3a3a
100+
79101
.outline-title-link
80102
color: #333
81103
font-weight: 600
@@ -84,4 +106,24 @@ const getItemLevel = (item) => {
84106
transition: color 0.3s ease
85107
&:hover
86108
color: #007bff
109+
110+
// Dark mode styles
111+
html[data-theme-mode="dark"] &
112+
color: #ddd
113+
&:hover
114+
color: #3399ff
115+
116+
.outline-content
117+
flex-grow: 1
118+
overflow-y: auto
119+
background-color: inherit
120+
padding: 10px
121+
122+
// Dark mode styles
123+
html[data-theme-mode="dark"] &
124+
background-color: #1e1e1e
125+
126+
.outline-item
127+
margin-bottom: 8px
128+
padding-left: 5px
87129
</style>

‎apps/app/components/static/content/right/OutlineItem.vue‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,19 +106,36 @@ const scrollToSection = (id) => {
106106
margin-bottom: 8px
107107
padding-left: 5px
108108
109+
// Dark mode styles
110+
html[data-theme-mode="dark"] &
111+
color: #ccc
112+
109113
.item-link
110114
color: #333
111115
text-decoration: none
112116
cursor: pointer
113117
transition: color 0.2s ease
114118
115-
.item-link:hover
116-
color: #1890ff
117-
font-weight: bold
119+
&:hover
120+
color: #1890ff
121+
font-weight: bold
122+
123+
// Dark mode styles
124+
html[data-theme-mode="dark"] &
125+
color: #bbb
126+
&:hover
127+
color: #40a9ff
118128
119129
.nested-items
120-
margin-left: 20px
130+
&:first-child
131+
margin-left 0
132+
&:not(:first-child)
133+
margin-left 20px
121134
122135
.active
123136
color: #1890ff
137+
138+
// Dark mode styles
139+
html[data-theme-mode="dark"] &
140+
color: #40a9ff
124141
</style>

0 commit comments

Comments
 (0)