lizixuan/m2pool_web_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

v1.2.0需求开发中

Browse Source
This commit is contained in:
yaoqin
2025-07-18 16:22:28 +08:00
parent a0ebd8254a
commit 9fa026f267
75 changed files with 10703 additions and 1197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

637
mining-pool/src/views/announcements/index.vue
View File

@@ -29,6 +29,298 @@
</el-button-group>
</div>
</div>
<!-- Markdown 使用规则指南 -->
<div class="markdown-guide-section" v-if="showMarkdownGuide">
<!-- 可展开的使用规则内容 -->
<transition name="slide-fade">
<div v-show="showMarkdownGuide" class="markdown-guide-content">
<div class="guide-container">
<h3 class="guide-title">📝 Markdown 语法规则详解</h3>
<!-- 标题语法 -->
<div class="guide-section">
<h4>1. 标题语法 (#符号)</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code># 一级标题 (最大)
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 (最小)</code></pre>
</div>
<div class="result-preview">
<h1 style="font-size: 24px; margin: 8px 0;">一级标题</h1>
<h2 style="font-size: 20px; margin: 6px 0;">二级标题</h2>
<h3 style="font-size: 16px; margin: 4px 0;">三级标题</h3>
</div>
</div>
</div>
<!-- 文本格式化 -->
<div class="guide-section">
<h4>2. 文本格式化</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>**粗体文本**
*斜体文本*
***粗斜体***
~~删除线~~
`行内代码`</code></pre>
</div>
<div class="result-preview">
<p><strong>粗体文本</strong></p>
<p><em>斜体文本</em></p>
<p><strong><em>粗斜体</em></strong></p>
<p><del>删除线</del></p>
<p><code>行内代码</code></p>
</div>
</div>
</div>
<!-- 列表语法 -->
<div class="guide-section">
<h4>3. 列表语法</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>- 无序列表项 1
- 无序列表项 2
- 子列表项 2.1
- 子列表项 2.2
1. 有序列表项 1
2. 有序列表项 2
3. 有序列表项 3</code></pre>
</div>
<div class="result-preview">
<ul>
<li>无序列表项 1</li>
<li>无序列表项 2
<ul>
<li>子列表项 2.1</li>
<li>子列表项 2.2</li>
</ul>
</li>
</ul>
<ol>
<li>有序列表项 1</li>
<li>有序列表项 2</li>
<li>有序列表项 3</li>
</ol>
</div>
</div>
</div>
<!-- 链接和图片 -->
<div class="guide-section">
<h4>4. 链接和图片</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>[链接文本](https://example.com)
![图片描述](https://example.com/image.png)
参考式链接：
[链接文本][1]
[1]: https://example.com</code></pre>
</div>
<div class="result-preview">
<p><a href="#" style="color: #5721E4;">链接文本</a></p>
<p>📷 图片会在这里显示</p>
<p><a href="#" style="color: #5721E4;">参考式链接</a></p>
</div>
</div>
</div>
<!-- 代码块 -->
<div class="guide-section">
<h4>5. 代码块</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>```javascript
function hello() {
console.log("Hello World!");
}
```
```python
def hello():
print("Hello World!")
```</code></pre>
</div>
<div class="result-preview">
<pre style="background: #f8f9fa; padding: 12px; border-radius: 4px;"><code>function hello() {
console.log("Hello World!");
}</code></pre>
</div>
</div>
</div>
<!-- 表格 -->
<div class="guide-section">
<h4>6. 表格语法</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>| 列标题1 | 列标题2 | 列标题3 |
|---------|---------|---------|
| 单元格1 | 单元格2 | 单元格3 |
| 数据A | 数据B | 数据C |
对齐方式：
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 左 | 中 | 右 |</code></pre>
</div>
<div class="result-preview">
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr style="background: #f8f9fa;">
<th style="border: 1px solid #ddd; padding: 8px;">列标题1</th>
<th style="border: 1px solid #ddd; padding: 8px;">列标题2</th>
<th style="border: 1px solid #ddd; padding: 8px;">列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">单元格1</td>
<td style="border: 1px solid #ddd; padding: 8px;">单元格2</td>
<td style="border: 1px solid #ddd; padding: 8px;">单元格3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 引用 -->
<div class="guide-section">
<h4>7. 引用语法</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>> 这是一个引用块
> 可以包含多行内容
>
> > 嵌套引用
> > 可以多层嵌套</code></pre>
</div>
<div class="result-preview">
<blockquote style="border-left: 4px solid #5721E4; padding-left: 16px; margin: 16px 0; color: #666;">
<p>这是一个引用块<br>可以包含多行内容</p>
<blockquote style="border-left: 4px solid #ccc; padding-left: 16px;">
<p>嵌套引用<br>可以多层嵌套</p>
</blockquote>
</blockquote>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="guide-section">
<h4>8. 分隔线</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>--- (三个或更多短横线)
*** (三个或更多星号)
___ (三个或更多下划线)</code></pre>
</div>
<div class="result-preview">
<hr style="border: none; border-top: 1px solid #ddd; margin: 16px 0;">
</div>
</div>
</div>
<!-- 任务列表 -->
<div class="guide-section">
<h4>9. 任务列表</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>- [x] 已完成任务
- [ ] 待完成任务
- [x] 另一个已完成任务</code></pre>
</div>
<div class="result-preview">
<ul style="list-style: none; padding-left: 0;">
<li>☑️ 已完成任务</li>
<li>☐ 待完成任务</li>
<li>☑️ 另一个已完成任务</li>
</ul>
</div>
</div>
</div>
<!-- 转义字符 -->
<div class="guide-section">
<h4>10. 转义字符</h4>
<div class="example-container">
<div class="syntax-example">
<pre><code>\* 显示星号而不是斜体
\# 显示井号而不是标题
\` 显示反引号
\\ 显示反斜杠</code></pre>
</div>
<div class="result-preview">
<p>* 显示星号而不是斜体</p>
<p># 显示井号而不是标题</p>
<p>` 显示反引号</p>
<p>\ 显示反斜杠</p>
</div>
</div>
</div>
<!-- 快捷提示 -->
<div class="guide-section tips-section">
<h4>💡 实用提示</h4>
<div class="tips-grid">
<div class="tip-item">
<strong>标题层级：</strong>按逻辑顺序使用，不跳级
</div>
<div class="tip-item">
<strong>空行：</strong>在不同元素之间添加空行提高可读性
</div>
<div class="tip-item">
<strong>列表缩进：</strong>子列表用2个空格缩进
</div>
<div class="tip-item">
<strong>代码语言：</strong>指定代码块语言以获得语法高亮
</div>
<div class="tip-item">
<strong>表格对齐：</strong>保持表格列的对齐美观
</div>
<div class="tip-item">
<strong>链接描述：</strong>使用有意义的链接文本
</div>
</div>
</div>
<!-- 常用快捷键 -->
<div class="guide-section">
<h4>⌨️ 编辑器快捷键</h4>
<div class="shortcuts-grid">
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>B</kbd> → 粗体
</div>
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>I</kbd> → 斜体
</div>
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>K</kbd> → 插入链接
</div>
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>`</kbd> → 行内代码
</div>
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>1-6</kbd> → 标题
</div>
<div class="shortcut-item">
<kbd>Ctrl</kbd> + <kbd>Z</kbd> → 撤销
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
<!-- 最新公告标题 -->
<div class="latest-section">
@@ -77,6 +369,16 @@
>
{{ $t('home.viewAll') || '查看所有' }} {{ totalCount }} {{ $t('home.articles') || '篇文章' }}
</el-button>
<!-- 了解使用规则按钮 -->
<el-button
type="text"
class="markdown-guide-btn"
@click="toggleMarkdownGuide"
:icon="showMarkdownGuide ? 'el-icon-arrow-up' : 'el-icon-question'"
>
{{ showMarkdownGuide ? '隐藏' : '了解' }}Markdown使用规则
</el-button>
</div>
<!-- 分页组件 -->
@@ -167,7 +469,11 @@ export default {
],
// 搜索防抖定时器
searchTimer: null
searchTimer: null,
// Markdown 使用规则指南
showMarkdownGuide: false,
viewMode: 'list' // 'list' or 'editor'
}
},
@@ -252,6 +558,21 @@ export default {
this.loadAnnouncements();
},
/**
* 切换Markdown使用规则指南的显示状态
*/
toggleMarkdownGuide() {
this.showMarkdownGuide = !this.showMarkdownGuide;
},
/**
* 切换视图模式 (list/editor)
*/
switchMode(mode) {
this.viewMode = mode;
// Markdown指南现在完全独立控制，不与视图模式绑定
},
/**
* 返回首页
*/
@@ -358,6 +679,180 @@ export default {
margin: 0;
}
/* Markdown 使用规则指南 */
.markdown-guide-section {
padding: 30px 40px 20px;
border-bottom: 1px solid #f0f0f0;
}
.guide-header {
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}
.guide-toggle-btn {
font-size: 14px;
color: #5721E4;
text-decoration: none;
transition: color 0.3s ease;
&:hover {
color: #5721E4;
text-decoration: underline;
}
}
.markdown-guide-content {
background: #f8f9ff;
border-radius: 8px;
padding: 20px;
border: 1px solid #e0e0e0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.guide-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.guide-container.show {
max-height: 1000px; /* 足够大的高度，确保所有内容都可见 */
}
.guide-title {
font-size: 20px;
font-weight: 600;
color: #34495e;
margin-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
}
.guide-section {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px dashed #eee;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
.guide-section h4 {
font-size: 16px;
font-weight: 500;
color: #4a4a4a;
margin-bottom: 15px;
position: relative;
padding-left: 15px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 15px;
background: #5721E4;
border-radius: 2px;
}
}
.example-container {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.syntax-example {
flex: 1;
background: #f0f0f0;
border-radius: 4px;
padding: 10px;
overflow-x: auto;
font-size: 14px;
color: #333;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
border: 1px solid #ccc;
}
.result-preview {
flex: 1;
padding: 10px;
background: #fff;
border-radius: 4px;
border: 1px solid #eee;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
min-height: 100px; /* Ensure some height for preview */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
font-size: 14px;
color: #555;
line-height: 1.8;
}
.tips-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #eee;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.tip-item {
background: #f0edff;
padding: 10px 15px;
border-radius: 6px;
font-size: 13px;
color: #5721E4;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.shortcuts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-top: 15px;
}
.shortcut-item {
background: #f0edff;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
color: #5721E4;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.shortcut-item kbd {
background-color: #e0e0e0;
border-radius: 4px;
padding: 2px 4px;
font-size: 12px;
font-family: monospace;
color: #333;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
/* 最新公告标题 */
.latest-section {
padding: 30px 40px 20px;
@@ -494,6 +989,11 @@ export default {
.view-all-button {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.view-all-link {
@@ -506,6 +1006,24 @@ export default {
}
}
/* Markdown指南按钮样式 */
.markdown-guide-btn {
font-size: 14px;
color: #5721E4 !important;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid #5721E4;
border-radius: 4px;
padding: 8px 16px;
&:hover {
color: #fff !important;
background-color: #5721E4 !important;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(87, 33, 228, 0.3);
}
}
.pagination {
justify-content: center;
@@ -556,6 +1074,55 @@ export default {
.main-content {
border-radius: 8px;
}
.markdown-guide-section {
padding: 15px 20px;
}
.guide-header {
justify-content: center;
}
.guide-toggle-btn {
font-size: 13px;
}
.markdown-guide-content {
padding: 10px;
}
.guide-container {
max-height: none; /* Allow content to wrap */
}
.guide-container.show {
max-height: none;
}
.example-container {
flex-direction: column;
gap: 10px;
}
.syntax-example,
.result-preview {
width: 100%;
}
.tips-grid,
.shortcuts-grid {
grid-template-columns: 1fr;
}
.tip-item,
.shortcut-item {
justify-content: flex-start;
padding-left: 15px;
}
.shortcut-item kbd {
font-size: 11px;
}
.page-header,
.latest-section,
@@ -590,6 +1157,17 @@ export default {
align-items: flex-start;
gap: 4px;
}
/* 移动端按钮样式调整 */
.view-all-button {
flex-direction: column;
gap: 12px;
}
.markdown-guide-btn {
font-size: 13px;
padding: 6px 12px;
}
}
/* 深色模式适配 */
@@ -603,6 +1181,48 @@ export default {
background: #2d2d2d;
color: #fff;
}
.markdown-guide-section {
background: #2d2d2d;
border-color: #3a3a3a;
}
.guide-title,
.guide-section h4 {
color: #fff;
}
.syntax-example {
background: #3a3a3a;
border-color: #555;
color: #ccc;
}
.result-preview {
background: #333;
border-color: #555;
color: #bbb;
}
.tips-section {
border-top-color: #3a3a3a;
}
.tip-item {
background: #3a3a3a;
color: #888;
}
.shortcut-item {
background: #3a3a3a;
color: #888;
}
.shortcut-item kbd {
background-color: #444;
color: #eee;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.page-title,
.section-title,
@@ -622,4 +1242,19 @@ export default {
color: #999;
}
}
/* 展开/收起动画 */
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateY(-10px);
opacity: 0;
}
</style>