Skip to content

Commit 5d953e6

Browse files
kagolautofix-ci[bot]
kagol
and
autofix-ci[bot]
committed
docs(projects): optimize imitate yuque (#218)
* docs(projects): optimize imitate yuque * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 882d567 commit 5d953e6

File tree

7 files changed

+1366
-847
lines changed

7 files changed

+1366
-847
lines changed

‎.github/workflows/auto-deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ jobs:
4949
source: ./packages/docs/fluent-editor/.vitepress/dist
5050
destination: ./_site
5151
- name: Upload artifact
52-
uses: actions/upload-pages-artifact@v1
52+
uses: actions/upload-pages-artifact@v3
5353

5454
# Deployment job
5555
deploy:
@@ -61,4 +61,4 @@ jobs:
6161
steps:
6262
- name: Deploy to GitHub Pages
6363
id: deployment
64-
uses: actions/deploy-pages@v1
64+
uses: actions/deploy-pages@v4

‎packages/projects/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@opentiny/fluent-editor": "workspace:^",
12+
"@opentiny/fluent-editor": "3.25.0",
13+
"@tailwindcss/vite": "^4.0.0",
14+
"sass": "^1.47.0",
15+
"tailwindcss": "^4.0.0",
1316
"vue": "^3.5.13",
1417
"vue-router": "4"
1518
},

‎packages/projects/src/style.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
@import '@opentiny/fluent-editor/style.scss';
1+
@import 'tailwindcss';
2+
@import '@opentiny/fluent-editor/style.css';

‎packages/projects/src/views/home/Home.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<ul>
3-
<li>
4-
<RouterLink to="/yuque">
5-
语雀
6-
</RouterLink>
7-
</li>
8-
</ul>
2+
<div class="flex justify-center m-8">
3+
<ul class="list-disc">
4+
<li>
5+
<RouterLink to="/yuque">
6+
仿语雀
7+
</RouterLink>
8+
</li>
9+
</ul>
10+
</div>
911
</template>

‎packages/projects/src/views/yuque/YuQue.vue‎

Lines changed: 186 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,196 @@ let editor
77
onMounted(() => {
88
editor = new FluentEditor('#editor', {
99
theme: 'snow',
10+
modules: {
11+
toolbar: {
12+
container: '#toolbar',
13+
},
14+
},
1015
})
1116
})
1217
</script>
1318

