31 changed files with 33 additions and 6773 deletions
File diff suppressed because it is too large
@ -1,54 +0,0 @@ |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font-family: Arial, sans-serif; |
|||
color: #333; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-layout { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
position: relative; |
|||
|
|||
max-width: 1226px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
color: white; |
|||
|
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.content { |
|||
padding: 0 10px; |
|||
padding-top: 40px; |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
padding: 20px; |
|||
border-radius: 28px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); |
|||
color: #fff; |
|||
} |
|||
@ -1,174 +0,0 @@ |
|||
|
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font-family: Arial, sans-serif; |
|||
color: #333; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #fcfcfc; |
|||
} |
|||
|
|||
.page-layout { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page { |
|||
width: 100%; |
|||
/* display: flex; */ |
|||
/* flex-direction: column; */ |
|||
flex: 1; |
|||
position: relative; |
|||
|
|||
} |
|||
|
|||
.container { |
|||
max-width: 1226px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
/* padding-left: 20px; |
|||
padding-right: 20px; */ |
|||
} |
|||
|
|||
@media (max-width: 640px) { |
|||
.container { |
|||
padding-left: 10px; |
|||
padding-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.clearfix::after { |
|||
content: ''; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
float: left; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* ===== 顶部导航 响应式 ===== */ |
|||
.navbar { |
|||
position: relative; |
|||
} |
|||
|
|||
.navbar .menu-toggle { |
|||
display: none; |
|||
position: absolute; |
|||
right: 12px; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 40px; |
|||
height: 40px; |
|||
border: none; |
|||
background: transparent; |
|||
padding: 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.navbar .menu-toggle .bar { |
|||
display: block; |
|||
width: 22px; |
|||
height: 2px; |
|||
background: #333; |
|||
margin: 5px auto; |
|||
transition: transform .2s ease, opacity .2s ease; |
|||
} |
|||
|
|||
.navbar .mobile-menu { |
|||
display: none; |
|||
position: relative; |
|||
overflow: hidden; |
|||
max-height: 0; |
|||
transition: max-height .25s ease; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 0 0 12px 12px; |
|||
box-shadow: 0 4px 16px rgba(0, 0, 0, .06); |
|||
} |
|||
|
|||
.navbar.open .mobile-menu { |
|||
display: none; |
|||
max-height: 400px; |
|||
} |
|||
|
|||
.navbar .mobile-menu .menu-item { |
|||
display: block; |
|||
padding: 12px 0; |
|||
} |
|||
|
|||
/* 桌面端可见区域 */ |
|||
.desktop-only { |
|||
display: block; |
|||
} |
|||
|
|||
/* <= 1024 宽度：显示切换按钮，隐藏桌面菜单 */ |
|||
@media (max-width: 1024px) { |
|||
.desktop-only { |
|||
display: none; |
|||
} |
|||
|
|||
.navbar .menu-toggle { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.navbar .mobile-menu { |
|||
padding: 8px 20px 12px; |
|||
} |
|||
|
|||
.navbar.open .mobile-menu { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
height: 100%; |
|||
margin-left: 20px; |
|||
|
|||
.menu-item { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: rgba(175, 175, 175, 0.1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.menu.left { |
|||
float: left; |
|||
|
|||
.menu-item { |
|||
float: left; |
|||
|
|||
&+.menu-item { |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right.menu { |
|||
float: right; |
|||
|
|||
.menu-item { |
|||
float: right; |
|||
|
|||
&+.menu-item { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -1,677 +0,0 @@ |
|||
|
|||
/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */ |
|||
@media (prefers-color-scheme: dark) { |
|||
.markdown-body { |
|||
/* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: dark; |
|||
} |
|||
} |
|||
/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */ |
|||
@media (prefers-color-scheme: light) { |
|||
// https://verytoolz.com/blog/03bfb3598f/ |
|||
.markdown-body { |
|||
/* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: light; |
|||
/* 定义CSS自定义属性，用于主题色彩管理 */ |
|||
--color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色 |
|||
--color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色 |
|||
--color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色 |
|||
--color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色 |
|||
--color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色 |
|||
--color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色 |
|||
--color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色 |
|||
--color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色 |
|||
--color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色 |
|||
--color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色 |
|||
--color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色 |
|||
--color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色 |
|||
--color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色 |
|||
--color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色 |
|||
} |
|||
} |
|||
|
|||
/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */ |
|||
.markdown-body { |
|||
/* 防止iOS Safari自动调整文本大小 */ |
|||
-webkit-text-size-adjust: 100%; |
|||
/* 防止IE自动调整文本大小 */ |
|||
-ms-text-size-adjust: 100%; |
|||
/* 优化文本渲染质量，提升可读性 */ |
|||
text-rendering: optimizelegibility; |
|||
/* 重置外边距为0 */ |
|||
margin: 0; |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 使用CSS变量设置文本颜色 */ |
|||
color: var(--color-fg-muted); |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 第一个子元素 - 移除顶部外边距 */ |
|||
> *:first-child { |
|||
/* 强制移除顶部外边距，避免不必要的空白 */ |
|||
margin-top: 0 !important; |
|||
} |
|||
/* 最后一个子元素 - 移除底部外边距 */ |
|||
> *:last-child { |
|||
/* 强制移除底部外边距，避免不必要的空白 */ |
|||
margin-bottom: 0 !important; |
|||
} |
|||
/* 块级元素统一间距设置 - 段落、引用、列表、表格等 */ |
|||
p, |
|||
blockquote, |
|||
ul, |
|||
ol, |
|||
dl, |
|||
table, |
|||
hr, |
|||
form, |
|||
pre, |
|||
details { |
|||
/* 移除顶部外边距，避免重复间距 */ |
|||
margin-top: 0; |
|||
/* 设置底部外边距为1em，保持适当间距 */ |
|||
margin-bottom: 1em; |
|||
} |
|||
/* 引用块内部元素间距处理 */ |
|||
blockquote { |
|||
/* 引用块内第一个子元素 - 移除顶部外边距 */ |
|||
& > :first-child { |
|||
margin-top: 0; |
|||
} |
|||
/* 引用块内最后一个子元素 - 移除底部外边距 */ |
|||
& > :last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
/* 统一显示成块状元素 - 确保这些元素独占一行 */ |
|||
details, |
|||
figcaption, |
|||
figure { |
|||
/* 设置为块级元素，独占一行显示 */ |
|||
display: block; |
|||
} |
|||
/* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */ |
|||
audio, |
|||
canvas, |
|||
video { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
} |
|||
/* 按钮内部间距统一 - 移除Firefox默认内边距 */ |
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
/* 移除Firefox浏览器按钮和输入框的内部内边距 */ |
|||
padding: 0; |
|||
/* 移除Firefox浏览器按钮和输入框的内部边框 */ |
|||
border: 0; |
|||
} |
|||
/* 定义元素显示为斜体 - 术语定义样式 */ |
|||
dfn { |
|||
/* 设置字体为斜体，用于术语定义 */ |
|||
font-style: italic; |
|||
} |
|||
/* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */ |
|||
table { |
|||
/* 合并表格边框，相邻单元格边框合并为一条 */ |
|||
border-collapse: collapse; |
|||
/* 设置表格单元格间距为0 */ |
|||
border-spacing: 0; |
|||
/* 设置为块级元素，可以设置宽高 */ |
|||
display: block; |
|||
/* 宽度根据内容自适应 */ |
|||
width: max-content; |
|||
/* 最大宽度不超过父容器 */ |
|||
max-width: 100%; |
|||
/* 内容溢出时显示滚动条 */ |
|||
overflow: auto; |
|||
} |
|||
/* 可拖动文件添加拖动手势 - 拖拽元素样式 */ |
|||
[draggable] { |
|||
/* 设置鼠标悬停时显示移动光标 */ |
|||
cursor: move; |
|||
} |
|||
/* 加粗元素 - 粗体文本样式 */ |
|||
b, |
|||
strong { |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
} |
|||
/* 缩写元素样式统一 - 缩写和首字母缩写样式 */ |
|||
abbr, |
|||
acronym { |
|||
/* 移除底部边框 */ |
|||
border-bottom: none; |
|||
/* 设置字体变体为正常 */ |
|||
font-variant: normal; |
|||
/* 设置虚线下划线装饰 */ |
|||
text-decoration: underline dotted; |
|||
} |
|||
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ |
|||
abbr { |
|||
/* 设置鼠标悬停时显示帮助光标 */ |
|||
cursor: help; |
|||
} |
|||
/* 一致的 del 样式 - 删除线文本样式 */ |
|||
del { |
|||
/* 设置文本装饰为删除线 */ |
|||
text-decoration: line-through; |
|||
} |
|||
/* a标签去除下划线 - 链接样式处理 */ |
|||
a { |
|||
/* 默认移除下划线，保持页面简洁 */ |
|||
text-decoration: none; |
|||
/* 没有href属性的链接样式 */ |
|||
&:not([href]) { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 移除下划线装饰 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 鼠标悬停时显示下划线 */ |
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
/* 默认不显示下划线，保持页面简洁 - 插入文本样式 */ |
|||
ins { |
|||
/* 移除下划线装饰，保持页面简洁 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， |
|||
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 |
|||
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element |
|||
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated |
|||
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/ |
|||
*/ |
|||
u, |
|||
.typo-u { |
|||
/* 设置文本装饰为下划线，用于专名号显示 */ |
|||
text-decoration: underline; |
|||
} |
|||
/* 隐藏指定元素 - 隐藏带有hidden属性的元素 */ |
|||
[hidden] { |
|||
/* 强制隐藏元素，优先级最高 */ |
|||
display: none !important; |
|||
} |
|||
/* 伸缩框显示为列表元素 - 详情框摘要样式 */ |
|||
summary { |
|||
/* 设置为列表项显示，显示为可点击的列表项 */ |
|||
display: list-item; |
|||
} |
|||
/* 引用元素前后内容 - 移除默认引号 */ |
|||
q:before, |
|||
q:after { |
|||
/* 移除引用元素前后的默认引号内容 */ |
|||
content: ""; |
|||
} |
|||
/* 表格标题和表头文本对齐 - 默认左对齐 */ |
|||
caption, |
|||
th { |
|||
/* 设置文本左对齐 */ |
|||
text-align: left; |
|||
} |
|||
/* 居中对齐的表格标题和表头 */ |
|||
caption[align="center"], |
|||
th[align="center"] { |
|||
/* 设置文本居中对齐 */ |
|||
text-align: center; |
|||
} |
|||
/* 特定元素字体粗细统一 - 地址、标题、引用等 */ |
|||
address, |
|||
caption, |
|||
cite, |
|||
em, |
|||
th, |
|||
var { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */ |
|||
mark { |
|||
/* 设置标记背景色，使用CSS变量 */ |
|||
background: var(--color-mark-default); |
|||
// background: #fffdd1; // 备用背景色 |
|||
// border-bottom: 1px solid #ffedce; // 备用底部边框 |
|||
/* 设置内边距，增加标记的可读性 */ |
|||
padding: 2px; |
|||
|
|||
/* 激活状态的标记样式 */ |
|||
&.active { |
|||
/* 激活时使用强调色背景 */ |
|||
background: var(--color-mark-fg); |
|||
} |
|||
// margin: 0 5px; // 备用外边距 |
|||
} |
|||
/* 统一h1元素的间隔和字体大小 - 一级标题样式 */ |
|||
h1 { |
|||
/* 设置上下外边距为0.67em */ |
|||
margin: 0.67em 0; |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
/* 设置字体大小为2倍基础大小 */ |
|||
font-size: 2em; |
|||
} |
|||
/* small字体缩小 - 小字体文本样式 */ |
|||
small { |
|||
/* 设置字体大小为父元素的90% */ |
|||
font-size: 90%; |
|||
} |
|||
/* 上下标显示 - 下标和上标文本样式 */ |
|||
sub, |
|||
sup { |
|||
/* 设置字体大小为75% */ |
|||
font-size: 75%; |
|||
/* 设置行高为0，避免影响行间距 */ |
|||
line-height: 0; |
|||
/* 设置相对定位，用于精确控制位置 */ |
|||
position: relative; |
|||
/* 设置垂直对齐为基线 */ |
|||
vertical-align: baseline; |
|||
} |
|||
/* 上下标内链接样式 */ |
|||
sub a, |
|||
sup a { |
|||
/* 设置左右内边距为0.1em */ |
|||
padding: 0 0.1em; |
|||
} |
|||
/* 下标位置调整 */ |
|||
sub { |
|||
/* 向下偏移0.25em */ |
|||
bottom: -0.25em; |
|||
} |
|||
/* 上标位置调整 */ |
|||
sup { |
|||
/* 向上偏移0.5em */ |
|||
top: -0.5em; |
|||
} |
|||
/* 代码相关的字体大小统一 - 代码元素字体样式 */ |
|||
code, |
|||
kbd, |
|||
pre, |
|||
samp, |
|||
pre tt { |
|||
/* 设置字体为等宽字体，便于代码阅读 */ |
|||
font-family: monospace; |
|||
/* 设置字体大小为1em，保持一致性 */ |
|||
font-size: 1em; |
|||
} |
|||
/* 去除默认边框 - 移除字段集和图片的默认边框 */ |
|||
fieldset, |
|||
img { |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
} |
|||
/* 图片初始化样式 - 图片元素基础样式 */ |
|||
img { |
|||
/* 设置边框样式为无 */ |
|||
border-style: none; |
|||
/* 设置最大宽度为100%，防止溢出 */ |
|||
max-width: 100%; |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 设置左右外边距为自动，实现居中 */ |
|||
margin: 0 auto; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-default); |
|||
} |
|||
/* 可附标题内容元素的间距 - 图片容器样式 */ |
|||
figure { |
|||
/* 设置上下外边距为1em，左右外边距为40px */ |
|||
margin: 1em 40px; |
|||
} |
|||
/* 间隔线 - 水平分隔线样式 */ |
|||
/* 一致化 horizontal rule - 统一水平分隔线样式 */ |
|||
hr { |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 隐藏溢出内容 */ |
|||
overflow: hidden; |
|||
/* 设置背景为透明 */ |
|||
background: transparent; |
|||
/* 设置底部边框，使用CSS变量 */ |
|||
border-bottom: 1px solid var(--color-border-muted); |
|||
/* 设置高度为0.25em */ |
|||
height: 0.25em; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
/* 设置上下外边距为24px */ |
|||
margin: 24px 0; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-border-default); |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
} |
|||
|
|||
/* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */ |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
/* 继承父元素的字体样式 */ |
|||
font: inherit; |
|||
/* 移除外边距 */ |
|||
margin: 0; |
|||
/* 设置溢出为可见 */ |
|||
overflow: visible; |
|||
/* 继承父元素的字体族 */ |
|||
font-family: inherit; |
|||
/* 继承父元素的字体大小 */ |
|||
font-size: inherit; |
|||
/* 继承父元素的行高 */ |
|||
line-height: inherit; |
|||
} |
|||
/* 外观显示为按钮 - 按钮类型输入框样式 */ |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 设置标准按钮外观，提高兼容性 */ |
|||
appearance: button; |
|||
} |
|||
/* 这两个表单样式规则覆盖 - 复选框和单选框样式 */ |
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
/* 设置盒模型为边框盒模型 */ |
|||
box-sizing: border-box; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 数字按钮内部高度自动 - 数字输入框按钮样式 */ |
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
/* 设置高度为自动，适应内容 */ |
|||
height: auto; |
|||
} |
|||
/* 搜索按钮内图标外观去除 - 搜索输入框样式 */ |
|||
[type="search"]::-webkit-search-cancel-button, |
|||
[type="search"]::-webkit-search-decoration { |
|||
/* 移除WebKit浏览器搜索框默认样式 */ |
|||
-webkit-appearance: none; |
|||
} |
|||
/* 输入框的占位符样式 - WebKit浏览器占位符样式 */ |
|||
::-webkit-input-placeholder { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 设置透明度为0.54，创建半透明效果 */ |
|||
opacity: 0.54; |
|||
} |
|||
/* 文件选择按钮样式统一 - 文件上传按钮样式 */ |
|||
::-webkit-file-upload-button { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 继承父元素字体样式 */ |
|||
font: inherit; |
|||
} |
|||
/* 占位符显示统一 - 通用占位符样式 */ |
|||
::placeholder { |
|||
/* 设置占位符颜色，使用CSS变量 */ |
|||
color: var(--color-fg-subtle); |
|||
/* 设置完全不透明 */ |
|||
opacity: 1; |
|||
} |
|||
/* table内的td,th去除留白 - 表格单元格样式 */ |
|||
td, |
|||
th { |
|||
/* 移除表格单元格内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 伸缩框鼠标显示 - 详情框摘要样式 */ |
|||
details summary { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 未展开的详情框隐藏内容 - 详情框内容显示控制 */ |
|||
details:not([open]) > *:not(summary) { |
|||
/* 强制隐藏未展开详情框内的非摘要内容 */ |
|||
display: none !important; |
|||
} |
|||
/* 按键显示 - 键盘按键样式 */ |
|||
kbd { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
/* 设置内边距为3px上下，5px左右 */ |
|||
padding: 3px 5px; |
|||
/* 设置字体为11px等宽字体，包含多种等宽字体备选 */ |
|||
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; |
|||
/* 设置行高为10px */ |
|||
line-height: 10px; |
|||
/* 设置文本颜色，使用CSS变量 */ |
|||
color: var(--color-fg-default); |
|||
/* 设置垂直对齐为中间 */ |
|||
vertical-align: middle; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-subtle); |
|||
/* 设置边框为1px实线，使用CSS变量 */ |
|||
border: solid 1px var(--color-neutral-muted); |
|||
/* 设置底部边框颜色，使用CSS变量 */ |
|||
border-bottom-color: var(--color-neutral-muted); |
|||
/* 设置圆角为6px */ |
|||
border-radius: 6px; |
|||
/* 设置内阴影，创建按键凹陷效果 */ |
|||
box-shadow: inset 0 -1px 0 var(--color-neutral-muted); |
|||
} |
|||
/* 清除浮动工具类 - 清除浮动伪元素 */ |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
} |
|||
/* 清除浮动工具类 - after伪元素 */ |
|||
.clearfix:after { |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
} |
|||
/* 清除浮动工具类 - 主容器 */ |
|||
.clearfix { |
|||
/* 触发IE的hasLayout属性，用于清除浮动 */ |
|||
zoom: 1; |
|||
} |
|||
/* 强制文本换行 - 文本换行工具类 */ |
|||
.textwrap, |
|||
.textwrap td, |
|||
.textwrap th { |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 强制在任意字符间换行，防止溢出 */ |
|||
word-break: break-all; |
|||
} |
|||
/* 文本换行表格 - 固定表格布局 */ |
|||
.textwrap-table { |
|||
/* 设置表格布局为固定，提高渲染性能 */ |
|||
table-layout: fixed; |
|||
} |
|||
/* 无序列表样式 - 项目符号列表 */ |
|||
ul { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为实心圆点 */ |
|||
list-style: disc; |
|||
} |
|||
/* 有序列表样式 - 数字列表 */ |
|||
ol { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为数字 */ |
|||
list-style: decimal; |
|||
/* 列表项样式 */ |
|||
li { |
|||
/* 设置左内边距为0.4em，增加数字与文本间距 */ |
|||
padding-left: 0.4em; |
|||
} |
|||
} |
|||
/* 相邻列表项间距 - 列表项之间的间距 */ |
|||
li + li { |
|||
/* 设置顶部外边距为0.25em，增加列表项间距 */ |
|||
margin-top: 0.25em; |
|||
} |
|||
/* 嵌套列表样式 - 列表项内的子列表 */ |
|||
li { |
|||
/* 无序子列表样式 */ |
|||
ul { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为空心圆点 */ |
|||
list-style: circle; |
|||
/* 三级无序列表样式 */ |
|||
li { |
|||
ul { |
|||
/* 设置列表样式为实心方块 */ |
|||
list-style: square; |
|||
} |
|||
} |
|||
} |
|||
/* 有序子列表样式 */ |
|||
ol { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
} |
|||
} |
|||
/* 任务列表项样式 - 待办事项列表项 */ |
|||
.task-list-item { |
|||
/* 移除列表样式，不显示项目符号 */ |
|||
list-style-type: none; |
|||
/* 设置相对定位，用于绝对定位子元素 */ |
|||
position: relative; |
|||
/* 第一个子输入框样式 */ |
|||
> input { |
|||
/* 第一个子元素右边距 */ |
|||
&:nth-child(1) { |
|||
/* 设置右边距为6px */ |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 拖拽手柄样式 */ |
|||
.handle { |
|||
/* 隐藏拖拽手柄 */ |
|||
display: none; |
|||
} |
|||
/* 复选框样式 */ |
|||
input[type="checkbox"] { |
|||
/* 设置宽度为0.9em */ |
|||
width: 0.9em; |
|||
/* 设置高度为0.9em */ |
|||
height: 0.9em; |
|||
/* 设置绝对定位 */ |
|||
position: absolute; |
|||
/* 向左偏移1.3em */ |
|||
left: -1.3em; |
|||
/* 向下偏移0.35em */ |
|||
top: 0.35em; |
|||
} |
|||
} |
|||
/* 启用的任务列表项样式 */ |
|||
.task-list-item.enabled { |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
/* 相邻任务列表项间距 */ |
|||
.task-list-item + .task-list-item { |
|||
/* 设置顶部外边距为3px */ |
|||
margin-top: 3px; |
|||
} |
|||
/* 包含任务列表的容器样式 */ |
|||
.contains-task-list { |
|||
// margin-left: 0.6em; // 备用左边距 |
|||
/* 从右到左文本方向样式 */ |
|||
&:dir(rtl) { |
|||
.task-list-item { |
|||
input[type="checkbox"] { |
|||
/* 设置复选框外边距，适配RTL布局 */ |
|||
margin: 0 -1.6em 0.25em 0.2em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 目录样式 - 表格目录容器 */ |
|||
.toc { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
} |
|||
|
|||
/* 定义列表样式 - 描述列表容器 */ |
|||
dl { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置块级起始外边距为1em */ |
|||
margin-block-start: 1em; |
|||
/* 设置块级结束外边距为1em */ |
|||
margin-block-end: 1em; |
|||
/* 设置内联起始外边距为0px */ |
|||
margin-inline-start: 0px; |
|||
/* 设置内联结束外边距为0px */ |
|||
margin-inline-end: 0px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
/* 定义术语样式 */ |
|||
dt { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
/* 定义描述样式 */ |
|||
dd { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置内联起始外边距为40px，创建缩进效果 */ |
|||
margin-inline-start: 40px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
} |
|||
} |
|||
@ -1,53 +0,0 @@ |
|||
.home-hero { |
|||
margin: 40px 20px 40px; |
|||
/* background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); */ |
|||
text-align: center; |
|||
} |
|||
.avatar-container { |
|||
width: 120px; |
|||
height: 120px; |
|||
margin: 0 auto; |
|||
position: relative; |
|||
} |
|||
.avatar-container .author { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
.avatar-container:hover .avatar { |
|||
transform: rotate(360deg); |
|||
left: 100%; |
|||
} |
|||
.avatar { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
cursor: pointer; |
|||
left: 0; |
|||
transform-origin: center center; |
|||
transition: 0.5s transform ease-in-out, 0.5s left ease-in-out; |
|||
} |
|||
/* |
|||
.card { |
|||
background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
width: 300px; |
|||
margin: 0 auto; |
|||
margin-bottom: 40px; |
|||
text-align: center; |
|||
} */ |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.home-hero { |
|||
margin: 0; |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
@ -1,146 +0,0 @@ |
|||
/* 首页样式 */ |
|||
|
|||
.hero-section { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hero-section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url('/images/hero-bg.svg') no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.1; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.hero-content { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.feature-card { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.feature-card:hover { |
|||
transform: translateY(-5px); |
|||
} |
|||
|
|||
.feature-card .material-symbols-light--article, |
|||
.feature-card .material-symbols-light--bookmark, |
|||
.feature-card .material-symbols-light--person { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.feature-card:hover .material-symbols-light--article, |
|||
.feature-card:hover .material-symbols-light--bookmark, |
|||
.feature-card:hover .material-symbols-light--person { |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
.stats-section { |
|||
position: relative; |
|||
} |
|||
|
|||
.stats-section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url('/images/stats-bg.svg') no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.05; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.stat-item { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.stat-item:hover { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.user-dashboard { |
|||
position: relative; |
|||
} |
|||
|
|||
.user-dashboard::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url('/images/dashboard-bg.svg') no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.03; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.avatar { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.avatar:hover { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 768px) { |
|||
.hero-section { |
|||
padding: 4rem 0; |
|||
} |
|||
|
|||
.hero-content h1 { |
|||
font-size: 2.5rem; |
|||
} |
|||
|
|||
.features-grid { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
|
|||
.stats-grid { |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
|
|||
.user-info { |
|||
text-align: center; |
|||
margin-bottom: 1.5rem; |
|||
} |
|||
|
|||
.user-actions { |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 480px) { |
|||
.hero-content h1 { |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
.hero-content p { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
.stats-grid { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
|
|||
.hero-actions { |
|||
flex-direction: column; |
|||
gap: 1rem; |
|||
} |
|||
|
|||
.hero-actions a { |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
@ -1,973 +0,0 @@ |
|||
/** |
|||
* Admin 后台管理系统 JavaScript |
|||
* 提供通用的交互功能和工具函数 |
|||
*/ |
|||
|
|||
(function() { |
|||
'use strict'; |
|||
|
|||
// 通用工具函数
|
|||
const AdminUtils = { |
|||
/** |
|||
* 显示Toast消息 |
|||
* @param {string} type - 消息类型 (success, error, warning, info) |
|||
* @param {string} message - 消息内容 |
|||
* @param {number} duration - 显示时长（毫秒） |
|||
*/ |
|||
showToast: function(type, message, duration = 3000) { |
|||
// 移除现有的toast
|
|||
const existingToast = document.querySelector('.admin-toast'); |
|||
if (existingToast) { |
|||
existingToast.remove(); |
|||
} |
|||
|
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close" aria-label="关闭">×</button> |
|||
`;
|
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失
|
|||
setTimeout(() => { |
|||
this.hideToast(toast); |
|||
}, duration); |
|||
|
|||
// 点击关闭
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
this.hideToast(toast); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 隐藏Toast消息 |
|||
* @param {HTMLElement} toast - Toast元素 |
|||
*/ |
|||
hideToast: function(toast) { |
|||
if (toast && toast.parentNode) { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
if (toast.parentNode) { |
|||
toast.parentNode.removeChild(toast); |
|||
} |
|||
}, 300); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 确认对话框 |
|||
* @param {string} message - 确认消息 |
|||
* @param {string} title - 对话框标题 |
|||
* @returns {boolean} 用户确认结果 |
|||
*/ |
|||
confirm: function(message, title = '确认') { |
|||
return confirm(`${title}\n\n${message}`); |
|||
}, |
|||
|
|||
/** |
|||
* 发送AJAX请求 |
|||
* @param {string} url - 请求URL |
|||
* @param {object} options - 请求选项 |
|||
* @returns {Promise} 请求Promise |
|||
*/ |
|||
ajax: function(url, options = {}) { |
|||
const defaultOptions = { |
|||
method: 'GET', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
credentials: 'same-origin' |
|||
}; |
|||
|
|||
const mergedOptions = Object.assign(defaultOptions, options); |
|||
|
|||
if (mergedOptions.body && typeof mergedOptions.body === 'object') { |
|||
mergedOptions.body = JSON.stringify(mergedOptions.body); |
|||
} |
|||
|
|||
return fetch(url, mergedOptions) |
|||
.then(response => { |
|||
if (!response.ok) { |
|||
throw new Error(`HTTP ${response.status}: ${response.statusText}`); |
|||
} |
|||
return response.json(); |
|||
}) |
|||
.catch(error => { |
|||
console.error('AJAX请求失败:', error); |
|||
throw error; |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 防抖函数 |
|||
* @param {Function} func - 要防抖的函数 |
|||
* @param {number} delay - 延迟时间（毫秒） |
|||
* @returns {Function} 防抖后的函数 |
|||
*/ |
|||
debounce: function(func, delay) { |
|||
let timeoutId; |
|||
return function(...args) { |
|||
clearTimeout(timeoutId); |
|||
timeoutId = setTimeout(() => func.apply(this, args), delay); |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 格式化日期 |
|||
* @param {Date|string} date - 日期对象或字符串 |
|||
* @param {string} format - 格式类型 (date, time, datetime) |
|||
* @returns {string} 格式化后的日期字符串 |
|||
*/ |
|||
formatDate: function(date, format = 'datetime') { |
|||
const d = new Date(date); |
|||
if (isNaN(d.getTime())) { |
|||
return '无效日期'; |
|||
} |
|||
|
|||
const options = { |
|||
date: { year: 'numeric', month: '2-digit', day: '2-digit' }, |
|||
time: { hour: '2-digit', minute: '2-digit' }, |
|||
datetime: { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit' |
|||
} |
|||
}; |
|||
|
|||
return d.toLocaleString('zh-CN', options[format] || options.datetime); |
|||
}, |
|||
|
|||
/** |
|||
* 复制文本到剪贴板 |
|||
* @param {string} text - 要复制的文本 |
|||
* @returns {Promise<boolean>} 复制是否成功 |
|||
*/ |
|||
copyToClipboard: function(text) { |
|||
if (navigator.clipboard) { |
|||
return navigator.clipboard.writeText(text) |
|||
.then(() => { |
|||
this.showToast('success', '已复制到剪贴板'); |
|||
return true; |
|||
}) |
|||
.catch(err => { |
|||
console.error('复制失败:', err); |
|||
return this.fallbackCopyTextToClipboard(text); |
|||
}); |
|||
} else { |
|||
return Promise.resolve(this.fallbackCopyTextToClipboard(text)); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 降级复制文本到剪贴板 |
|||
* @param {string} text - 要复制的文本 |
|||
* @returns {boolean} 复制是否成功 |
|||
*/ |
|||
fallbackCopyTextToClipboard: function(text) { |
|||
const textArea = document.createElement('textarea'); |
|||
textArea.value = text; |
|||
textArea.style.position = 'fixed'; |
|||
textArea.style.left = '-999999px'; |
|||
textArea.style.top = '-999999px'; |
|||
document.body.appendChild(textArea); |
|||
textArea.focus(); |
|||
textArea.select(); |
|||
|
|||
try { |
|||
const successful = document.execCommand('copy'); |
|||
if (successful) { |
|||
this.showToast('success', '已复制到剪贴板'); |
|||
} else { |
|||
this.showToast('error', '复制失败，请手动复制'); |
|||
} |
|||
return successful; |
|||
} catch (err) { |
|||
console.error('降级复制失败:', err); |
|||
this.showToast('error', '复制失败，请手动复制'); |
|||
return false; |
|||
} finally { |
|||
document.body.removeChild(textArea); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
// 初始化函数
|
|||
const AdminApp = { |
|||
/** |
|||
* 初始化应用 |
|||
*/ |
|||
init: function() { |
|||
this.initDropdowns(); |
|||
this.initMobileNav(); |
|||
this.initToasts(); |
|||
this.initFormValidation(); |
|||
this.initTableActions(); |
|||
this.initSearch(); |
|||
this.initArticleEditor(); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化下拉菜单 |
|||
*/ |
|||
initDropdowns: function() { |
|||
document.addEventListener('click', (e) => { |
|||
// 关闭所有下拉菜单
|
|||
const dropdowns = document.querySelectorAll('.dropdown'); |
|||
dropdowns.forEach(dropdown => { |
|||
if (!dropdown.contains(e.target)) { |
|||
dropdown.classList.remove('active'); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
// 下拉菜单触发器
|
|||
const dropdownTriggers = document.querySelectorAll('.dropdown-trigger'); |
|||
dropdownTriggers.forEach(trigger => { |
|||
trigger.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
const dropdown = trigger.closest('.dropdown'); |
|||
dropdown.classList.toggle('active'); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化移动端导航 |
|||
*/ |
|||
initMobileNav: function() { |
|||
// 创建移动端菜单按钮
|
|||
if (window.innerWidth <= 768) { |
|||
this.createMobileMenuButton(); |
|||
} |
|||
|
|||
window.addEventListener('resize', () => { |
|||
if (window.innerWidth <= 768) { |
|||
this.createMobileMenuButton(); |
|||
} else { |
|||
this.removeMobileMenuButton(); |
|||
document.body.classList.remove('sidebar-open'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 创建移动端菜单按钮 |
|||
*/ |
|||
createMobileMenuButton: function() { |
|||
if (document.querySelector('.mobile-menu-btn')) return; |
|||
|
|||
const button = document.createElement('button'); |
|||
button.className = 'mobile-menu-btn'; |
|||
button.innerHTML = '☰'; |
|||
button.style.cssText = ` |
|||
background: none; |
|||
border: none; |
|||
font-size: 1.25rem; |
|||
cursor: pointer; |
|||
padding: 0.5rem; |
|||
color: #4a5568; |
|||
`;
|
|||
|
|||
button.addEventListener('click', () => { |
|||
document.body.classList.toggle('sidebar-open'); |
|||
}); |
|||
|
|||
const headerLeft = document.querySelector('.admin-header-left'); |
|||
if (headerLeft) { |
|||
headerLeft.insertBefore(button, headerLeft.firstChild); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 移除移动端菜单按钮 |
|||
*/ |
|||
removeMobileMenuButton: function() { |
|||
const button = document.querySelector('.mobile-menu-btn'); |
|||
if (button) { |
|||
button.remove(); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 初始化现有Toast消息 |
|||
*/ |
|||
initToasts: function() { |
|||
const existingToasts = document.querySelectorAll('.admin-toast'); |
|||
existingToasts.forEach(toast => { |
|||
setTimeout(() => { |
|||
AdminUtils.hideToast(toast); |
|||
}, 3000); |
|||
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
AdminUtils.hideToast(toast); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化表单验证 |
|||
*/ |
|||
initFormValidation: function() { |
|||
const forms = document.querySelectorAll('form'); |
|||
forms.forEach(form => { |
|||
form.addEventListener('submit', (e) => { |
|||
const requiredFields = form.querySelectorAll('[required]'); |
|||
let isValid = true; |
|||
|
|||
requiredFields.forEach(field => { |
|||
if (!field.value.trim()) { |
|||
isValid = false; |
|||
field.style.borderColor = '#f56565'; |
|||
|
|||
// 移除已有的错误提示
|
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
|
|||
// 添加错误提示
|
|||
const error = document.createElement('div'); |
|||
error.className = 'field-error'; |
|||
error.style.cssText = 'color: #f56565; font-size: 0.75rem; margin-top: 0.25rem;'; |
|||
error.textContent = '此字段为必填项'; |
|||
field.parentNode.appendChild(error); |
|||
} else { |
|||
field.style.borderColor = ''; |
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
if (!isValid) { |
|||
e.preventDefault(); |
|||
AdminUtils.showToast('error', '请填写所有必填字段'); |
|||
} |
|||
}); |
|||
|
|||
// 实时验证
|
|||
const requiredFields = form.querySelectorAll('[required]'); |
|||
requiredFields.forEach(field => { |
|||
field.addEventListener('blur', () => { |
|||
if (!field.value.trim()) { |
|||
field.style.borderColor = '#f56565'; |
|||
} else { |
|||
field.style.borderColor = ''; |
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化表格操作 |
|||
*/ |
|||
initTableActions: function() { |
|||
// 表格行点击
|
|||
const tableRows = document.querySelectorAll('tbody tr'); |
|||
tableRows.forEach(row => { |
|||
row.addEventListener('click', (e) => { |
|||
// 如果点击的是按钮或链接，不执行行点击事件
|
|||
if (e.target.closest('button, a, select, input')) { |
|||
return; |
|||
} |
|||
|
|||
// 高亮当前行
|
|||
tableRows.forEach(r => r.classList.remove('selected')); |
|||
row.classList.add('selected'); |
|||
}); |
|||
}); |
|||
|
|||
// 状态选择器
|
|||
const statusSelects = document.querySelectorAll('.status-select'); |
|||
statusSelects.forEach(select => { |
|||
select.addEventListener('change', (e) => { |
|||
e.stopPropagation(); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化搜索功能 |
|||
*/ |
|||
initSearch: function() { |
|||
const searchInputs = document.querySelectorAll('.search-input'); |
|||
searchInputs.forEach(input => { |
|||
// 搜索防抖
|
|||
const debouncedSearch = AdminUtils.debounce((value) => { |
|||
if (value.length >= 2 || value.length === 0) { |
|||
// 可以在这里添加实时搜索功能
|
|||
console.log('搜索:', value); |
|||
} |
|||
}, 300); |
|||
|
|||
input.addEventListener('input', (e) => { |
|||
debouncedSearch(e.target.value); |
|||
}); |
|||
|
|||
// 回车搜索
|
|||
input.addEventListener('keypress', (e) => { |
|||
if (e.key === 'Enter') { |
|||
e.preventDefault(); |
|||
e.target.closest('form').submit(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化文章编辑器增强功能 |
|||
*/ |
|||
initArticleEditor: function() { |
|||
const titleInput = document.getElementById('title'); |
|||
const slugInput = document.getElementById('slug'); |
|||
const contentTextarea = document.getElementById('content'); |
|||
|
|||
if (titleInput && slugInput) { |
|||
// 自动生成slug
|
|||
titleInput.addEventListener('input', AdminUtils.debounce((e) => { |
|||
if (!slugInput.value.trim() || slugInput.dataset.autoGenerated === 'true') { |
|||
const slug = this.generateSlug(e.target.value); |
|||
slugInput.value = slug; |
|||
slugInput.dataset.autoGenerated = 'true'; |
|||
} |
|||
}, 300)); |
|||
|
|||
// 手动编辑slug时停止自动生成
|
|||
slugInput.addEventListener('input', () => { |
|||
slugInput.dataset.autoGenerated = 'false'; |
|||
}); |
|||
} |
|||
|
|||
if (contentTextarea) { |
|||
// 添加工具栏
|
|||
this.addEditorToolbar(contentTextarea); |
|||
|
|||
// Tab键支持
|
|||
contentTextarea.addEventListener('keydown', (e) => { |
|||
if (e.key === 'Tab') { |
|||
e.preventDefault(); |
|||
const start = contentTextarea.selectionStart; |
|||
const end = contentTextarea.selectionEnd; |
|||
const value = contentTextarea.value; |
|||
|
|||
contentTextarea.value = value.substring(0, start) + ' ' + value.substring(end); |
|||
contentTextarea.selectionStart = contentTextarea.selectionEnd = start + 4; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 初始化字符计数
|
|||
this.initCharCounters(); |
|||
}, |
|||
|
|||
/** |
|||
* 生成URL别名 |
|||
*/ |
|||
generateSlug: function(title) { |
|||
return title |
|||
.toLowerCase() |
|||
.replace(/[^\w\u4e00-\u9fa5]+/g, '-') |
|||
.replace(/^-+|-+$/g, '') |
|||
.substring(0, 100); |
|||
}, |
|||
|
|||
/** |
|||
* 添加编辑器工具栏 |
|||
*/ |
|||
addEditorToolbar: function(textarea) { |
|||
const toolbar = document.createElement('div'); |
|||
toolbar.className = 'editor-toolbar'; |
|||
toolbar.innerHTML = ` |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="bold" title="粗体 (Ctrl+B)">💪</button> |
|||
<button type="button" class="editor-btn" data-action="italic" title="斜体 (Ctrl+I)">🌯</button> |
|||
<button type="button" class="editor-btn" data-action="code" title="代码">💻</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="h1" title="标题 1">🏆</button> |
|||
<button type="button" class="editor-btn" data-action="h2" title="标题 2">🥈</button> |
|||
<button type="button" class="editor-btn" data-action="h3" title="标题 3">🥉</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="ul" title="无序列表">📝</button> |
|||
<button type="button" class="editor-btn" data-action="ol" title="有序列表">🔢</button> |
|||
<button type="button" class="editor-btn" data-action="quote" title="引用">💬</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="link" title="链接">🔗</button> |
|||
<button type="button" class="editor-btn" data-action="image" title="图片">🖼️</button> |
|||
</div> |
|||
`;
|
|||
|
|||
// 添加样式
|
|||
const style = document.createElement('style'); |
|||
style.textContent = ` |
|||
.editor-toolbar { |
|||
display: flex; |
|||
gap: 0.5rem; |
|||
padding: 0.75rem; |
|||
background: #f8fafc; |
|||
border: 1px solid #e2e8f0; |
|||
border-bottom: none; |
|||
border-radius: 6px 6px 0 0; |
|||
flex-wrap: wrap; |
|||
} |
|||
.editor-toolbar-group { |
|||
display: flex; |
|||
gap: 0.25rem; |
|||
padding: 0 0.5rem; |
|||
border-right: 1px solid #e2e8f0; |
|||
} |
|||
.editor-toolbar-group:last-child { |
|||
border-right: none; |
|||
} |
|||
.editor-btn { |
|||
background: none; |
|||
border: 1px solid transparent; |
|||
border-radius: 4px; |
|||
padding: 0.25rem 0.5rem; |
|||
cursor: pointer; |
|||
font-size: 0.875rem; |
|||
transition: all 0.2s; |
|||
} |
|||
.editor-btn:hover { |
|||
background: #e2e8f0; |
|||
border-color: #cbd5e0; |
|||
} |
|||
.editor-toolbar + textarea { |
|||
border-radius: 0 0 6px 6px; |
|||
} |
|||
`;
|
|||
|
|||
if (!document.querySelector('#editor-toolbar-style')) { |
|||
style.id = 'editor-toolbar-style'; |
|||
document.head.appendChild(style); |
|||
} |
|||
|
|||
// 插入工具栏
|
|||
textarea.parentNode.insertBefore(toolbar, textarea); |
|||
|
|||
// 绑定事件
|
|||
toolbar.addEventListener('click', (e) => { |
|||
if (e.target.classList.contains('editor-btn')) { |
|||
e.preventDefault(); |
|||
const action = e.target.dataset.action; |
|||
this.executeEditorAction(textarea, action); |
|||
} |
|||
}); |
|||
|
|||
// 键盘快捷键
|
|||
textarea.addEventListener('keydown', (e) => { |
|||
if (e.ctrlKey || e.metaKey) { |
|||
switch (e.key.toLowerCase()) { |
|||
case 'b': |
|||
e.preventDefault(); |
|||
this.executeEditorAction(textarea, 'bold'); |
|||
break; |
|||
case 'i': |
|||
e.preventDefault(); |
|||
this.executeEditorAction(textarea, 'italic'); |
|||
break; |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 执行编辑器动作 |
|||
*/ |
|||
executeEditorAction: function(textarea, action) { |
|||
const start = textarea.selectionStart; |
|||
const end = textarea.selectionEnd; |
|||
const selectedText = textarea.value.substring(start, end); |
|||
const beforeText = textarea.value.substring(0, start); |
|||
const afterText = textarea.value.substring(end); |
|||
|
|||
let insertText = ''; |
|||
let cursorOffset = 0; |
|||
|
|||
switch (action) { |
|||
case 'bold': |
|||
insertText = `**${selectedText || '粗体文字'}**`; |
|||
cursorOffset = selectedText ? 0 : -2; |
|||
break; |
|||
case 'italic': |
|||
insertText = `*${selectedText || '斜体文字'}*`; |
|||
cursorOffset = selectedText ? 0 : -1; |
|||
break; |
|||
case 'code': |
|||
insertText = `\`${selectedText || '代码'}\``; |
|||
cursorOffset = selectedText ? 0 : -1; |
|||
break; |
|||
case 'h1': |
|||
insertText = `# ${selectedText || '标题 1'}`; |
|||
break; |
|||
case 'h2': |
|||
insertText = `## ${selectedText || '标题 2'}`; |
|||
break; |
|||
case 'h3': |
|||
insertText = `### ${selectedText || '标题 3'}`; |
|||
break; |
|||
case 'ul': |
|||
insertText = `- ${selectedText || '列表项'}`; |
|||
break; |
|||
case 'ol': |
|||
insertText = `1. ${selectedText || '列表项'}`; |
|||
break; |
|||
case 'quote': |
|||
insertText = `> ${selectedText || '引用文字'}`; |
|||
break; |
|||
case 'link': |
|||
const linkText = selectedText || '链接文字'; |
|||
insertText = `[${linkText}](URL)`; |
|||
cursorOffset = -4; |
|||
break; |
|||
case 'image': |
|||
const altText = selectedText || '图片描述'; |
|||
insertText = ``; |
|||
cursorOffset = -4; |
|||
break; |
|||
} |
|||
|
|||
textarea.value = beforeText + insertText + afterText; |
|||
const newCursorPos = start + insertText.length + cursorOffset; |
|||
textarea.setSelectionRange(newCursorPos, newCursorPos); |
|||
textarea.focus(); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化字符计数器 |
|||
*/ |
|||
initCharCounters: function() { |
|||
const fields = [ |
|||
{ id: 'title', max: 200 }, |
|||
{ id: 'excerpt', max: 500 }, |
|||
{ id: 'tags', max: 200 }, |
|||
{ id: 'slug', max: 100 } |
|||
]; |
|||
|
|||
fields.forEach(field => { |
|||
const element = document.getElementById(field.id); |
|||
if (element) { |
|||
this.setupCharCounter(element, field.max); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 设置字符计数器 |
|||
*/ |
|||
setupCharCounter: function(element, maxLength) { |
|||
const helpElement = element.nextElementSibling; |
|||
if (!helpElement || !helpElement.classList.contains('form-help')) { |
|||
return; |
|||
} |
|||
|
|||
const originalText = helpElement.textContent; |
|||
|
|||
const updateCounter = () => { |
|||
const currentLength = element.value.length; |
|||
const remaining = maxLength - currentLength; |
|||
|
|||
if (remaining < 50) { |
|||
helpElement.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
helpElement.style.color = remaining < 10 ? '#f56565' : '#ed8936'; |
|||
} else { |
|||
helpElement.textContent = originalText; |
|||
helpElement.style.color = ''; |
|||
} |
|||
}; |
|||
|
|||
element.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
}; |
|||
|
|||
// 全局删除函数
|
|||
window.deleteArticle = function(id, title) { |
|||
if (AdminUtils.confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`, '删除确认')) { |
|||
AdminUtils.ajax(`/admin/articles/${id}`, { |
|||
method: 'DELETE' |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '文章删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
AdminUtils.showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 全局联系信息删除函数
|
|||
window.deleteContact = function(id, title) { |
|||
if (AdminUtils.confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`, '删除确认')) { |
|||
AdminUtils.ajax(`/admin/contacts/${id}`, { |
|||
method: 'DELETE' |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
AdminUtils.showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 全局状态更新函数
|
|||
window.updateContactStatus = function(id, status) { |
|||
if (!status) return; |
|||
|
|||
AdminUtils.ajax(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
body: { status } |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
AdminUtils.showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
}; |
|||
|
|||
// 全局复制邮箱函数
|
|||
window.copyEmail = function(email) { |
|||
AdminUtils.copyToClipboard(email || document.querySelector('[data-email]')?.dataset.email || ''); |
|||
}; |
|||
|
|||
// 全局预览文章函数
|
|||
window.previewArticle = function() { |
|||
const titleElement = document.getElementById('title'); |
|||
const contentElement = document.getElementById('content'); |
|||
|
|||
if (!titleElement || !contentElement) { |
|||
AdminUtils.showToast('error', '无法找到文章内容'); |
|||
return; |
|||
} |
|||
|
|||
const title = titleElement.value.trim(); |
|||
const content = contentElement.value.trim(); |
|||
|
|||
if (!content) { |
|||
AdminUtils.showToast('warning', '请先输入文章内容'); |
|||
contentElement.focus(); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览
|
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes'); |
|||
if (!previewWindow) { |
|||
AdminUtils.showToast('error', '无法打开预览窗口，请检查浏览器弹窗设置'); |
|||
return; |
|||
} |
|||
|
|||
// 基础的Markdown转换
|
|||
let htmlContent = content |
|||
.replace(/\n/g, '<br>') |
|||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
|||
.replace(/\*(.*?)\*/g, '<em>$1</em>') |
|||
.replace(/`(.*?)`/g, '<code>$1</code>') |
|||
.replace(/^# (.*$)/gim, '<h1>$1</h1>') |
|||
.replace(/^## (.*$)/gim, '<h2>$1</h2>') |
|||
.replace(/^### (.*$)/gim, '<h3>$1</h3>'); |
|||
|
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>文章预览 - ${title || '未设置标题'}</title> |
|||
<style> |
|||
body { |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
line-height: 1.7; |
|||
color: #2d3748; |
|||
background: #ffffff; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { |
|||
color: #1a202c; |
|||
margin-top: 2rem; |
|||
margin-bottom: 1rem; |
|||
font-weight: 600; |
|||
} |
|||
h1 { font-size: 2rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; } |
|||
h2 { font-size: 1.5rem; } |
|||
h3 { font-size: 1.25rem; } |
|||
p { margin-bottom: 1rem; } |
|||
code { |
|||
background: #f7fafc; |
|||
padding: 0.25rem 0.5rem; |
|||
border-radius: 0.25rem; |
|||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
|||
font-size: 0.875rem; |
|||
color: #e53e3e; |
|||
} |
|||
pre { |
|||
background: #f7fafc; |
|||
padding: 1rem; |
|||
border-radius: 0.5rem; |
|||
overflow-x: auto; |
|||
border: 1px solid #e2e8f0; |
|||
} |
|||
pre code { |
|||
background: none; |
|||
padding: 0; |
|||
color: #2d3748; |
|||
} |
|||
blockquote { |
|||
border-left: 4px solid #4299e1; |
|||
padding-left: 1rem; |
|||
margin: 1rem 0; |
|||
color: #4a5568; |
|||
background: #f7fafc; |
|||
padding: 1rem; |
|||
border-radius: 0.5rem; |
|||
} |
|||
strong { font-weight: 600; color: #1a202c; } |
|||
em { font-style: italic; color: #4a5568; } |
|||
.preview-header { |
|||
background: #4299e1; |
|||
color: white; |
|||
padding: 1rem; |
|||
margin: -2rem -2rem 2rem -2rem; |
|||
border-radius: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.preview-title { |
|||
font-size: 1.125rem; |
|||
font-weight: 600; |
|||
margin: 0; |
|||
} |
|||
.preview-close { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border: none; |
|||
color: white; |
|||
padding: 0.5rem 1rem; |
|||
border-radius: 0.25rem; |
|||
cursor: pointer; |
|||
font-size: 0.875rem; |
|||
} |
|||
.preview-close:hover { |
|||
background: rgba(255, 255, 255, 0.3); |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="preview-header"> |
|||
<h1 class="preview-title">📄 文章预览</h1> |
|||
<button class="preview-close" onclick="window.close()">关闭预览</button> |
|||
</div> |
|||
<h1>${title || '未设置标题'}</h1> |
|||
<div class="article-content">${htmlContent}</div> |
|||
<script> |
|||
// 键盘快捷键
|
|||
document.addEventListener('keydown', (e) => { |
|||
if (e.key === 'Escape') { |
|||
window.close(); |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
`);
|
|||
previewWindow.document.close(); |
|||
|
|||
// 聚焦到预览窗口
|
|||
previewWindow.focus(); |
|||
}; |
|||
|
|||
// 全局工具函数
|
|||
window.AdminUtils = AdminUtils; |
|||
|
|||
// 页面加载完成后初始化
|
|||
if (document.readyState === 'loading') { |
|||
document.addEventListener('DOMContentLoaded', () => { |
|||
AdminApp.init(); |
|||
}); |
|||
} else { |
|||
AdminApp.init(); |
|||
} |
|||
|
|||
// CSS样式注入（移动端菜单按钮样式）
|
|||
const style = document.createElement('style'); |
|||
style.textContent = ` |
|||
.selected { |
|||
background-color: #ebf8ff !important; |
|||
} |
|||
|
|||
.field-error { |
|||
color: #f56565; |
|||
font-size: 0.75rem; |
|||
margin-top: 0.25rem; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.admin-sidebar { |
|||
transform: translateX(-100%); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.sidebar-open .admin-sidebar { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.sidebar-open::before { |
|||
content: ''; |
|||
position: fixed; |
|||
top: 60px; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 40; |
|||
} |
|||
} |
|||
`;
|
|||
document.head.appendChild(style); |
|||
|
|||
})(); |
|||
@ -1,58 +0,0 @@ |
|||
let loginToastTimer = null; |
|||
function showLoginToast(msg, isSuccess = false) { |
|||
let toast = document.getElementById("login-toast"); |
|||
if (!toast) { |
|||
toast = document.createElement("div"); |
|||
toast.id = "login-toast"; |
|||
toast.style.position = "fixed"; |
|||
toast.style.top = "20px"; |
|||
toast.style.right = "20px"; |
|||
toast.style.left = "auto"; |
|||
toast.style.transform = "none"; |
|||
toast.style.minWidth = "220px"; |
|||
toast.style.maxWidth = "80vw"; |
|||
toast.style.background = isSuccess ? "linear-gradient(90deg,#7ec6f7,#b2f7ef)" : "#fff"; |
|||
toast.style.color = isSuccess ? "#1976d2" : "#ff4d4f"; |
|||
toast.style.fontSize = "1.08rem"; |
|||
toast.style.fontWeight = "600"; |
|||
toast.style.padding = "1.1em 2.2em"; |
|||
toast.style.borderRadius = "18px"; |
|||
toast.style.boxShadow = "0 4px 24px rgba(30,136,229,0.13),0 1.5px 8px rgba(79,209,255,0.08)"; |
|||
toast.style.zIndex = 9999; |
|||
toast.style.textAlign = "center"; |
|||
toast.style.opacity = "0"; |
|||
toast.style.transition = "opacity 0.2s"; |
|||
document.body.appendChild(toast); |
|||
} |
|||
toast.textContent = msg; |
|||
toast.style.opacity = "1"; |
|||
if (loginToastTimer) clearTimeout(loginToastTimer); |
|||
loginToastTimer = setTimeout(() => { |
|||
toast.style.opacity = "0"; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
loginToastTimer = null; |
|||
}, 2000); |
|||
} |
|||
|
|||
const loginForm = document.getElementById("login-form") |
|||
loginForm.onsubmit = async function (e) { |
|||
e.preventDefault() |
|||
const form = e.target |
|||
const data = Object.fromEntries(new FormData(form)) |
|||
const res = await fetch(form.action, { |
|||
method: "POST", |
|||
headers: { "Content-Type": "application/json" }, |
|||
body: JSON.stringify(data), |
|||
}) |
|||
const result = await res.json() |
|||
if (result.success) { |
|||
showLoginToast("登录成功，2秒后跳转到首页", true) |
|||
setTimeout(() => { |
|||
window.location.href = "/" |
|||
}, 2000) |
|||
} else { |
|||
showLoginToast(result.message || "登录失败") |
|||
} |
|||
} |
|||
@ -1,631 +0,0 @@ |
|||
// 用户资料页面JavaScript
|
|||
(function() { |
|||
'use strict'; |
|||
|
|||
// 页面初始化
|
|||
document.addEventListener('DOMContentLoaded', function() { |
|||
initProfilePage(); |
|||
}); |
|||
|
|||
function initProfilePage() { |
|||
bindFormEvents(); |
|||
bindInputValidation(); |
|||
showInitialMessage(); |
|||
initTabs(); |
|||
initAvatarUpload(); |
|||
} |
|||
|
|||
// 绑定表单事件
|
|||
function bindFormEvents() { |
|||
const profileForm = document.getElementById('profileForm'); |
|||
const passwordForm = document.getElementById('passwordForm'); |
|||
|
|||
console.log('Profile form found:', !!profileForm); |
|||
console.log('Password form found:', !!passwordForm); |
|||
|
|||
if (profileForm) { |
|||
profileForm.addEventListener('submit', handleProfileUpdate); |
|||
console.log('Profile form event listener added'); |
|||
} |
|||
|
|||
if (passwordForm) { |
|||
passwordForm.addEventListener('submit', handlePasswordChange); |
|||
console.log('Password form event listener added'); |
|||
} |
|||
} |
|||
|
|||
// 处理用户资料更新
|
|||
async function handleProfileUpdate(event) { |
|||
event.preventDefault(); |
|||
|
|||
const form = event.target; |
|||
const submitBtn = form.querySelector('button[type="submit"]'); |
|||
const originalText = submitBtn.textContent; |
|||
|
|||
try { |
|||
setButtonLoading(submitBtn, true); |
|||
|
|||
const formData = new FormData(form); |
|||
const data = Object.fromEntries(formData.entries()); |
|||
|
|||
// 验证必填字段
|
|||
if (!validateProfileData(data)) { |
|||
return; |
|||
} |
|||
|
|||
const response = await fetch('/profile/update', { |
|||
method: 'POST', |
|||
headers: { 'Content-Type': 'application/json' }, |
|||
body: JSON.stringify(data) |
|||
}); |
|||
|
|||
const result = await response.json(); |
|||
|
|||
if (result.success) { |
|||
showMessage('资料更新成功！', 'success', 'profileForm'); |
|||
updateUserInfoDisplay(result.user); |
|||
} else { |
|||
throw new Error(result.message || '更新失败'); |
|||
} |
|||
|
|||
} catch (error) { |
|||
showMessage(error.message || '更新失败，请重试', 'error', 'profileForm'); |
|||
console.error('Profile update error:', error); |
|||
} finally { |
|||
setButtonLoading(submitBtn, false, originalText); |
|||
} |
|||
} |
|||
|
|||
// 处理密码修改
|
|||
async function handlePasswordChange(event) { |
|||
event.preventDefault(); |
|||
|
|||
const form = event.target; |
|||
const submitBtn = form.querySelector('button[type="submit"]'); |
|||
const originalText = submitBtn.textContent; |
|||
|
|||
try { |
|||
setButtonLoading(submitBtn, true); |
|||
|
|||
const formData = new FormData(form); |
|||
const data = Object.fromEntries(formData.entries()); |
|||
|
|||
if (!validatePasswordData(data)) { |
|||
return; |
|||
} |
|||
|
|||
const response = await fetch('/profile/change-password', { |
|||
method: 'POST', |
|||
headers: { 'Content-Type': 'application/json' }, |
|||
body: JSON.stringify(data) |
|||
}); |
|||
|
|||
const result = await response.json(); |
|||
|
|||
if (result.success) { |
|||
showMessage('密码修改成功！', 'success', 'passwordForm'); |
|||
form.reset(); |
|||
} else { |
|||
throw new Error(result.message || '密码修改失败'); |
|||
} |
|||
|
|||
} catch (error) { |
|||
showMessage(error.message || '密码修改失败，请重试', 'error', 'passwordForm'); |
|||
console.error('Password change error:', error); |
|||
} finally { |
|||
setButtonLoading(submitBtn, false, originalText); |
|||
} |
|||
} |
|||
|
|||
// 验证用户资料数据
|
|||
function validateProfileData(data) { |
|||
if (!data.username.trim()) { |
|||
showMessage('用户名不能为空', 'error', 'profileForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (data.username.length < 3) { |
|||
showMessage('用户名长度不能少于3位', 'error', 'profileForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (data.email && !isValidEmail(data.email)) { |
|||
showMessage('请输入有效的邮箱地址', 'error', 'profileForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (data.avatar && !isValidImageUrl(data.avatar)) { |
|||
showMessage('请输入有效的图片链接或路径', 'error', 'profileForm'); |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 验证密码数据
|
|||
function validatePasswordData(data) { |
|||
const { oldPassword, newPassword, confirmPassword } = data; |
|||
|
|||
if (!oldPassword || !newPassword || !confirmPassword) { |
|||
showMessage('请填写所有密码字段', 'error', 'passwordForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (newPassword.length < 6) { |
|||
showMessage('新密码长度不能少于6位', 'error', 'passwordForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (newPassword !== confirmPassword) { |
|||
showMessage('新密码与确认密码不匹配', 'error', 'passwordForm'); |
|||
return false; |
|||
} |
|||
|
|||
if (oldPassword === newPassword) { |
|||
showMessage('新密码不能与当前密码相同', 'error', 'passwordForm'); |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
} |
|||
|
|||
// 绑定输入验证
|
|||
function bindInputValidation() { |
|||
const inputs = document.querySelectorAll('.form-input, .form-textarea'); |
|||
|
|||
inputs.forEach(input => { |
|||
input.addEventListener('blur', function() { |
|||
validateField(this); |
|||
}); |
|||
|
|||
input.addEventListener('input', function() { |
|||
clearFieldError(this); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
// 验证单个字段
|
|||
function validateField(field) { |
|||
const value = field.value.trim(); |
|||
const fieldName = field.name; |
|||
|
|||
clearFieldError(field); |
|||
|
|||
let isValid = true; |
|||
let errorMessage = ''; |
|||
|
|||
switch (fieldName) { |
|||
case 'username': |
|||
if (!value) { |
|||
isValid = false; |
|||
errorMessage = '用户名不能为空'; |
|||
} else if (value.length < 3) { |
|||
isValid = false; |
|||
errorMessage = '用户名长度不能少于3位'; |
|||
} |
|||
break; |
|||
|
|||
case 'email': |
|||
if (value && !isValidEmail(value)) { |
|||
isValid = false; |
|||
errorMessage = '请输入有效的邮箱地址'; |
|||
} |
|||
break; |
|||
|
|||
case 'avatar': |
|||
if (value && !isValidImageUrl(value)) { |
|||
isValid = false; |
|||
errorMessage = '请输入有效的图片链接或路径'; |
|||
} |
|||
break; |
|||
|
|||
case 'newPassword': |
|||
if (value && value.length < 6) { |
|||
isValid = false; |
|||
errorMessage = '密码长度不能少于6位'; |
|||
} |
|||
break; |
|||
} |
|||
|
|||
if (!isValid) { |
|||
showFieldError(field, errorMessage); |
|||
} |
|||
|
|||
return isValid; |
|||
} |
|||
|
|||
// 显示字段错误
|
|||
function showFieldError(field, message) { |
|||
field.classList.add('error'); |
|||
|
|||
let errorElement = field.parentNode.querySelector('.error-message'); |
|||
if (!errorElement) { |
|||
errorElement = document.createElement('div'); |
|||
errorElement.className = 'error-message'; |
|||
field.parentNode.appendChild(errorElement); |
|||
} |
|||
|
|||
errorElement.textContent = message; |
|||
errorElement.classList.add('show'); |
|||
} |
|||
|
|||
// 清除字段错误
|
|||
function clearFieldError(field) { |
|||
field.classList.remove('error'); |
|||
|
|||
const errorElement = field.parentNode.querySelector('.error-message'); |
|||
if (errorElement) { |
|||
errorElement.classList.remove('show'); |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱格式
|
|||
function isValidEmail(email) { |
|||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|||
return emailRegex.test(email); |
|||
} |
|||
|
|||
// 验证图片URL格式（支持相对路径和绝对路径）
|
|||
function isValidImageUrl(url) { |
|||
if (!url) return true; // 空值时认为有效
|
|||
|
|||
// 支持的图片格式
|
|||
const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i; |
|||
|
|||
// 检查是否以支持的图片格式结尾
|
|||
if (imageExtensions.test(url)) { |
|||
return true; |
|||
} |
|||
|
|||
// 检查是否为完整的URL（http或https开头）
|
|||
try { |
|||
const urlObj = new URL(url); |
|||
return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'; |
|||
} catch { |
|||
// 如果不是完整URL，检查是否为相对路径（以/开头）
|
|||
return url.startsWith('/'); |
|||
} |
|||
} |
|||
|
|||
// 设置按钮加载状态
|
|||
function setButtonLoading(button, loading, originalText = null) { |
|||
if (loading) { |
|||
button.disabled = true; |
|||
button.textContent = '处理中...'; |
|||
button.classList.add('loading'); |
|||
} else { |
|||
button.disabled = false; |
|||
button.textContent = originalText || button.textContent; |
|||
button.classList.remove('loading'); |
|||
} |
|||
} |
|||
|
|||
// 显示消息
|
|||
function showMessage(message, type = 'info', formId = null) { |
|||
console.log('showMessage called with:', { message, type, formId }); |
|||
removeExistingMessages(); |
|||
|
|||
let targetContainer; |
|||
if (formId === 'profileForm') { |
|||
targetContainer = document.querySelector('#profileForm .message-container'); |
|||
console.log('Looking for profileForm message container:', !!targetContainer); |
|||
} else if (formId === 'passwordForm') { |
|||
targetContainer = document.querySelector('#passwordForm .message-container'); |
|||
console.log('Looking for passwordForm message container:', !!targetContainer); |
|||
} else { |
|||
// 如果没有指定表单，使用默认容器
|
|||
targetContainer = document.querySelector('.profile-content'); |
|||
console.log('Using default container:', !!targetContainer); |
|||
} |
|||
|
|||
if (!targetContainer) { |
|||
console.warn('Message container not found for formId:', formId); |
|||
console.warn('Available containers:', document.querySelectorAll('.message-container')); |
|||
// 尝试使用备用容器
|
|||
targetContainer = document.querySelector('.message-container'); |
|||
if (!targetContainer) { |
|||
console.error('No message container found anywhere'); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
console.log('Target container found:', targetContainer); |
|||
|
|||
const messageElement = document.createElement('div'); |
|||
messageElement.className = `message ${type} show`; |
|||
|
|||
const messageText = document.createElement('span'); |
|||
messageText.textContent = message; |
|||
messageElement.appendChild(messageText); |
|||
|
|||
const closeButton = document.createElement('button'); |
|||
closeButton.className = 'message-close'; |
|||
closeButton.type = 'button'; |
|||
closeButton.innerHTML = '×'; |
|||
closeButton.onclick = function() { |
|||
messageElement.remove(); |
|||
}; |
|||
messageElement.appendChild(closeButton); |
|||
|
|||
targetContainer.appendChild(messageElement); |
|||
console.log('Message added to container'); |
|||
|
|||
// 5秒后自动隐藏
|
|||
setTimeout(() => { |
|||
if (messageElement.parentNode) { |
|||
messageElement.remove(); |
|||
} |
|||
}, 5000); |
|||
} |
|||
|
|||
// 关闭指定消息
|
|||
function closeMessage(messageId) { |
|||
const messageElement = document.getElementById(messageId); |
|||
if (messageElement) { |
|||
messageElement.remove(); |
|||
} |
|||
} |
|||
|
|||
// 移除现有消息
|
|||
function removeExistingMessages() { |
|||
const existingMessages = document.querySelectorAll('.message'); |
|||
existingMessages.forEach(msg => msg.remove()); |
|||
} |
|||
|
|||
// 显示初始消息
|
|||
function showInitialMessage() { |
|||
const urlParams = new URLSearchParams(window.location.search); |
|||
const msg = urlParams.get('msg'); |
|||
const msgType = urlParams.get('type') || 'info'; |
|||
|
|||
if (msg) { |
|||
showMessage(decodeURIComponent(msg), msgType); |
|||
const newUrl = window.location.pathname; |
|||
window.history.replaceState({}, document.title, newUrl); |
|||
} |
|||
} |
|||
|
|||
// 更新用户信息显示
|
|||
function updateUserInfoDisplay(user) { |
|||
const infoItems = document.querySelectorAll('.info-value'); |
|||
infoItems.forEach(item => { |
|||
const label = item.previousElementSibling.textContent; |
|||
if (label.includes('最后更新')) { |
|||
item.textContent = new Date().toLocaleDateString('zh-CN'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 重置表单
|
|||
function resetForm() { |
|||
const form = document.getElementById('profileForm'); |
|||
if (form) { |
|||
form.reset(); |
|||
const inputs = form.querySelectorAll('.form-input, .form-textarea'); |
|||
inputs.forEach(input => clearFieldError(input)); |
|||
showMessage('表单已重置', 'info'); |
|||
} |
|||
} |
|||
|
|||
// 重置密码表单
|
|||
function resetPasswordForm() { |
|||
console.log('resetPasswordForm called'); |
|||
const form = document.getElementById('passwordForm'); |
|||
console.log('Password form found:', !!form); |
|||
|
|||
if (form) { |
|||
form.reset(); |
|||
const inputs = form.querySelectorAll('.form-input'); |
|||
inputs.forEach(input => clearFieldError(input)); |
|||
|
|||
// 查找消息容器
|
|||
const messageContainer = form.querySelector('.message-container'); |
|||
console.log('Message container found:', !!messageContainer); |
|||
|
|||
showMessage('密码表单已清空', 'info', 'passwordForm'); |
|||
} else { |
|||
console.error('Password form not found'); |
|||
} |
|||
} |
|||
|
|||
// 初始化标签页
|
|||
function initTabs() { |
|||
const tabBtns = document.querySelectorAll('.tab-btn'); |
|||
const tabPanes = document.querySelectorAll('.tab-pane'); |
|||
|
|||
console.log('Initializing tabs...'); |
|||
console.log('Tab buttons found:', tabBtns.length); |
|||
console.log('Tab panes found:', tabPanes.length); |
|||
|
|||
if (tabBtns.length === 0 || tabPanes.length === 0) { |
|||
console.warn('Tab elements not found'); |
|||
return; |
|||
} |
|||
|
|||
tabBtns.forEach(btn => { |
|||
btn.addEventListener('click', function() { |
|||
const targetTab = this.getAttribute('data-tab'); |
|||
console.log('Tab clicked:', targetTab); // 调试日志
|
|||
|
|||
// 移除所有活动状态
|
|||
tabBtns.forEach(b => b.classList.remove('active')); |
|||
tabPanes.forEach(p => p.classList.remove('active')); |
|||
|
|||
// 添加活动状态到当前标签
|
|||
this.classList.add('active'); |
|||
const targetPane = document.getElementById(targetTab + '-tab'); |
|||
if (targetPane) { |
|||
targetPane.classList.add('active'); |
|||
console.log('Tab pane activated:', targetTab + '-tab'); // 调试日志
|
|||
|
|||
// 重新绑定表单事件，确保新显示的Tab中的表单能正常工作
|
|||
setTimeout(() => { |
|||
bindFormEvents(); |
|||
}, 100); |
|||
} else { |
|||
console.error('Target tab pane not found:', targetTab + '-tab'); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
// 确保默认标签页是激活状态
|
|||
const defaultTab = document.querySelector('.tab-btn.active'); |
|||
const defaultPane = document.querySelector('.tab-pane.active'); |
|||
if (defaultTab && defaultPane) { |
|||
console.log('Default tab initialized:', defaultTab.getAttribute('data-tab')); |
|||
} |
|||
} |
|||
|
|||
// 导出函数供HTML调用
|
|||
window.resetForm = resetForm; |
|||
window.resetPasswordForm = resetPasswordForm; |
|||
window.closeMessage = closeMessage; |
|||
window.handleAvatarSelect = handleAvatarSelect; |
|||
|
|||
// 初始化头像上传功能
|
|||
function initAvatarUpload() { |
|||
const avatarInput = document.getElementById('avatarFile'); |
|||
const avatarPreview = document.querySelector('.avatar-preview'); |
|||
const avatarUrlInput = document.getElementById('avatar'); |
|||
|
|||
if (avatarUrlInput) { |
|||
avatarUrlInput.addEventListener('input', function() { |
|||
if (this.value.trim()) { |
|||
updateAvatarPreview(this.value.trim()); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 处理头像文件选择
|
|||
function handleAvatarSelect(input) { |
|||
const file = input.files[0]; |
|||
if (!file) return; |
|||
|
|||
// 验证文件类型
|
|||
if (!file.type.startsWith('image/')) { |
|||
showMessage('请选择图片文件', 'error', 'profileForm'); |
|||
return; |
|||
} |
|||
|
|||
// 验证文件大小 (5MB)
|
|||
if (file.size > 5 * 1024 * 1024) { |
|||
showMessage('图片文件大小不能超过 5MB', 'error', 'profileForm'); |
|||
return; |
|||
} |
|||
|
|||
// 预览图片
|
|||
const reader = new FileReader(); |
|||
reader.onload = function(e) { |
|||
updateAvatarPreview(e.target.result); |
|||
}; |
|||
reader.readAsDataURL(file); |
|||
|
|||
// 上传文件
|
|||
uploadAvatarFile(file); |
|||
} |
|||
|
|||
// 更新头像预览
|
|||
function updateAvatarPreview(imageSrc) { |
|||
const avatarPreview = document.querySelector('.avatar-preview'); |
|||
const sidebarAvatar = document.querySelector('.profile-avatar'); |
|||
|
|||
if (avatarPreview) { |
|||
// 移除现有内容
|
|||
avatarPreview.innerHTML = ''; |
|||
|
|||
// 创建新的图片元素
|
|||
const img = document.createElement('img'); |
|||
img.src = imageSrc; |
|||
img.alt = '头像预览'; |
|||
img.id = 'avatarPreviewImg'; |
|||
avatarPreview.appendChild(img); |
|||
|
|||
// 添加覆盖层
|
|||
const overlay = document.createElement('div'); |
|||
overlay.className = 'upload-overlay'; |
|||
overlay.innerHTML = '<div><div>📷</div><div>点击更换头像</div></div>'; |
|||
avatarPreview.appendChild(overlay); |
|||
} |
|||
|
|||
// 同时更新侧边栏头像
|
|||
if (sidebarAvatar) { |
|||
sidebarAvatar.innerHTML = `<img src="${imageSrc}" alt="用户头像">`; |
|||
} |
|||
} |
|||
|
|||
// 上传头像文件
|
|||
async function uploadAvatarFile(file) { |
|||
const progressContainer = document.getElementById('uploadProgress'); |
|||
const progressBar = document.getElementById('uploadProgressBar'); |
|||
|
|||
try { |
|||
// 显示进度条
|
|||
if (progressContainer) { |
|||
progressContainer.style.display = 'block'; |
|||
progressBar.style.width = '0%'; |
|||
} |
|||
|
|||
const formData = new FormData(); |
|||
formData.append('avatar', file); |
|||
|
|||
// 模拟进度更新
|
|||
let progress = 0; |
|||
const progressInterval = setInterval(() => { |
|||
progress += Math.random() * 30; |
|||
if (progress > 90) { |
|||
clearInterval(progressInterval); |
|||
progress = 90; |
|||
} |
|||
if (progressBar) { |
|||
progressBar.style.width = progress + '%'; |
|||
} |
|||
}, 200); |
|||
|
|||
const response = await fetch('/profile/upload-avatar', { |
|||
method: 'POST', |
|||
body: formData |
|||
}); |
|||
|
|||
const result = await response.json(); |
|||
|
|||
// 清除进度条动画
|
|||
clearInterval(progressInterval); |
|||
|
|||
if (result.success) { |
|||
// 完成进度条
|
|||
if (progressBar) { |
|||
progressBar.style.width = '100%'; |
|||
} |
|||
|
|||
// 更新头像URL输入框
|
|||
const avatarUrlInput = document.getElementById('avatar'); |
|||
if (avatarUrlInput && result.url) { |
|||
avatarUrlInput.value = result.url; |
|||
} |
|||
|
|||
showMessage('头像上传成功！', 'success', 'profileForm'); |
|||
|
|||
// 隐藏进度条
|
|||
setTimeout(() => { |
|||
if (progressContainer) { |
|||
progressContainer.style.display = 'none'; |
|||
} |
|||
}, 1000); |
|||
|
|||
} else { |
|||
throw new Error(result.message || '头像上传失败'); |
|||
} |
|||
|
|||
} catch (error) { |
|||
showMessage(error.message || '头像上传失败，请重试', 'error', 'profileForm'); |
|||
console.error('Avatar upload error:', error); |
|||
|
|||
// 隐藏进度条
|
|||
if (progressContainer) { |
|||
progressContainer.style.display = 'none'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
})(); |
|||
@ -1,48 +0,0 @@ |
|||
// 注册页面验证码点击刷新功能
|
|||
document.addEventListener('DOMContentLoaded', function() { |
|||
const captchaImg = document.querySelector('img[src="/captcha"]'); |
|||
|
|||
if (captchaImg) { |
|||
// 添加点击事件
|
|||
captchaImg.addEventListener('click', function() { |
|||
// 添加时间戳防止缓存
|
|||
const timestamp = new Date().getTime(); |
|||
this.src = `/captcha?t=${timestamp}`; |
|||
|
|||
// 添加点击反馈效果
|
|||
this.style.transform = 'scale(0.95)'; |
|||
setTimeout(() => { |
|||
this.style.transform = 'scale(1)'; |
|||
}, 150); |
|||
}); |
|||
|
|||
// 添加鼠标样式提示
|
|||
captchaImg.style.cursor = 'pointer'; |
|||
captchaImg.title = '点击刷新验证码'; |
|||
|
|||
// 添加悬停效果
|
|||
captchaImg.addEventListener('mouseenter', function() { |
|||
this.style.opacity = '0.8'; |
|||
this.style.transition = 'opacity 0.2s ease'; |
|||
}); |
|||
|
|||
captchaImg.addEventListener('mouseleave', function() { |
|||
this.style.opacity = '1'; |
|||
}); |
|||
} |
|||
|
|||
// 表单验证
|
|||
const registerForm = document.querySelector('form[action="/register"]'); |
|||
if (registerForm) { |
|||
registerForm.addEventListener('submit', function(e) { |
|||
const password = document.getElementById('password'); |
|||
const confirmPassword = document.getElementById('confirm_password'); |
|||
|
|||
if (password.value !== confirmPassword.value) { |
|||
e.preventDefault(); |
|||
alert('两次输入的密码不一致，请重新输入'); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
@ -1,429 +0,0 @@ |
|||
class BgSwitcher { |
|||
constructor(images, options = {}) { |
|||
this.images = images |
|||
// 从localStorage中读取保存的索引
|
|||
const savedIndex = localStorage.getItem("bgSwitcherIndex") |
|||
if (savedIndex !== null && !isNaN(savedIndex)) { |
|||
this.index = parseInt(savedIndex) |
|||
} else { |
|||
this.index = 0 |
|||
} |
|||
this.container = options.container || document.body |
|||
this.interval = options.interval || 3000 |
|||
this.effect = options.effect || BgSwitcher.fadeEffect |
|||
this.timer = null |
|||
this.apiTimer = null |
|||
this.apiUrl = null |
|||
this.apiInterval = 30000 |
|||
this.startTime = 0 |
|||
// 从localStorage中读取保存的剩余时间
|
|||
const savedRemainingTime = localStorage.getItem("bgSwitcherRemainingTime") |
|||
this.remainingTime = |
|||
savedRemainingTime !== null && !isNaN(savedRemainingTime) && savedRemainingTime >= 0 |
|||
? parseInt(savedRemainingTime) |
|||
: this.interval |
|||
this.bgLayer = document.createElement("div") |
|||
this.isInitialLoad = true |
|||
|
|||
// 从localStorage中读取API模式状态
|
|||
const isApiMode = localStorage.getItem("bgSwitcherIsApiMode") === "true" |
|||
if (isApiMode) { |
|||
this.apiUrl = localStorage.getItem("bgSwitcherApiUrl") || null |
|||
const savedApiInterval = localStorage.getItem("bgSwitcherApiInterval") |
|||
this.apiInterval = savedApiInterval !== null && !isNaN(savedApiInterval) ? parseInt(savedApiInterval) : 30000 |
|||
} |
|||
// 监听页面可见性变化
|
|||
this.handleVisibilityChange = this.handleVisibilityChange.bind(this) |
|||
document.addEventListener("visibilitychange", this.handleVisibilityChange) |
|||
|
|||
// 监听页面卸载事件，确保保存状态
|
|||
this.handleBeforeUnload = this.handleBeforeUnload.bind(this) |
|||
window.addEventListener("beforeunload", this.handleBeforeUnload) |
|||
this.bgLayer.style.position = "fixed" |
|||
this.bgLayer.style.top = 0 |
|||
this.bgLayer.style.left = 0 |
|||
this.bgLayer.style.width = "100vw" |
|||
this.bgLayer.style.height = "100vh" |
|||
this.bgLayer.style.zIndex = "-1" |
|||
this.bgLayer.style.transition = "opacity 1s" |
|||
this.bgLayer.style.opacity = 1 |
|||
this.bgLayer.style.backgroundSize = "cover" |
|||
this.bgLayer.style.backgroundColor = "#000000" |
|||
this.bgLayer.style.backgroundPosition = "center" |
|||
this.bgLayer.style.filter = "brightness(0.68)" |
|||
this.container.style.backgroundColor = "#000000" |
|||
} |
|||
|
|||
setBg(url) { |
|||
// 切换时先预加载目标图片，加载完成后再切换显示
|
|||
const img = new Image() |
|||
img.onload = () => { |
|||
if (this.isInitialLoad) { |
|||
// 初始加载时，先设置背景图再添加到页面
|
|||
this.bgLayer.style.backgroundImage = `url(${url})` |
|||
this.container.appendChild(this.bgLayer) |
|||
this.isInitialLoad = false |
|||
} else { |
|||
this.effect(this.bgLayer, url) |
|||
} |
|||
if (!this.isApiMode) { |
|||
this.scheduleNext() |
|||
} |
|||
} |
|||
img.onerror = () => { |
|||
// 加载失败时处理
|
|||
console.warn("背景图片加载失败:", url) |
|||
if (this.isInitialLoad) { |
|||
// 初始加载失败时，也添加背景层到页面
|
|||
this.container.appendChild(this.bgLayer) |
|||
this.isInitialLoad = false |
|||
} |
|||
} |
|||
img.src = url |
|||
} |
|||
|
|||
next() { |
|||
const nextIndex = (this.index + 1) % this.images.length |
|||
const nextUrl = this.images[nextIndex] |
|||
// 切换前先预加载
|
|||
const img = new Image() |
|||
img.onload = () => { |
|||
this.index = nextIndex |
|||
// 保存索引到localStorage
|
|||
localStorage.setItem("bgSwitcherIndex", this.index) |
|||
this.effect(this.bgLayer, nextUrl) |
|||
this.scheduleNext() |
|||
} |
|||
img.onerror = () => { |
|||
// 加载失败时跳过
|
|||
console.warn("背景图片加载失败:", nextUrl) |
|||
this.scheduleNext() |
|||
} |
|||
img.src = nextUrl |
|||
} |
|||
|
|||
prev() { |
|||
const prevIndex = (this.index - 1 + this.images.length) % this.images.length |
|||
const prevUrl = this.images[prevIndex] |
|||
// 切换前先预加载
|
|||
const img = new Image() |
|||
img.onload = () => { |
|||
this.index = prevIndex |
|||
// 保存索引到localStorage
|
|||
localStorage.setItem("bgSwitcherIndex", this.index) |
|||
this.effect(this.bgLayer, prevUrl) |
|||
this.scheduleNext() |
|||
} |
|||
img.onerror = () => { |
|||
// 加载失败时跳过
|
|||
console.warn("背景图片加载失败:", prevUrl) |
|||
this.scheduleNext() |
|||
} |
|||
img.src = prevUrl |
|||
} |
|||
|
|||
start() { |
|||
if (this.timer || this.apiTimer) return |
|||
|
|||
// 如果处于API模式，启动API请求
|
|||
if (this.apiUrl) { |
|||
this.fetchRandomWallpaper() |
|||
} else { |
|||
// 否则使用默认轮播
|
|||
this.setBg(this.images[this.index]) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 安排下一次背景切换 |
|||
*/ |
|||
scheduleNext() { |
|||
if (this.timer) { |
|||
clearTimeout(this.timer) |
|||
} |
|||
|
|||
// 记录开始时间
|
|||
this.startTime = Date.now() |
|||
|
|||
// 使用剩余时间或默认间隔
|
|||
const timeToWait = this.remainingTime > 0 ? this.remainingTime : this.interval |
|||
|
|||
this.timer = setTimeout(() => { |
|||
this.remainingTime = this.interval // 重置剩余时间
|
|||
// 保存剩余时间到localStorage
|
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
this.next() |
|||
}, timeToWait) |
|||
} |
|||
|
|||
/** |
|||
* 处理页面可见性变化 |
|||
*/ |
|||
handleVisibilityChange() { |
|||
if (document.hidden) { |
|||
// 页面不可见时，暂停计时器并计算剩余时间
|
|||
if (this.timer) { |
|||
const elapsedTime = Date.now() - this.startTime |
|||
this.remainingTime = Math.max(0, this.remainingTime - elapsedTime) |
|||
// 保存剩余时间到localStorage
|
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
clearTimeout(this.timer) |
|||
this.timer = null |
|||
} |
|||
// 暂停API计时器
|
|||
if (this.apiTimer) { |
|||
const elapsedTime = Date.now() - this.startTime |
|||
this.remainingTime = Math.max(0, this.remainingTime - elapsedTime) |
|||
// 保存剩余时间到localStorage
|
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
clearTimeout(this.apiTimer) |
|||
this.apiTimer = null |
|||
} |
|||
} else { |
|||
// 页面可见时，恢复计时器
|
|||
if (!this.timer && !this.apiTimer && !this.apiUrl) { |
|||
// 如果没有活跃的计时器，使用默认的轮播
|
|||
this.scheduleNext() |
|||
} else if (this.apiTimer === null && this.apiUrl) { |
|||
// 如果处于API模式但计时器未运行，恢复API请求
|
|||
this.scheduleNextApiRequest() |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 处理页面卸载事件，确保保存状态 |
|||
*/ |
|||
handleBeforeUnload() { |
|||
// 保存当前索引
|
|||
localStorage.setItem("bgSwitcherIndex", this.index) |
|||
|
|||
// 保存API模式状态
|
|||
localStorage.setItem("bgSwitcherIsApiMode", !!this.apiUrl) |
|||
if (this.apiUrl) { |
|||
localStorage.setItem("bgSwitcherApiUrl", this.apiUrl) |
|||
localStorage.setItem("bgSwitcherApiInterval", this.apiInterval) |
|||
} |
|||
|
|||
// 如果计时器在运行，计算并保存剩余时间
|
|||
if (this.timer || this.apiTimer) { |
|||
const elapsedTime = Date.now() - this.startTime |
|||
this.remainingTime = Math.max(0, this.remainingTime - elapsedTime) |
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
} |
|||
} |
|||
|
|||
stop() { |
|||
if (this.timer) { |
|||
clearTimeout(this.timer) |
|||
this.timer = null |
|||
} |
|||
// 重置剩余时间
|
|||
this.remainingTime = this.interval |
|||
// 保存剩余时间到localStorage
|
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
} |
|||
|
|||
/** |
|||
* 从API获取随机壁纸并定期更新 |
|||
* @param {string} apiUrl - 获取随机壁纸的API地址 |
|||
* @param {number} interval - 请求间隔时间(毫秒) |
|||
*/ |
|||
startRandomApiSwitch(apiUrl, interval = 30000) { |
|||
this.stop() // 停止当前的轮播
|
|||
this.apiInterval = interval |
|||
this.apiUrl = apiUrl |
|||
|
|||
// 创建专用的API计时器
|
|||
this.apiTimer = null |
|||
|
|||
// 立即请求一次
|
|||
this.fetchRandomWallpaper() |
|||
} |
|||
|
|||
/** |
|||
* 从API获取随机壁纸 |
|||
*/ |
|||
fetchRandomWallpaper() { |
|||
// 记录开始时间，用于计算剩余时间
|
|||
this.startTime = Date.now() |
|||
this.remainingTime = this.apiInterval |
|||
|
|||
fetch(this.apiUrl) |
|||
.then(response => { |
|||
console.log(response) |
|||
|
|||
if (!response.ok) { |
|||
throw new Error(`HTTP error! status: ${response.status}`) |
|||
} |
|||
return response.json() |
|||
}) |
|||
.then(data => { |
|||
// 假设API返回的数据格式为 { wallpaperUrl: '图片地址' }
|
|||
const wallpaperUrl = data.wallpaperUrl || data.url || data.image |
|||
if (wallpaperUrl) { |
|||
// 预加载图片
|
|||
const img = new Image() |
|||
img.onload = () => { |
|||
if (this.isInitialLoad) { |
|||
// 初始加载时，先设置背景图再添加到页面
|
|||
this.container.appendChild(this.bgLayer) |
|||
this.isInitialLoad = false |
|||
} |
|||
// 保存当前索引（使用-1标记这是API获取的图片）
|
|||
this.index = -1 |
|||
localStorage.setItem("bgSwitcherIndex", -1) |
|||
this.effect(this.bgLayer, wallpaperUrl) |
|||
this.scheduleNextApiRequest() |
|||
} |
|||
img.onerror = () => { |
|||
console.warn("API返回的壁纸加载失败:", wallpaperUrl) |
|||
this.scheduleNextApiRequest() |
|||
} |
|||
img.src = wallpaperUrl |
|||
} else { |
|||
console.warn("背景图片加载失败:", url) |
|||
if (this.isInitialLoad) { |
|||
console.warn("API返回的数据格式不正确，未找到壁纸地址") |
|||
// 初始加载失败时，也添加背景层到页面
|
|||
this.container.appendChild(this.bgLayer) |
|||
this.isInitialLoad = false |
|||
} |
|||
this.scheduleNextApiRequest() |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error("获取随机壁纸失败:", error) |
|||
this.scheduleNextApiRequest() |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* 安排下一次API请求 |
|||
*/ |
|||
scheduleNextApiRequest() { |
|||
if (this.apiTimer) { |
|||
clearTimeout(this.apiTimer) |
|||
} |
|||
|
|||
// 使用剩余时间或默认间隔
|
|||
const timeToWait = this.remainingTime > 0 ? this.remainingTime : this.apiInterval |
|||
|
|||
this.apiTimer = setTimeout(() => { |
|||
this.remainingTime = this.apiInterval // 重置剩余时间
|
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
this.fetchRandomWallpaper() |
|||
}, timeToWait) |
|||
} |
|||
|
|||
/** |
|||
* 停止API随机壁纸请求 |
|||
*/ |
|||
stopRandomApiSwitch() { |
|||
if (this.apiTimer) { |
|||
clearTimeout(this.apiTimer) |
|||
this.apiTimer = null |
|||
} |
|||
this.apiUrl = null |
|||
// 重置剩余时间
|
|||
this.remainingTime = this.interval |
|||
localStorage.setItem("bgSwitcherRemainingTime", this.remainingTime) |
|||
} |
|||
|
|||
static fadeEffect(layer, url) { |
|||
layer.style.transition = "opacity 1s" |
|||
layer.style.opacity = 0 |
|||
setTimeout(() => { |
|||
layer.style.backgroundImage = `url(${url})` |
|||
layer.style.opacity = 1 |
|||
}, 500) |
|||
} |
|||
} |
|||
|
|||
// 使用示例
|
|||
// 1. 默认本地图片轮播
|
|||
// const images = [
|
|||
// '/static/bg2.webp',
|
|||
// '/static/bg.jpg',
|
|||
// ];
|
|||
// const bgSwitcher = new BgSwitcher(images, { interval: 5000 });
|
|||
// 启动轮播
|
|||
// bgSwitcher.start();
|
|||
|
|||
// 2. 随机API壁纸示例
|
|||
// 创建一个新的BgSwitcher实例用于API模式
|
|||
let apiBgSwitcher = new BgSwitcher([], { interval: 5000 }) // API模式不需要本地图片列表
|
|||
|
|||
// 模拟API函数，实际使用时替换为真实API地址
|
|||
function createMockWallpaperApi() { |
|||
// 模拟壁纸地址库
|
|||
const mockWallpapers = ["/static/bg2.webp", "/static/bg.jpg"] |
|||
|
|||
// 创建一个简单的服务器端点
|
|||
if (window.mockWallpaperServer) { |
|||
clearInterval(window.mockWallpaperServer) |
|||
} |
|||
|
|||
// 模拟API响应
|
|||
window.fetchRandomWallpaper = function () { |
|||
return new Promise(resolve => { |
|||
setTimeout(() => { |
|||
const randomIndex = Math.floor(Math.random() * mockWallpapers.length) |
|||
resolve({ |
|||
ok: true, |
|||
json() { |
|||
return { |
|||
wallpaperUrl: mockWallpapers[randomIndex], |
|||
} |
|||
}, |
|||
}) |
|||
}, 500) |
|||
}) |
|||
} |
|||
|
|||
// 替换原生fetch以模拟API调用
|
|||
window.originalFetch = window.fetch |
|||
window.fetch = function (url, opts = {}) { |
|||
if (url === "/api/random-wallpaper") { |
|||
return window.fetchRandomWallpaper() |
|||
} |
|||
return window.originalFetch(...arguments) |
|||
} |
|||
|
|||
console.log("模拟壁纸API已启动") |
|||
} |
|||
|
|||
// 初始化模拟API
|
|||
createMockWallpaperApi() |
|||
|
|||
// 启动API模式的随机壁纸切换（每10秒请求一次）
|
|||
apiBgSwitcher.startRandomApiSwitch("/api/random-wallpaper", 10000) |
|||
|
|||
window.addEventListener("pageshow", function (event) { |
|||
if (event.persisted) { |
|||
apiBgSwitcher = new BgSwitcher([], { interval: 5000 }) |
|||
apiBgSwitcher.startRandomApiSwitch("/api/random-wallpaper", 10000) |
|||
} |
|||
}) |
|||
|
|||
// fetch("https://pic.xieyaxin.top/random.php")
|
|||
// .then(response => {
|
|||
// if(response.body instanceof ReadableStream) {
|
|||
// return response.blob()
|
|||
// }
|
|||
// return response.json()
|
|||
// })
|
|||
// .then(data => {
|
|||
// console.log(URL.createObjectURL(data));
|
|||
|
|||
// })
|
|||
|
|||
// 要停止API模式，使用
|
|||
// apiBgSwitcher.stopRandomApiSwitch();
|
|||
|
|||
// 要切换回本地图片轮播，使用
|
|||
// apiBgSwitcher.stopRandomApiSwitch();
|
|||
// apiBgSwitcher.start();
|
|||
|
|||
// 启动默认轮播
|
|||
// bgSwitcher.start();
|
|||
@ -1,225 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current 新建文章 |
|||
h1.page-title 新建文章 |
|||
p.page-subtitle 创建一篇新的文章内容 |
|||
|
|||
//- 文章表单 |
|||
.content-section |
|||
form.article-form(method="POST" action="/admin/articles") |
|||
.form-grid |
|||
//- 左侧主要内容 |
|||
.form-main |
|||
.form-group |
|||
label.form-label(for="title") 文章标题 * |
|||
input.form-input( |
|||
type="text" |
|||
id="title" |
|||
name="title" |
|||
placeholder="请输入文章标题" |
|||
required |
|||
maxlength="200" |
|||
) |
|||
.form-help 建议标题长度在10-50字之间 |
|||
|
|||
.form-group |
|||
label.form-label(for="slug") URL别名 |
|||
input.form-input( |
|||
type="text" |
|||
id="slug" |
|||
name="slug" |
|||
placeholder="自动生成或手动输入" |
|||
pattern="[a-z0-9-]+" |
|||
maxlength="100" |
|||
) |
|||
.form-help 用于生成友好的URL，只能包含小写字母、数字和连字符 |
|||
|
|||
.form-group |
|||
label.form-label(for="excerpt") 文章摘要 |
|||
textarea.form-textarea( |
|||
id="excerpt" |
|||
name="excerpt" |
|||
placeholder="请输入文章摘要（可选）" |
|||
rows="3" |
|||
maxlength="500" |
|||
) |
|||
.form-help 简短描述文章内容，有助于SEO |
|||
|
|||
.form-group |
|||
label.form-label(for="content") 文章内容 * |
|||
textarea.form-textarea.content-editor( |
|||
id="content" |
|||
name="content" |
|||
placeholder="请输入文章内容，支持Markdown格式" |
|||
rows="20" |
|||
required |
|||
) |
|||
.form-help 支持Markdown语法，可直接粘贴Markdown内容 |
|||
|
|||
//- 右侧设置面板 |
|||
.form-sidebar |
|||
.sidebar-section |
|||
h3.sidebar-title 发布设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="status") 发布状态 |
|||
select.form-select(id="status" name="status") |
|||
option(value="draft") 📝 保存为草稿 |
|||
option(value="published") ✅ 立即发布 |
|||
.form-help 草稿状态下文章不会在前台显示 |
|||
|
|||
.form-group |
|||
label.form-label(for="category") 文章分类 |
|||
input.form-input( |
|||
type="text" |
|||
id="category" |
|||
name="category" |
|||
placeholder="如：技术、生活、随笔" |
|||
maxlength="50" |
|||
) |
|||
.form-help 用于组织和分类文章 |
|||
|
|||
.form-group |
|||
label.form-label(for="tags") 文章标签 |
|||
input.form-input( |
|||
type="text" |
|||
id="tags" |
|||
name="tags" |
|||
placeholder="标签1,标签2,标签3" |
|||
maxlength="200" |
|||
) |
|||
.form-help 多个标签用英文逗号分隔 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 高级设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="featured_image") 特色图片URL |
|||
input.form-input( |
|||
type="url" |
|||
id="featured_image" |
|||
name="featured_image" |
|||
placeholder="https://example.com/image.jpg" |
|||
) |
|||
.form-help 文章封面图片链接 |
|||
|
|||
//- 表单按钮 |
|||
.form-actions |
|||
.action-buttons |
|||
button.btn.btn-primary(type="submit") 💾 保存文章 |
|||
a.btn.btn-outline(href="/admin/articles") 取消 |
|||
button.btn.btn-secondary(type="button" onclick="previewArticle()") 👁️ 预览 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 自动生成slug |
|||
document.getElementById('title').addEventListener('input', function() { |
|||
const title = this.value; |
|||
const slugInput = document.getElementById('slug'); |
|||
|
|||
if (!slugInput.value) { |
|||
// 简单的slug生成逻辑 |
|||
const slug = title |
|||
.toLowerCase() |
|||
.replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-') |
|||
.replace(/-+/g, '-') |
|||
.replace(/^-|-$/g, ''); |
|||
slugInput.value = slug; |
|||
} |
|||
}); |
|||
|
|||
// 字符计数 |
|||
function setupCharCounter(inputId, maxLength) { |
|||
const input = document.getElementById(inputId); |
|||
const help = input.nextElementSibling; |
|||
|
|||
function updateCounter() { |
|||
const current = input.value.length; |
|||
const remaining = maxLength - current; |
|||
const originalText = help.textContent; |
|||
|
|||
if (remaining < 50) { |
|||
help.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
help.style.color = remaining < 10 ? '#ff4757' : '#ffa726'; |
|||
} else { |
|||
help.style.color = ''; |
|||
} |
|||
} |
|||
|
|||
input.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
|
|||
// 设置字符计数 |
|||
setupCharCounter('title', 200); |
|||
setupCharCounter('excerpt', 500); |
|||
setupCharCounter('tags', 200); |
|||
|
|||
// 预览功能 |
|||
function previewArticle() { |
|||
const content = document.getElementById('content').value; |
|||
if (!content.trim()) { |
|||
alert('请先输入文章内容'); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览（实际项目中可以使用更完善的Markdown解析器） |
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600'); |
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>文章预览</title> |
|||
<style> |
|||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } |
|||
h1, h2, h3 { color: #333; } |
|||
pre { background: #f4f4f4; padding: 10px; border-radius: 4px; } |
|||
code { background: #f4f4f4; padding: 2px 4px; border-radius: 2px; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>${document.getElementById('title').value || '未设置标题'}</h1> |
|||
<div>${content.replace(/\n/g, '<br>')}</div> |
|||
</body> |
|||
</html> |
|||
`); |
|||
previewWindow.document.close(); |
|||
} |
|||
|
|||
// 表单验证 |
|||
document.querySelector('.article-form').addEventListener('submit', function(e) { |
|||
const title = document.getElementById('title').value.trim(); |
|||
const content = document.getElementById('content').value.trim(); |
|||
|
|||
if (!title) { |
|||
alert('请输入文章标题'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (!content) { |
|||
alert('请输入文章内容'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (title.length < 5) { |
|||
alert('文章标题至少需要5个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (content.length < 10) { |
|||
alert('文章内容至少需要10个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
}); |
|||
@ -1,251 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
a(href=`/admin/articles/${article.id}`)= article.title |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current 编辑 |
|||
h1.page-title 编辑文章 |
|||
p.page-subtitle= `编辑：${article.title}` |
|||
|
|||
//- 文章表单 |
|||
.content-section |
|||
form.article-form(method="POST" action=`/admin/articles/${article.id}`) |
|||
input(type="hidden" name="_method" value="PUT") |
|||
|
|||
.form-grid |
|||
//- 左侧主要内容 |
|||
.form-main |
|||
.form-group |
|||
label.form-label(for="title") 文章标题 * |
|||
input.form-input( |
|||
type="text" |
|||
id="title" |
|||
name="title" |
|||
value=article.title |
|||
placeholder="请输入文章标题" |
|||
required |
|||
maxlength="200" |
|||
) |
|||
.form-help 建议标题长度在10-50字之间 |
|||
|
|||
.form-group |
|||
label.form-label(for="slug") URL别名 |
|||
input.form-input( |
|||
type="text" |
|||
id="slug" |
|||
name="slug" |
|||
value=article.slug || '' |
|||
placeholder="自动生成或手动输入" |
|||
pattern="[a-z0-9-]+" |
|||
maxlength="100" |
|||
) |
|||
.form-help 用于生成友好的URL，只能包含小写字母、数字和连字符 |
|||
|
|||
.form-group |
|||
label.form-label(for="excerpt") 文章摘要 |
|||
textarea.form-textarea( |
|||
id="excerpt" |
|||
name="excerpt" |
|||
placeholder="请输入文章摘要（可选）" |
|||
rows="3" |
|||
maxlength="500" |
|||
)= article.excerpt || '' |
|||
.form-help 简短描述文章内容，有助于SEO |
|||
|
|||
.form-group |
|||
label.form-label(for="content") 文章内容 * |
|||
textarea.form-textarea.content-editor( |
|||
id="content" |
|||
name="content" |
|||
placeholder="请输入文章内容，支持Markdown格式" |
|||
rows="20" |
|||
required |
|||
)= article.content || '' |
|||
.form-help 支持Markdown语法，可直接粘贴Markdown内容 |
|||
|
|||
//- 右侧设置面板 |
|||
.form-sidebar |
|||
.sidebar-section |
|||
h3.sidebar-title 发布设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="status") 发布状态 |
|||
select.form-select(id="status" name="status") |
|||
option(value="draft" selected=article.status === 'draft') 📝 保存为草稿 |
|||
option(value="published" selected=article.status === 'published') ✅ 立即发布 |
|||
.form-help 草稿状态下文章不会在前台显示 |
|||
|
|||
.form-group |
|||
label.form-label(for="category") 文章分类 |
|||
input.form-input( |
|||
type="text" |
|||
id="category" |
|||
name="category" |
|||
value=article.category || '' |
|||
placeholder="如：技术、生活、随笔" |
|||
maxlength="50" |
|||
) |
|||
.form-help 用于组织和分类文章 |
|||
|
|||
.form-group |
|||
label.form-label(for="tags") 文章标签 |
|||
input.form-input( |
|||
type="text" |
|||
id="tags" |
|||
name="tags" |
|||
value=article.tags || '' |
|||
placeholder="标签1,标签2,标签3" |
|||
maxlength="200" |
|||
) |
|||
.form-help 多个标签用英文逗号分隔 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 高级设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="featured_image") 特色图片URL |
|||
input.form-input( |
|||
type="url" |
|||
id="featured_image" |
|||
name="featured_image" |
|||
value=article.featured_image || '' |
|||
placeholder="https://example.com/image.jpg" |
|||
) |
|||
.form-help 文章封面图片链接 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 文章信息 |
|||
.info-list |
|||
.info-item |
|||
.info-label 创建时间 |
|||
.info-value= new Date(article.created_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 更新时间 |
|||
.info-value= new Date(article.updated_at).toLocaleString('zh-CN') |
|||
if article.view_count |
|||
.info-item |
|||
.info-label 阅读量 |
|||
.info-value= article.view_count |
|||
|
|||
//- 表单按钮 |
|||
.form-actions |
|||
.action-buttons |
|||
button.btn.btn-primary(type="submit") 💾 更新文章 #{article.id} |
|||
a.btn.btn-outline(href=`/admin/articles/${article.id}`) 取消 |
|||
button.btn.btn-secondary(type="button" onclick="previewArticle()") 👁️ 预览 |
|||
if article.status === 'published' && article.slug |
|||
a.btn.btn-outline(href=`/articles/${article.slug}` target="_blank") 🔗 查看前台 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 自动生成slug（仅在为空时） |
|||
document.getElementById('title').addEventListener('input', function() { |
|||
const title = this.value; |
|||
const slugInput = document.getElementById('slug'); |
|||
|
|||
if (!slugInput.value.trim()) { |
|||
// 简单的slug生成逻辑 |
|||
const slug = title |
|||
.toLowerCase() |
|||
.replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-') |
|||
.replace(/-+/g, '-') |
|||
.replace(/^-|-$/g, ''); |
|||
slugInput.value = slug; |
|||
} |
|||
}); |
|||
|
|||
// 字符计数 |
|||
function setupCharCounter(inputId, maxLength) { |
|||
const input = document.getElementById(inputId); |
|||
const help = input.nextElementSibling; |
|||
|
|||
function updateCounter() { |
|||
const current = input.value.length; |
|||
const remaining = maxLength - current; |
|||
const originalText = help.textContent.split('(')[0].trim(); |
|||
|
|||
if (remaining < 50) { |
|||
help.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
help.style.color = remaining < 10 ? '#ff4757' : '#ffa726'; |
|||
} else { |
|||
help.textContent = originalText; |
|||
help.style.color = ''; |
|||
} |
|||
} |
|||
|
|||
input.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
|
|||
// 设置字符计数 |
|||
setupCharCounter('title', 200); |
|||
setupCharCounter('excerpt', 500); |
|||
setupCharCounter('tags', 200); |
|||
|
|||
// 预览功能 |
|||
function previewArticle() { |
|||
const content = document.getElementById('content').value; |
|||
if (!content.trim()) { |
|||
alert('请先输入文章内容'); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览 |
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600'); |
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>文章预览</title> |
|||
<style> |
|||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } |
|||
h1, h2, h3 { color: #333; } |
|||
pre { background: #f4f4f4; padding: 10px; border-radius: 4px; } |
|||
code { background: #f4f4f4; padding: 2px 4px; border-radius: 2px; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>${document.getElementById('title').value || '未设置标题'}</h1> |
|||
<div>${content.replace(/\n/g, '<br>')}</div> |
|||
</body> |
|||
</html> |
|||
`); |
|||
previewWindow.document.close(); |
|||
} |
|||
|
|||
// 表单验证 |
|||
document.querySelector('.article-form').addEventListener('submit', function(e) { |
|||
const title = document.getElementById('title').value.trim(); |
|||
const content = document.getElementById('content').value.trim(); |
|||
|
|||
if (!title) { |
|||
alert('请输入文章标题'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (!content) { |
|||
alert('请输入文章内容'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (title.length < 5) { |
|||
alert('文章标题至少需要5个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (content.length < 10) { |
|||
alert('文章内容至少需要10个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
}); |
|||
@ -1,198 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
h1.page-title 文章管理 |
|||
p.page-subtitle 管理您的所有文章内容 |
|||
.page-header-right |
|||
a.btn.btn-primary(href="/admin/articles/create") ✨ 新建文章 |
|||
|
|||
//- 筛选和搜索 |
|||
.page-filters |
|||
form.filter-form(method="GET") |
|||
.filter-group |
|||
label.filter-label 状态筛选: |
|||
select.filter-select(name="status" onchange="this.form.submit()") |
|||
option(value="" selected=!filters.status) 全部状态 |
|||
option(value="published" selected=filters.status === 'published') 已发布 |
|||
option(value="draft" selected=filters.status === 'draft') 草稿 |
|||
|
|||
.filter-group |
|||
label.filter-label 搜索: |
|||
.search-box |
|||
input.search-input( |
|||
type="text" |
|||
name="q" |
|||
placeholder="搜索文章标题、内容或标签..." |
|||
value=filters.q || '' |
|||
) |
|||
button.search-btn(type="submit") 🔍 |
|||
|
|||
if filters.status || filters.q |
|||
a.filter-clear(href="/admin/articles") 清除筛选 |
|||
|
|||
//- 文章列表 |
|||
.content-section |
|||
if articles && articles.length > 0 |
|||
.article-table-container |
|||
table.article-table |
|||
thead |
|||
tr |
|||
th.col-title 标题 |
|||
th.col-status 状态 |
|||
th.col-category 分类 |
|||
th.col-date 更新时间 |
|||
th.col-actions 操作 |
|||
tbody |
|||
each article in articles |
|||
tr.article-row |
|||
td.col-title |
|||
.article-title-cell |
|||
h3.article-title |
|||
a(href=`/admin/articles/${article.id}`)= article.title |
|||
if article.excerpt |
|||
p.article-summary= article.excerpt.substring(0, 80) + (article.excerpt.length > 80 ? '...' : '') |
|||
if article.tags |
|||
.article-tags |
|||
each tag in article.tags.split(',') |
|||
span.tag= tag.trim() |
|||
|
|||
td.col-status |
|||
span.status-badge(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| ✅ 已发布 |
|||
else if article.status === 'draft' |
|||
| 📝 草稿 |
|||
else |
|||
| ❓ #{article.status} |
|||
|
|||
td.col-category |
|||
if article.category |
|||
span.category-badge= article.category |
|||
else |
|||
span.text-muted 未分类 |
|||
|
|||
td.col-date |
|||
.date-info |
|||
.primary-date= new Date(article.updated_at).toLocaleDateString('zh-CN') |
|||
.secondary-date= new Date(article.updated_at).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'}) |
|||
|
|||
td.col-actions |
|||
.action-buttons |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}` title="查看详情") 👁️ |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}/edit` title="编辑文章") ✏️ |
|||
if article.status === 'published' |
|||
a.btn.btn-sm.btn-outline(href=`/articles/${article.slug}` target="_blank" title="预览文章") 🔗 |
|||
button.btn.btn-sm.btn-danger( |
|||
onclick=`deleteArticle(${article.id}, '${article.title.replace(/'/g, "\\'")}')` |
|||
title="删除文章" |
|||
) 🗑️ |
|||
|
|||
//- 分页导航 |
|||
if pagination.totalPages > 1 |
|||
.pagination-container |
|||
nav.pagination |
|||
if pagination.hasPrev |
|||
a.pagination-link(href=`?page=${pagination.page - 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) ‹ 上一页 |
|||
|
|||
- var start = Math.max(1, pagination.page - 2) |
|||
- var end = Math.min(pagination.totalPages, pagination.page + 2) |
|||
|
|||
if start > 1 |
|||
a.pagination-link(href=`?page=1${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 1 |
|||
if start > 2 |
|||
span.pagination-ellipsis ... |
|||
|
|||
- for (var i = start; i <= end; i++) |
|||
if i === pagination.page |
|||
span.pagination-link.active= i |
|||
else |
|||
a.pagination-link(href=`?page=${i}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= i |
|||
|
|||
if end < pagination.totalPages |
|||
if end < pagination.totalPages - 1 |
|||
span.pagination-ellipsis ... |
|||
a.pagination-link(href=`?page=${pagination.totalPages}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= pagination.totalPages |
|||
|
|||
if pagination.hasNext |
|||
a.pagination-link(href=`?page=${pagination.page + 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 下一页 › |
|||
|
|||
//- 统计信息 |
|||
.list-footer |
|||
.list-stats |
|||
| 共 #{pagination.total} 篇文章 |
|||
if filters.status || filters.q |
|||
|，当前显示筛选结果 |
|||
else |
|||
//- 空状态 |
|||
.empty-state |
|||
.empty-icon 📝 |
|||
.empty-title 暂无文章 |
|||
if filters.status || filters.q |
|||
.empty-text 没有找到符合筛选条件的文章 |
|||
a.btn.btn-outline(href="/admin/articles") 查看全部文章 |
|||
else |
|||
.empty-text 您还没有创建任何文章 |
|||
a.btn.btn-primary(href="/admin/articles/create") 创建第一篇文章 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 删除文章确认 |
|||
function deleteArticle(id, title) { |
|||
if (confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/articles/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
// 显示成功消息 |
|||
showToast('success', data.message || '文章删除成功'); |
|||
// 刷新页面或移除行 |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -1,158 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current= article.title |
|||
h1.page-title= article.title |
|||
.article-meta |
|||
span.meta-item |
|||
strong 状态: |
|||
span.status-badge(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| ✅ 已发布 |
|||
else if article.status === 'draft' |
|||
| 📝 草稿 |
|||
if article.category |
|||
span.meta-item |
|||
strong 分类: |
|||
span.category-badge= article.category |
|||
span.meta-item |
|||
strong 创建时间: |
|||
span= new Date(article.created_at).toLocaleString('zh-CN') |
|||
span.meta-item |
|||
strong 更新时间: |
|||
span= new Date(article.updated_at).toLocaleString('zh-CN') |
|||
if article.view_count |
|||
span.meta-item |
|||
strong 阅读量: |
|||
span= article.view_count |
|||
|
|||
.page-header-right |
|||
.action-buttons |
|||
a.btn.btn-outline(href=`/admin/articles/${article.id}/edit`) ✏️ 编辑 |
|||
if article.status === 'published' && article.slug |
|||
a.btn.btn-outline(href=`/articles/${article.slug}` target="_blank") 🔗 预览 |
|||
button.btn.btn-danger( |
|||
onclick=`deleteArticle(${article.id}, '${article.title.replace(/'/g, "\\'")}')` |
|||
) 🗑️ 删除 |
|||
|
|||
//- 文章内容 |
|||
.content-section |
|||
.article-view |
|||
//- 文章摘要 |
|||
if article.excerpt |
|||
.article-summary-section |
|||
h3.section-title 文章摘要 |
|||
.article-summary= article.excerpt |
|||
|
|||
//- 文章内容 |
|||
.article-content-section |
|||
h3.section-title 文章内容 |
|||
.article-content |
|||
if article.content |
|||
!= article.content.replace(/\n/g, '<br>') |
|||
else |
|||
.empty-content 暂无内容 |
|||
|
|||
//- 文章标签 |
|||
if article.tags |
|||
.article-tags-section |
|||
h3.section-title 标签 |
|||
.article-tags |
|||
each tag in article.tags.split(',') |
|||
span.tag= tag.trim() |
|||
|
|||
//- 文章链接信息 |
|||
if article.slug |
|||
.article-link-section |
|||
h3.section-title 文章链接 |
|||
.link-info |
|||
strong 访问链接: |
|||
if article.status === 'published' |
|||
a.article-link(href=`/articles/${article.slug}` target="_blank")= `/articles/${article.slug}` |
|||
else |
|||
span.text-muted= `/articles/${article.slug}` |
|||
small (草稿状态，暂不可访问) |
|||
|
|||
//- 技术信息 |
|||
.article-technical-section |
|||
h3.section-title 技术信息 |
|||
.technical-info |
|||
.info-grid |
|||
.info-item |
|||
.info-label ID |
|||
.info-value= article.id |
|||
.info-item |
|||
.info-label Slug |
|||
.info-value= article.slug || '未设置' |
|||
.info-item |
|||
.info-label 作者ID |
|||
.info-value= article.author |
|||
if article.featured_image |
|||
.info-item |
|||
.info-label 特色图片 |
|||
.info-value |
|||
a(href=article.featured_image target="_blank")= article.featured_image |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 删除文章确认 |
|||
function deleteArticle(id, title) { |
|||
if (confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/articles/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '文章删除成功'); |
|||
setTimeout(() => { |
|||
window.location.href = '/admin/articles'; |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -1,243 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
h1.page-title 联系信息管理 |
|||
p.page-subtitle 管理用户提交的联系表单信息 |
|||
.page-header-right |
|||
.stats-summary |
|||
span.stat-item |
|||
.stat-number= pagination.total |
|||
.stat-label 总数 |
|||
span.stat-item.unread |
|||
.stat-number |
|||
| #{contacts.filter(c => c.status === 'unread').length} |
|||
.stat-label 未读 |
|||
|
|||
//- 筛选和搜索 |
|||
.page-filters |
|||
form.filter-form(method="GET") |
|||
.filter-group |
|||
label.filter-label 状态筛选: |
|||
select.filter-select(name="status" onchange="this.form.submit()") |
|||
option(value="" selected=!filters.status) 全部状态 |
|||
option(value="unread" selected=filters.status === 'unread') 📧 未读 |
|||
option(value="read" selected=filters.status === 'read') 👁️ 已读 |
|||
option(value="replied" selected=filters.status === 'replied') ✅ 已回复 |
|||
|
|||
.filter-group |
|||
label.filter-label 搜索: |
|||
.search-box |
|||
input.search-input( |
|||
type="text" |
|||
name="q" |
|||
placeholder="搜索姓名、邮箱、主题或内容..." |
|||
value=filters.q || '' |
|||
) |
|||
button.search-btn(type="submit") 🔍 |
|||
|
|||
if filters.status || filters.q |
|||
a.filter-clear(href="/admin/contacts") 清除筛选 |
|||
|
|||
//- 联系信息列表 |
|||
.content-section |
|||
if contacts && contacts.length > 0 |
|||
.contact-table-container |
|||
table.contact-table |
|||
thead |
|||
tr |
|||
th.col-contact 联系人信息 |
|||
th.col-subject 主题 |
|||
th.col-status 状态 |
|||
th.col-date 提交时间 |
|||
th.col-actions 操作 |
|||
tbody |
|||
each contact in contacts |
|||
tr.contact-row(class=`status-${contact.status}`) |
|||
td.col-contact |
|||
.contact-info |
|||
.contact-name= contact.name |
|||
.contact-email= contact.email |
|||
if contact.ip_address |
|||
.contact-ip IP: #{contact.ip_address} |
|||
|
|||
td.col-subject |
|||
.subject-content |
|||
h4.subject-title= contact.subject |
|||
.subject-preview= contact.message.substring(0, 80) + (contact.message.length > 80 ? '...' : '') |
|||
|
|||
td.col-status |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
else |
|||
| ❓ #{contact.status} |
|||
|
|||
td.col-date |
|||
.date-info |
|||
.primary-date= new Date(contact.created_at).toLocaleDateString('zh-CN') |
|||
.secondary-date= new Date(contact.created_at).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'}) |
|||
|
|||
td.col-actions |
|||
.action-buttons |
|||
a.btn.btn-sm.btn-outline(href=`/admin/contacts/${contact.id}` title="查看详情") 👁️ |
|||
|
|||
.status-dropdown |
|||
select.status-select(onchange=`updateContactStatus(${contact.id}, this.value)`) |
|||
option(value="" disabled selected) 状态... |
|||
option(value="unread" class=contact.status === 'unread' ? 'disabled' : '') 标记未读 |
|||
option(value="read" class=contact.status === 'read' ? 'disabled' : '') 标记已读 |
|||
option(value="replied" class=contact.status === 'replied' ? 'disabled' : '') 标记已回复 |
|||
|
|||
button.btn.btn-sm.btn-danger( |
|||
onclick=`deleteContact(${contact.id}, '${contact.name} - ${contact.subject}')` |
|||
title="删除联系信息" |
|||
) 🗑️ |
|||
|
|||
//- 分页导航 |
|||
if pagination.totalPages > 1 |
|||
.pagination-container |
|||
nav.pagination |
|||
if pagination.hasPrev |
|||
a.pagination-link(href=`?page=${pagination.page - 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) ‹ 上一页 |
|||
|
|||
- var start = Math.max(1, pagination.page - 2) |
|||
- var end = Math.min(pagination.totalPages, pagination.page + 2) |
|||
|
|||
if start > 1 |
|||
a.pagination-link(href=`?page=1${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 1 |
|||
if start > 2 |
|||
span.pagination-ellipsis ... |
|||
|
|||
- for (var i = start; i <= end; i++) |
|||
if i === pagination.page |
|||
span.pagination-link.active= i |
|||
else |
|||
a.pagination-link(href=`?page=${i}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= i |
|||
|
|||
if end < pagination.totalPages |
|||
if end < pagination.totalPages - 1 |
|||
span.pagination-ellipsis ... |
|||
a.pagination-link(href=`?page=${pagination.totalPages}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= pagination.totalPages |
|||
|
|||
if pagination.hasNext |
|||
a.pagination-link(href=`?page=${pagination.page + 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 下一页 › |
|||
|
|||
//- 统计信息 |
|||
.list-footer |
|||
.list-stats |
|||
| 共 #{pagination.total} 条联系信息 |
|||
if filters.status || filters.q |
|||
|，当前显示筛选结果 |
|||
|
|||
//- 批量操作（如果需要的话） |
|||
.bulk-actions |
|||
.bulk-info 提示：点击联系人姓名可以查看完整信息 |
|||
else |
|||
//- 空状态 |
|||
.empty-state |
|||
.empty-icon 📧 |
|||
.empty-title 暂无联系信息 |
|||
if filters.status || filters.q |
|||
.empty-text 没有找到符合筛选条件的联系信息 |
|||
a.btn.btn-outline(href="/admin/contacts") 查看全部联系信息 |
|||
else |
|||
.empty-text 还没有用户提交联系表单 |
|||
.empty-help 用户可以通过前台的联系页面提交联系信息 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 更新联系信息状态 |
|||
function updateContactStatus(id, status) { |
|||
if (!status) return; |
|||
|
|||
fetch(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ status }) |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
} |
|||
|
|||
// 删除联系信息确认 |
|||
function deleteContact(id, title) { |
|||
if (confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/contacts/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
|
|||
// 重置状态下拉框 |
|||
document.querySelectorAll('.status-select').forEach(select => { |
|||
select.value = ''; |
|||
}); |
|||
@ -1,229 +0,0 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/contacts") 联系信息管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current= contact.subject |
|||
h1.page-title= contact.subject |
|||
.contact-meta |
|||
span.meta-item |
|||
strong 状态: |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
span.meta-item |
|||
strong 提交时间: |
|||
span= new Date(contact.created_at).toLocaleString('zh-CN') |
|||
|
|||
.page-header-right |
|||
.action-buttons |
|||
.status-actions |
|||
if contact.status !== 'read' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'read')`) 👁️ 标记已读 |
|||
if contact.status !== 'replied' |
|||
button.btn.btn-success(onclick=`updateContactStatus(${contact.id}, 'replied')`) ✅ 标记已回复 |
|||
if contact.status !== 'unread' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 📧 标记未读 |
|||
|
|||
button.btn.btn-danger( |
|||
onclick=`deleteContact(${contact.id}, '${contact.name} - ${contact.subject}')` |
|||
) 🗑️ 删除 |
|||
|
|||
//- 联系信息详情 |
|||
.content-section |
|||
.contact-details |
|||
//- 联系人信息 |
|||
.detail-section |
|||
h3.section-title 联系人信息 |
|||
.info-grid |
|||
.info-item |
|||
.info-label 姓名 |
|||
.info-value= contact.name |
|||
.info-item |
|||
.info-label 邮箱 |
|||
.info-value |
|||
a(href=`mailto:${contact.email}`)= contact.email |
|||
if contact.ip_address |
|||
.info-item |
|||
.info-label IP地址 |
|||
.info-value= contact.ip_address |
|||
if contact.user_agent |
|||
.info-item |
|||
.info-label 浏览器信息 |
|||
.info-value.user-agent= contact.user_agent |
|||
|
|||
//- 联系主题 |
|||
.detail-section |
|||
h3.section-title 联系主题 |
|||
.subject-content= contact.subject |
|||
|
|||
//- 联系内容 |
|||
.detail-section |
|||
h3.section-title 联系内容 |
|||
.message-content |
|||
.message-text= contact.message |
|||
|
|||
//- 系统信息 |
|||
.detail-section |
|||
h3.section-title 系统信息 |
|||
.info-grid |
|||
.info-item |
|||
.info-label ID |
|||
.info-value= contact.id |
|||
.info-item |
|||
.info-label 创建时间 |
|||
.info-value= new Date(contact.created_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 更新时间 |
|||
.info-value= new Date(contact.updated_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 当前状态 |
|||
.info-value |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
|
|||
//- 快速回复（可选功能） |
|||
.detail-section |
|||
h3.section-title 快速操作 |
|||
.quick-actions |
|||
.action-group |
|||
h4.action-title 邮件操作 |
|||
.action-buttons |
|||
a.btn.btn-primary(href=`mailto:${contact.email}?subject=Re: ${encodeURIComponent(contact.subject)}&body=${encodeURIComponent('您好，感谢您的联系...')}`) 📧 回复邮件 |
|||
button.btn.btn-outline(onclick="copyEmail()") 📋 复制邮箱 |
|||
|
|||
.action-group |
|||
h4.action-title 状态操作 |
|||
.action-buttons |
|||
if contact.status === 'unread' |
|||
button.btn.btn-success(onclick=`updateContactStatus(${contact.id}, 'read')`) 标记已读 |
|||
button.btn.btn-primary(onclick=`updateContactStatus(${contact.id}, 'replied')`) 标记已回复 |
|||
else if contact.status === 'read' |
|||
button.btn.btn-primary(onclick=`updateContactStatus(${contact.id}, 'replied')`) 标记已回复 |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 标记未读 |
|||
else if contact.status === 'replied' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'read')`) 标记已读 |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 标记未读 |
|||
|
|||
//- 导航 |
|||
.detail-navigation |
|||
a.btn.btn-outline(href="/admin/contacts") ← 返回列表 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 更新联系信息状态 |
|||
function updateContactStatus(id, status) { |
|||
fetch(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ status }) |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
} |
|||
|
|||
// 删除联系信息确认 |
|||
function deleteContact(id, title) { |
|||
if (confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/contacts/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.href = '/admin/contacts'; |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 复制邮箱地址 |
|||
function copyEmail() { |
|||
const email = '#{contact.email}'; |
|||
navigator.clipboard.writeText(email).then(() => { |
|||
showToast('success', '邮箱地址已复制到剪贴板'); |
|||
}).catch(err => { |
|||
console.error('复制失败:', err); |
|||
// 降级处理 |
|||
const textArea = document.createElement('textarea'); |
|||
textArea.value = email; |
|||
document.body.appendChild(textArea); |
|||
textArea.select(); |
|||
try { |
|||
document.execCommand('copy'); |
|||
showToast('success', '邮箱地址已复制到剪贴板'); |
|||
} catch (fallbackErr) { |
|||
showToast('error', '复制失败，请手动复制'); |
|||
} |
|||
document.body.removeChild(textArea); |
|||
}); |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -1,125 +0,0 @@ |
|||
extends ../layouts/admin |
|||
|
|||
block $$content |
|||
.dashboard |
|||
//- 页面标题 |
|||
.page-header |
|||
h1.page-title 仪表盘 |
|||
p.page-subtitle 欢迎回到后台管理系统 |
|||
|
|||
//- 统计卡片 |
|||
.stats-grid |
|||
.stats-card |
|||
.stats-icon.stats-icon-primary 📧 |
|||
.stats-info |
|||
.stats-number= contactStats.total |
|||
.stats-label 总联系信息 |
|||
.stats-detail |
|||
.stats-breakdown |
|||
span.breakdown-item |
|||
span.breakdown-label 未读: |
|||
span.breakdown-value= contactStats.unread |
|||
span.breakdown-item |
|||
span.breakdown-label 已读: |
|||
span.breakdown-value= contactStats.read |
|||
span.breakdown-item |
|||
span.breakdown-label 已回复: |
|||
span.breakdown-value= contactStats.replied |
|||
|
|||
.stats-card |
|||
.stats-icon.stats-icon-success 📝 |
|||
.stats-info |
|||
.stats-number= articleStats.total |
|||
.stats-label 我的文章 |
|||
.stats-detail |
|||
.stats-breakdown |
|||
span.breakdown-item |
|||
span.breakdown-label 已发布: |
|||
span.breakdown-value= articleStats.published |
|||
span.breakdown-item |
|||
span.breakdown-label 草稿: |
|||
span.breakdown-value= articleStats.draft |
|||
|
|||
//- 主要内容区域 |
|||
.dashboard-content |
|||
.dashboard-grid |
|||
//- 最近联系信息 |
|||
.dashboard-section |
|||
.section-header |
|||
h2.section-title 最近联系信息 |
|||
a.section-action(href="/admin/contacts") 查看全部 → |
|||
|
|||
if recentContacts && recentContacts.length > 0 |
|||
.contact-list |
|||
each contact in recentContacts |
|||
.contact-item(class=`status-${contact.status}`) |
|||
.contact-header |
|||
.contact-info |
|||
strong.contact-name= contact.name |
|||
span.contact-email= contact.email |
|||
.contact-meta |
|||
span.contact-status(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 未读 |
|||
else if contact.status === 'read' |
|||
| 已读 |
|||
else if contact.status === 'replied' |
|||
| 已回复 |
|||
span.contact-date= new Date(contact.created_at).toLocaleDateString('zh-CN') |
|||
.contact-subject= contact.subject |
|||
.contact-actions |
|||
a.btn.btn-sm(href=`/admin/contacts/${contact.id}`) 查看详情 |
|||
else |
|||
.empty-state |
|||
.empty-icon 📧 |
|||
.empty-text 暂无联系信息 |
|||
|
|||
//- 最近文章 |
|||
.dashboard-section |
|||
.section-header |
|||
h2.section-title 最近文章 |
|||
a.section-action(href="/admin/articles") 查看全部 → |
|||
|
|||
if recentArticles && recentArticles.length > 0 |
|||
.article-list |
|||
each article in recentArticles |
|||
.article-item |
|||
.article-header |
|||
.article-info |
|||
strong.article-title= article.title |
|||
span.article-status(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| 已发布 |
|||
else if article.status === 'draft' |
|||
| 草稿 |
|||
.article-meta |
|||
span.article-date= new Date(article.updated_at).toLocaleDateString('zh-CN') |
|||
if article.excerpt |
|||
.article-summary= article.excerpt.substring(0, 100) + (article.excerpt.length > 100 ? '...' : '') |
|||
.article-actions |
|||
a.btn.btn-sm(href=`/admin/articles/${article.id}`) 查看 |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}/edit`) 编辑 |
|||
else |
|||
.empty-state |
|||
.empty-icon 📝 |
|||
.empty-text 暂无文章 |
|||
a.btn.btn-primary(href="/admin/articles/create") 创建第一篇文章 |
|||
|
|||
//- 快速操作 |
|||
.quick-actions |
|||
h3.quick-actions-title 快速操作 |
|||
.quick-actions-grid |
|||
a.quick-action-card(href="/admin/articles/create") |
|||
.quick-action-icon 📝 |
|||
.quick-action-title 新建文章 |
|||
.quick-action-desc 创建一篇新的文章 |
|||
|
|||
a.quick-action-card(href="/admin/articles") |
|||
.quick-action-icon 📚 |
|||
.quick-action-title 管理文章 |
|||
.quick-action-desc 查看和编辑我的文章 |
|||
|
|||
a.quick-action-card(href="/admin/contacts") |
|||
.quick-action-icon 📧 |
|||
.quick-action-title 联系信息 |
|||
.quick-action-desc 查看用户联系信息 |
|||
@ -1,128 +0,0 @@ |
|||
include utils.pug |
|||
|
|||
doctype html |
|||
html(lang="zh-CN") |
|||
head |
|||
block $$head |
|||
title #{title ? title + ' - ' : ''}后台管理 - #{$site && $site.site_title || ''} |
|||
meta(name="description" content="后台管理系统") |
|||
meta(charset="utf-8") |
|||
meta(name="viewport" content="width=device-width, initial-scale=1") |
|||
+css('lib/reset.css') |
|||
+css('css/admin.css') |
|||
+js('lib/htmx.min.js') |
|||
+js('lib/tailwindcss.3.4.17.js') |
|||
body.admin-body |
|||
#admin-app |
|||
//- 顶部导航栏 |
|||
header.admin-header |
|||
.admin-header-left |
|||
.admin-logo |
|||
a(href="/admin") 后台管理 |
|||
.admin-header-center |
|||
.admin-breadcrumb |
|||
span.breadcrumb-item |
|||
a(href="/admin") 首页 |
|||
if title |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-item= title |
|||
.admin-header-right |
|||
.admin-user-menu |
|||
.dropdown |
|||
button.dropdown-trigger |
|||
span= $user ? $user.name || $user.username : '用户' |
|||
i.dropdown-arrow ▼ |
|||
.dropdown-menu |
|||
a.dropdown-item(href="/profile") 个人资料 |
|||
a.dropdown-item(href="/") 前台首页 |
|||
.dropdown-divider |
|||
a.dropdown-item(href="/logout") 退出登录 |
|||
|
|||
//- 主要内容区域 |
|||
.admin-main |
|||
//- 左侧导航 |
|||
aside.admin-sidebar |
|||
nav.admin-nav |
|||
.nav-section |
|||
.nav-title 主要功能 |
|||
ul.nav-list |
|||
li.nav-item |
|||
a.nav-link(href="/admin" class=title === '后台管理' ? 'active' : '') |
|||
i.nav-icon 📊 |
|||
span 仪表盘 |
|||
li.nav-item |
|||
a.nav-link(href="/admin/articles" class=title === '文章管理' ? 'active' : '') |
|||
i.nav-icon 📝 |
|||
span 文章管理 |
|||
li.nav-item |
|||
a.nav-link(href="/admin/contacts" class=title === '联系信息管理' ? 'active' : '') |
|||
i.nav-icon 📧 |
|||
span 联系信息 |
|||
|
|||
//- 右侧内容区域 |
|||
main.admin-content |
|||
if toast |
|||
.admin-toast(class=`toast-${toast.type}`) |
|||
span= toast.message |
|||
button.toast-close × |
|||
|
|||
.admin-content-inner |
|||
block $$content |
|||
|
|||
//- JavaScript |
|||
script(src="/js/admin.js") |
|||
block $$scripts |
|||
|
|||
//- 处理Toast消息 |
|||
script. |
|||
// Toast消息处理 |
|||
const toast = document.querySelector('.admin-toast'); |
|||
if (toast) { |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 下拉菜单处理 |
|||
const dropdown = document.querySelector('.dropdown'); |
|||
if (dropdown) { |
|||
const trigger = dropdown.querySelector('.dropdown-trigger'); |
|||
const menu = dropdown.querySelector('.dropdown-menu'); |
|||
|
|||
trigger.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
dropdown.classList.toggle('active'); |
|||
}); |
|||
|
|||
document.addEventListener('click', () => { |
|||
dropdown.classList.remove('active'); |
|||
}); |
|||
} |
|||
|
|||
// 移动端侧边栏切换 |
|||
function toggleSidebar() { |
|||
document.body.classList.toggle('sidebar-open'); |
|||
} |
|||
|
|||
// 响应式处理 |
|||
function handleResize() { |
|||
if (window.innerWidth > 768) { |
|||
document.body.classList.remove('sidebar-open'); |
|||
} |
|||
} |
|||
|
|||
window.addEventListener('resize', handleResize); |
|||
handleResize(); |
|||
@ -1,58 +0,0 @@ |
|||
mixin include() |
|||
if block |
|||
block |
|||
|
|||
mixin css(url, extranl = false) |
|||
if extranl || url.startsWith('http') || url.startsWith('//') |
|||
link(rel="stylesheet" type="text/css" href=url) |
|||
else |
|||
link(rel="stylesheet", href=($config && $config.base || "") + url) |
|||
|
|||
mixin js(url, extranl = false) |
|||
if extranl || url.startsWith('http') || url.startsWith('//') |
|||
script(type="text/javascript" src=url) |
|||
else |
|||
script(src=($config && $config.base || "") + url) |
|||
|
|||
mixin link(href, name) |
|||
//- attributes == {class: "btn"} |
|||
a(href=href)&attributes(attributes)= name |
|||
|
|||
doctype html |
|||
html(lang="zh-CN") |
|||
head |
|||
block head |
|||
title #{site_title || $site && $site.site_title || ''} |
|||
meta(name="description" content=site_description || $site && $site.site_description || '') |
|||
meta(name="keywords" content=keywords || $site && $site.keywords || '') |
|||
if $site && $site.site_favicon |
|||
link(rel="shortcut icon", href=$site.site_favicon) |
|||
meta(charset="utf-8") |
|||
meta(name="viewport" content="width=device-width, initial-scale=1") |
|||
+css('reset.css') |
|||
+js('lib/htmx.min.js') |
|||
+js('https://cdn.tailwindcss.com') |
|||
+css('https://unpkg.com/simplebar@latest/dist/simplebar.css', true) |
|||
+css('simplebar-shim.css') |
|||
+js('https://unpkg.com/simplebar@latest/dist/simplebar.min.js', true) |
|||
//- body(style="--bg:url("+($site && $site.site_bg || '#fff')+")") |
|||
//- body(style="--bg:url(./static/bg2.webp)") |
|||
body |
|||
noscript |
|||
style. |
|||
.simplebar-content-wrapper { |
|||
scrollbar-width: auto; |
|||
-ms-overflow-style: auto; |
|||
} |
|||
|
|||
.simplebar-content-wrapper::-webkit-scrollbar, |
|||
.simplebar-hide-scrollbar::-webkit-scrollbar { |
|||
display: initial; |
|||
width: initial; |
|||
height: initial; |
|||
} |
|||
div(data-simplebar style="height: 100%") |
|||
div(style="height: 100%; display: flex; flex-direction: column") |
|||
block content |
|||
block scripts |
|||
+js('lib/bg-change.js') |
|||
@ -1,18 +0,0 @@ |
|||
extends /layouts/root.pug |
|||
//- 采用纯背景页面的布局，背景图片随机切换，卡片采用高斯滤镜类玻璃化效果 |
|||
//- .card |
|||
|
|||
block $$head |
|||
+css('css/layouts/bg-page.css') |
|||
block pageHead |
|||
|
|||
block $$content |
|||
.page-layout |
|||
.page |
|||
block pageContent |
|||
footer |
|||
include /htmx/footer.pug |
|||
|
|||
block $$scripts |
|||
+js('lib/bg-change.js') |
|||
block pageScripts |
|||
@ -1,15 +0,0 @@ |
|||
extends /layouts/root.pug |
|||
|
|||
block $$head |
|||
+css('css/layouts/empty.css') |
|||
block pageHead |
|||
|
|||
block $$content |
|||
include /htmx/navbar/index.pug |
|||
.page-layout |
|||
.page.my-5 |
|||
block pageContent |
|||
include /htmx/footer/index.pug |
|||
|
|||
block $$scripts |
|||
block pageScripts |
|||
@ -1,31 +0,0 @@ |
|||
extends /layouts/base.pug |
|||
|
|||
block head |
|||
+css('styles.css') |
|||
block pageHead |
|||
|
|||
block content |
|||
.page-layout |
|||
.page |
|||
- const navs = []; |
|||
- navs.push({ href: '/', label: '首页' }); |
|||
- navs.push({ href: '/articles', label: '文章' }); |
|||
- navs.push({ href: '/article', label: '收藏' }); |
|||
- navs.push({ href: '/about', label: '关于' }); |
|||
nav.nav |
|||
ul.flota-nav |
|||
each nav in navs |
|||
li |
|||
a.item( |
|||
href=nav.href, |
|||
class=currentPath === nav.href ? 'active' : '' |
|||
) #{nav.label} |
|||
.content |
|||
block pageContent |
|||
footer |
|||
+include() |
|||
- var edit = false |
|||
include /htmx/footer.pug |
|||
|
|||
block scripts |
|||
block pageScripts |
|||
@ -1,16 +0,0 @@ |
|||
extends /layouts/root.pug |
|||
|
|||
block $$head |
|||
+css('styles.css') |
|||
block pageHead |
|||
|
|||
block $$content |
|||
.page-layout |
|||
.page |
|||
.content |
|||
block pageContent |
|||
footer |
|||
include /htmx/footer.pug |
|||
|
|||
block $$scripts |
|||
block pageScripts |
|||
@ -1,62 +0,0 @@ |
|||
extends /layouts/empty.pug |
|||
|
|||
block pageHead |
|||
|
|||
block pageContent |
|||
.contact-success.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100") |
|||
.success-content(class="text-center py-8") |
|||
// 成功图标 |
|||
.success-icon(class="mb-6") |
|||
.icon-container(class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full") |
|||
span(class="text-4xl text-green-600") ✓ |
|||
|
|||
// 成功标题 |
|||
h1(class="text-3xl font-bold mb-4 text-gray-800") 留言提交成功！ |
|||
|
|||
// 成功消息 |
|||
.success-message(class="mb-8") |
|||
p(class="text-lg text-gray-600 mb-3") 感谢您的留言，我们已经收到了您的反馈。 |
|||
p(class="text-gray-500") 我们会在 <strong class="text-green-600">24小时内</strong> 通过邮箱回复您，请注意查收。 |
|||
|
|||
// 联系信息卡片 |
|||
.contact-cards(class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8") |
|||
.contact-card(class="text-center p-4 bg-blue-50 rounded-lg border border-blue-200") |
|||
.icon(class="text-2xl mb-2") 📧 |
|||
h3(class="font-semibold text-blue-800 mb-1") 邮箱回复 |
|||
p(class="text-sm text-gray-600") 24小时内回复 |
|||
.contact-card(class="text-center p-4 bg-green-50 rounded-lg border border-green-200") |
|||
.icon(class="text-2xl mb-2") 💬 |
|||
h3(class="font-semibold text-green-800 mb-1") 在线客服 |
|||
p(class="text-sm text-gray-600") 工作日 9:00-18:00 |
|||
.contact-card(class="text-center p-4 bg-purple-50 rounded-lg border border-purple-200") |
|||
.icon(class="text-2xl mb-2") 📱 |
|||
h3(class="font-semibold text-purple-800 mb-1") 社交媒体 |
|||
p(class="text-sm text-gray-600") 实时互动 |
|||
|
|||
// 操作按钮 |
|||
.actions(class="flex flex-col sm:flex-row justify-center gap-4") |
|||
a(href="/" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors") |
|||
span(class="mr-2") 🏠 |
|||
| 返回首页 |
|||
a(href="/contact" class="inline-flex items-center justify-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors") |
|||
span(class="mr-2") ✍️ |
|||
| 再次留言 |
|||
a(href="/about" class="inline-flex items-center justify-center px-6 py-3 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors") |
|||
span(class="mr-2") ℹ️ |
|||
| 了解我们 |
|||
|
|||
// 温馨提示 |
|||
.tips(class="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200") |
|||
h3(class="font-semibold text-yellow-800 mb-2 flex items-center") |
|||
span(class="mr-2") 💡 |
|||
| 温馨提示 |
|||
ul(class="text-sm text-yellow-700 space-y-1 text-left") |
|||
li • 请确保您提供的邮箱地址正确，以便我们及时回复 |
|||
li • 如有紧急问题，建议通过在线客服或电话联系我们 |
|||
li • 您也可以关注我们的社交媒体获取最新动态和回复 |
|||
li • 我们承诺保护您的隐私，不会泄露您的联系信息 |
|||
|
|||
// 页脚信息 |
|||
.contact-footer(class="text-center mt-8 pt-6 border-t border-gray-200") |
|||
p(class="text-gray-500 text-sm") 再次感谢您对我们的关注和支持！ |
|||
p(class="text-gray-400 text-xs mt-2") 如有其他问题，欢迎随时与我们联系 |
|||
@ -1,51 +0,0 @@ |
|||
extends /layouts/empty.pug |
|||
|
|||
block pageHead |
|||
+js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js") |
|||
|
|||
mixin PeopleCared(name, role, desc, avatar) |
|||
.bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4 |
|||
img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name) |
|||
.flex-1 |
|||
.text-lg.font-semibold.text-gray-900 #{name} |
|||
if role |
|||
.text-sm.text-gray-500.mt-1 #{role} |
|||
if desc |
|||
p.text-sm.text-gray-600.mt-2 #{desc} |
|||
|
|||
|
|||
block pageContent |
|||
.-mt-5 |
|||
//- form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center") |
|||
//- input(type="file" name="file" required) |
|||
//- button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 |
|||
//- box-shadow 是在所有内容底部 |
|||
.swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);") |
|||
.swiper-wrapper.h-full |
|||
.swiper-slide(style="flex-shrink: 0;") |
|||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|||
.swiper-slide(style="flex-shrink: 0;") |
|||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|||
.swiper-slide(style="flex-shrink: 0;") |
|||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|||
.container |
|||
.grid.grid-cols-1.gap-4(class="md:grid-cols-4") |
|||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|||
|
|||
block pageScripts |
|||
script. |
|||
//- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) |
|||
const swiper = new Swiper(".swiper-container", { |
|||
//- loop: true, |
|||
//- pagination: { |
|||
//- el: ".swiper-pagination", |
|||
//- clickable: true, |
|||
//- }, |
|||
//- lazy: { |
|||
//- loadPrevNext: true, |
|||
//- }, |
|||
}); |
|||
@ -1,9 +0,0 @@ |
|||
extends /layouts/pure.pug |
|||
|
|||
block pageHead |
|||
+css("css/page/index.css") |
|||
|
|||
block pageContent |
|||
+include() |
|||
- let timeLine = [{icon: '11',title: "aaaa",desc:"asd"}] |
|||
include /htmx/timeline.pug |
|||
Loading…
Reference in new issue