Skip to content

Commit 8897b3b

Browse files
EncaikEncaik
committed
feat(docs): 更新首页文档内容和样式
- 修改首页标题和描述，提升用户体验 - 添加新功能介绍，突出平台特色 - 引入新的样式和组件，优化页面布局 - 移除不必要的组件，简化代码结构
1 parent f05f9d9 commit 8897b3b

4 files changed

Lines changed: 115 additions & 47 deletions

File tree

‎packages/docs/index.md‎

Lines changed: 93 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,103 @@
33
layout: home
44

55
hero:
6-
name: 'Simple-Notation'
7-
text: 'Documentation'
8-
tagline: '用于学习Simple-Notation网站使用及库使用的文档'
6+
name: '简音创作'
7+
text: '你的智能乐谱伙伴'
8+
tagline: '「灵感迸发？三秒成谱！」—— 高效易用的在线乐谱平台，让创作、学习与演奏更直观、更生动！'
99
actions:
1010
- theme: brand
11-
text: Markdown Examples
12-
link: /markdown-examples
11+
text: 🚀 立即体验
12+
link: https://www.s-n.xyz/
1313
- theme: alt
14-
text: API Examples
14+
text: 快速上手
1515
link: /api-examples
1616

1717
features:
18-
- title: Feature A
19-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
20-
- title: Feature B
21-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
22-
- title: Feature C
23-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
18+
- icon: 🎼
19+
title: 一键成谱，创作零门槛
20+
details: |
21+
- **文本转乐谱**: 输入文本，秒转专业乐谱，告别复杂操作。
22+
- **多格式支持**: 自由选择生成简谱、六线谱（吉他/尤克里里）。
23+
- **随心定制**: 和弦显示、谱面宽高、边距等细节由你掌控。
24+
- icon: 🎹
25+
title: 听见创作，看见演奏
26+
details: |
27+
- **沉浸式播放**: 同步显示钢琴、吉他、口琴动态面板，直观学习。
28+
- **音色与面板联动**: 切换音色，乐器面板自动匹配更新。
29+
- **精准播放控制**: 支持移调、分轨播放与变速，是排练学习的助手。
30+
- icon: 🛠️
31+
title: 高效创作工坊
32+
details: |
33+
- **流畅在线编辑器**: 轻松编辑音符、休止符、连音线等。
34+
- **文件导入辅助**: 上传MIDI/MP3作为参考，辅助手动扒谱或改编。
35+
- **音高检测与K歌**: 开启麦克风实时检测音高，K歌模式带音高反馈。
36+
- icon: 📚
37+
title: 精选乐谱库
38+
details: 内置精选实用乐谱（经典片段、练习曲等），点击即可编辑、播放、学习，助力日常练习与灵感激发。
39+
- icon: 📥
40+
title: 自由流转，轻松输出
41+
details: |
42+
- **无缝衔接**: 支持乐谱导入/导出，方便协作。
43+
- **高清打印**: 一键高清打印，随时分享纸质乐谱。
2444
---
45+
46+
<style>
47+
.audience-section {
48+
max-width: 960px;
49+
margin: 40px auto;
50+
text-align: center;
51+
}
52+
.audience-grid {
53+
display: flex;
54+
flex-wrap: wrap;
55+
justify-content: center;
56+
gap: 16px;
57+
margin-top: 24px;
58+
}
59+
.audience-card {
60+
background-color: var(--vp-c-bg-soft);
61+
border: 1px solid var(--vp-c-bg-soft);
62+
border-radius: 12px;
63+
padding: 16px;
64+
min-width: 180px;
65+
flex: 1;
66+
max-width: 220px;
67+
transition: border-color 0.25s, background-color 0.25s;
68+
}
69+
.audience-card:hover {
70+
border-color: var(--vp-c-brand);
71+
}
72+
.audience-card h4 {
73+
font-size: 16px;
74+
font-weight: 600;
75+
margin: 0 0 4px 0;
76+
color: var(--vp-c-brand-dark);
77+
}
78+
.audience-card p {
79+
font-size: 14px;
80+
margin: 0;
81+
color: var(--vp-c-text-2);
82+
}
83+
</style>
84+
85+
<div class="audience-section">
86+
<h2>✨ 为热爱音乐的你而生</h2>
87+
<div class="audience-grid">
88+
<div class="audience-card">
89+
<h4>创作者</h4>
90+
<p>快速捕捉灵感，高效编辑试听。</p>
91+
</div>
92+
<div class="audience-card">
93+
<h4>学习者</h4>
94+
<p>看谱+听音+学指法，三位一体突破瓶颈！</p>
95+
</div>
96+
<div class="audience-card">
97+
<h4>教师</h4>
98+
<p>便捷生成教学素材，直观演示演奏技法。</p>
99+
</div>
100+
<div class="audience-card">
101+
<h4>爱好者</h4>
102+
<p>玩转乐谱、K歌练唱，探索音乐乐趣！</p>
103+
</div>
104+
</div>
105+
</div>