1419
<template>
15-
<RouterLink to="/">
16-
&lt;返回
17-
</RouterLink>
18-
<div id="editor">
19-
<p>Hello <strong>TinyEditor</strong>!</p>
20+
<div class="fixed h-[52px] w-full flex items-center pl-[16px]">
21+
<RouterLink to="/">
22+
&lt;返回
23+
</RouterLink>
24+
</div>
25+
<div id="toolbar" class="fixed h-[42px] w-full top-[52px] !border-l-0 !border-r-0 !border-[rgba(0,0,0,0.04)] text-center">
26+
<span class="ql-formats">
27+
<button class="ql-undo" />
28+
<button class="ql-redo" />
29+
<button class="ql-format-painter" />
30+
<button class="ql-clean" />
31+
</span>
32+
<span class="ql-formats">
33+
<select class="ql-header">
34+
<option value="" />
35+
<option value="1" />
36+
<option value="2" />
37+
<option value="3" />
38+
<option value="4" />
39+
<option value="5" />
40+
<option value="6" />
41+
</select>
42+
<select class="ql-size">
43+
<option value="12px" />
44+
<option value="13px" />
45+
<option value="14px" />
46+
<option value="15px" />
47+
<option value="16px" />
48+
<option value="19px" />
49+
<option value="22px" />
50+
<option value="24px" />
51+
<option value="29px" />
52+
<option value="32px" />
53+
<option value="40px" />
54+
<option value="48px" />
55+
</select>
56+
<button class="ql-bold" />
57+
<button class="ql-italic" />
58+
<button class="ql-strike" />
59+
<button class="ql-underline" />
60+
<button class="ql-script" value="super" />
61+
<button class="ql-script" value="sub" />
62+
<button class="ql-code" />
63+
</span>
64+
<span class="ql-formats">
65+
<select class="ql-color">
66+
<option value="rgb(0, 0, 0)" />
67+
<option value="rgb(38, 38, 38)" />
68+
<option value="rgb(88, 90, 90)" />
69+
<option value="rgb(138, 143, 141)" />
70+
<option value="rgb(216, 218, 217)" />
71+
<option value="rgb(231, 233, 232)" />
72+
<option value="rgb(239, 240, 240)" />
73+
<option value="rgb(223, 42, 63)" />
74+
<option value="rgb(237, 116, 12)" />
75+
<option value="rgb(236, 170, 4)" />
76+
<option value="rgb(251, 222, 40)" />
77+
<option value="rgb(116, 182, 2)" />
78+
<option value="rgb(29, 192, 201)" />
79+
<option value="rgb(17, 124, 238)" />
80+
</select>
81+
<select class="ql-background">
82+
<option value="rgb(0, 0, 0)" />
83+
<option value="rgb(38, 38, 38)" />
84+
<option value="rgb(88, 90, 90)" />
85+
<option value="rgb(138, 143, 141)" />
86+
<option value="rgb(216, 218, 217)" />
87+
<option value="rgb(231, 233, 232)" />
88+
<option value="rgb(239, 240, 240)" />
89+
<option value="rgb(223, 42, 63)" />
90+
<option value="rgb(237, 116, 12)" />
91+
<option value="rgb(236, 170, 4)" />
92+
<option value="rgb(251, 222, 40)" />
93+
<option value="rgb(116, 182, 2)" />
94+
<option value="rgb(29, 192, 201)" />
95+
<option value="rgb(17, 124, 238)" />
96+
</select>
97+
</span>
98+
<span class="ql-formats">
99+
<select class="ql-align">
100+
<option value="" />
101+
<option value="center" />
102+
<option value="right" />
103+
<option value="justify" />
104+
</select>
105+
<button class="ql-list" value="ordered" />
106+
<button class="ql-list" value="bullet" />
107+
<button class="ql-indent" value="+1" />
108+
<button class="ql-indent" value="-1" />
109+
<select class="ql-lineheight">
110+
<option value="1" />
111+
<option value="1.15" />
112+
<option value="1.5" />
113+
<option value="2" />
114+
<option value="2.5" />
115+
<option value="3" />
116+
</select>
117+
</span>
118+
<span class="ql-formats">
119+
<button class="ql-list" value="check" />
120+
<button class="ql-link" />
121+
<button class="ql-blockquote" />
122+
<button class="ql-divider" />
123+
</span>
124+
</div>
125+
<div id="editor" class="!mt-[52px] !border-0 max-w-[750px] !ml-auto !mr-auto">
126+
<p>这是一篇测试文档。</p>
20127
</div>
21128
</template>
129+
130+
<style lang="scss">
131+
.ql-editor {
132+
min-height: calc(100vh - 94px);
133+
134+
p {
135+
line-height: 1.74;
136+
margin-bottom: 7.83px !important;
137+
}
138+
139+
hr {
140+
margin: 12px 0;
141+
color: #e7e9e8;
142+
}
143+
144+
h1,
145+
h2,
146+
h3,
147+
h4,
148+
h5,
149+
h6 {
150+
color: #262626;
151+
font-weight: 700;
152+
}
153+
154+
h1 {
155+
font-size: 28px !important;
156+
line-height: 38px !important;
157+
margin-top: 38px !important;
158+
margin-bottom: 19px !important;
159+
}
160+
161+
h2 {
162+
font-size: 24px !important;
163+
line-height: 34px !important;
164+
margin-top: 34px !important;
165+
margin-bottom: 17px !important;
166+
}
167+
168+
h3 {
169+
font-size: 20px !important;
170+
line-height: 30px !important;
171+
margin-top: 30px !important;
172+
margin-bottom: 15px !important;
173+
}
174+
175+
h4 {
176+
font-size: 16px !important;
177+
line-height: 26px !important;
178+
margin-top: 26px !important;
179+
margin-bottom: 13px !important;
180+
}
181+
182+
h5,
183+
h6 {
184+
font-size: 15px !important;
185+
line-height: 24px !important;
186+
margin-top: 24px !important;
187+
margin-bottom: 12px !important;
188+
}
189+
190+
blockquote {
191+
margin: 0 !important;
192+
border-left: solid 2px #d8dad9 !important;
193+
padding-left: 10px !important;
194+
padding-bottom: 7.83px !important;
195+
}
196+
197+
a {
198+
color: #117cee !important;
199+
text-decoration: none !important;
200+
}
201+
}
202+
</style>

‎packages/projects/vite.config.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import path from 'node:path'
1+
import tailwindcss from '@tailwindcss/vite'
22
import vue from '@vitejs/plugin-vue'
33
import { defineConfig } from 'vite'
44

5-
const fluentEditorRoot = path.resolve(__dirname, '../fluent-editor')
65
export default defineConfig({
76
base: '/tiny-editor/projects/',
8-
plugins: [vue()],
9-
resolve: {
10-
alias: [
11-
{
12-
find: '@opentiny/fluent-editor/style.scss',
13-
replacement: path.resolve(fluentEditorRoot, 'src/assets/style.scss'),
14-
},
15-
],
16-
},
7+
plugins: [
8+
vue(),
9+
tailwindcss(),
10+
],
1711
build: {
1812
outDir: '../docs/fluent-editor/.vitepress/dist/projects',
1913
},

0 commit comments

Comments
 (0)