‎packages/web/src/App.vue‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
<template>
2-
<Header />
3-
<!-- 网站介绍面板 -->
4-
<PanelAbout />
52
<router-view v-slot="{ Component }">
63
<keep-alive include="Home">
74
<component :is="Component" />
85
</keep-alive>
96
</router-view>
107
</template>
11-
12-
<script setup lang="ts">
13-
import Header from './components/Header.vue';
14-
import PanelAbout from './components/PanelAbout.vue';
15-
</script>

‎packages/web/src/components/Header.vue‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div v-if="isHome" class="text-center mt-32 mb-8 flex-shrink-0 py-8">
2+
<div class="text-center mt-32 mb-8 flex-shrink-0 py-8">
33
<h1
44
class="m-0 text-[3.2rem] inline-block bg-gradient-to-r from-[#ff6b3d] to-[#7b5aff] bg-clip-text text-transparent text-shadow-[2px_2px_4px_rgba(0,0,0,0.15)] font-extrabold tracking-[2px] relative pb-[15px] after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[4px] after:bg-gradient-to-r after:from-[#ff6b3d] after:to-[#7b5aff] after:rounded-sm"
55
>
@@ -55,14 +55,3 @@
5555
</div>
5656
</div>
5757
</template>
58-
59-
<script setup lang="ts">
60-
import { computed } from 'vue';
61-
import { useRouter } from 'vue-router';
62-
63-
const router = useRouter();
64-
65-
const isHome = computed(() => {
66-
return router.currentRoute.value.path === '/';
67-
});
68-
</script>

‎packages/web/src/pages/Home.vue‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<template>
2+
<Header />
3+
<!-- 网站介绍面板 -->
4+
<PanelAbout />
25
<PanelOperate
36
ref="panelOperateRef"
47
:sheet-key="editorStore.formData.info.key"
@@ -58,29 +61,32 @@ import {
5861
SNNote,
5962
} from 'simple-notation';
6063
import { shallowRef, type Ref } from 'vue';
61-
import PanelEditor from '../components/editor/PanelEditor.vue';
62-
import PanelSyntax from '../components/PanelSyntax.vue';
63-
import PanelExample from '../components/PanelExample.vue';
64-
import PanelRoadmap from '../components/PanelRoadmap.vue';
65-
import PanelOperate from '../components/PanelOperate.vue';
66-
import PanelQa from '../components/PanelQa.vue';
67-
import NoteContextMenu from '../components/NoteContextMenu.vue';
68-
import PanelInstrument from '../components/instrument/PanelInstrument.vue';
69-
import PanelAudio from '../components/audio/PanelAudio.vue';
70-
import PanelTools from '../components/PanelTools.vue';
64+
import {
65+
Header,
66+
PanelAbout,
67+
PanelEditor,
68+
PanelSyntax,
69+
PanelExample,
70+
PanelRoadmap,
71+
PanelOperate,
72+
PanelQa,
73+
NoteContextMenu,
74+
PanelInstrument,
75+
PanelAudio,
76+
PanelTools,
77+
} from '@/components';
7178
import {
7279
useEditorStore,
7380
useGuitarStore,
7481
usePianoRollStore,
7582
usePianoStore,
7683
type PianoRollNote,
77-
} from '../stores';
78-
import { usePlayer } from '../use/usePlayer';
84+
} from '@/stores';
85+
import { usePlayer, useTone } from '@/use';
7986
import { Midi } from '@tonejs/midi';
80-
import type { Example } from '../model';
81-
import { useTone } from '../use';
87+
import type { Example } from '@/model';
8288
import { useRouter } from 'vue-router';
83-
import Modal from '../widgets/Modal.vue';
89+
import { Modal } from '@/widgets';
8490
8591
defineOptions({
8692
name: 'Home',

0 commit comments

Comments
 (0)