Upload 3 files

Dockerfile

@@ -1,5 +1,15 @@
 FROM ghcr.io/open-webui/open-webui:main
 
+# 复制字体文件
+COPY fonts/* /app/build/assets/fonts/
+# 复制自定义CSS和JS文件
+COPY custom.css /app/build/assets/
+COPY custom.js /app/build/assets/
+
+# 在</head>标签前添加custom.css引用
+RUN sed -i 's|</head>|<link rel="stylesheet" href="assets/custom.css"></head>|' /app/build/index.html && \
+    sed -i 's|</body>|<script src="assets/custom.js"></script></body>|' /app/build/index.html
+
 COPY sync_data.sh sync_data.sh
 
 RUN chmod -R 777 ./data && \

custom.css

@@ -0,0 +1,344 @@
+@font-face {
+    font-family: 'Dank Mono';
+    src: url('../assets/fonts/DankMono-Regular.woff2') format('woff2');
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Dank Mono';
+    src: url('../assets/fonts/DankMono-Italic.woff2') format('woff2');
+    font-display: swap;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'JinBuTi';
+    src: url('../assets/fonts/DingTalk-JinBuTi.woff2') format('woff2');
+    font-display: swap;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'JinBuTi', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* 代码块容器样式 */
+.language-javascript, [class*="language-"] {
+    background: #282c34 !important;
+    border-radius: 10px !important;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;
+    position: relative;
+    margin: 1.2em 0;
+}
+
+/* 代码块顶部栏 */
+.sticky.top-8 {
+    background: #21252b !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+    border-radius: 10px 10px 0 0;
+    padding: 0 15px !important;
+    margin-bottom: -60px !important;
+}
+
+/* 语言标识 */
+.text-text-300 {
+    position: absolute;
+    left: 60px;
+    /* top: 7px; */
+    color: #abb2bf !important;
+    font-size: 17px !important;
+    font-weight: 500 !important;
+    z-index: 11;
+}
+
+/* 顶部按钮样式优化 */
+.save-code-button, .copy-code-button, .run-code-button {
+    background: #323842 !important;
+    color: #abb2bf !important;
+    border: 1px solid #3e4451 !important;
+    font-size: 12px !important;
+    padding: 4px 12px !important;
+    border-radius: 4px !important;
+    transition: all 0.2s ease-in-out !important;
+}
+
+.save-code-button:hover, .copy-code-button:hover {
+    background: #3e4451 !important;
+    color: #fff !important;
+}
+
+/* 代码块顶部装饰圆点 */
+.language-javascript::before, [class*="language-"]::before {
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    background: #fc625d;
+    width: 12px;
+    height: 12px;
+    left: 15px;
+    top: 14px;
+    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+    z-index: 10;
+}
+
+/* 代码内容区域 */
+.cm-content {
+    font-family: 'Dank Mono', -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-size: 15px !important;
+    line-height: 1.6em !important;
+    padding: 20px 1.4em 1em 30px !important;
+    color: #abb2bf !important;
+}
+
+/* 代码语法高亮 */
+.cm-line .ͼb {
+    /* 关键字 */
+    color: #c678dd !important;
+}
+
+.cm-line .ͼd {
+    /* 数字 */
+    color: #e5c07b !important;
+}
+
+.cm-line .ͼe {
+    /* 字符串 */
+    color: #98c379 !important;
+}
+
+.cm-line .ͼg {
+    /* 变量 */
+    color: #e06c75 !important;
+    font-style: italic;
+}
+
+/* 代码语法高亮 - 扩展 */
+.cm-comment {
+    /* 注释 */
+    color: #7f848e !important;
+    font-style: italic;
+}
+
+.cm-property {
+    color: #61afef !important;
+}
+
+.cm-tag {
+    color: #e06c75 !important;
+}
+
+.cm-attribute {
+    color: #d19a66 !important;
+}
+
+.cm-string {
+    color: #98c379 !important;
+}
+
+.cm-operator {
+    color: #56b6c2 !important;
+}
+
+span.ͼc {
+    color: #dd6b7b !important;
+}
+
+span.ͼl {
+    color: #6bddcd !important;
+}
+
+span.ͼt {
+    color: #ddb078 !important;
+    ;
+    font-style: italic;
+}
+
+span.ͼr {
+    font-style: italic;
+}
+
+span.ͼf {
+    color: #80a492;
+}
+
+span.ͼm {
+    color: #3d8e86;
+    font-style: italic;
+}
+
+span.ͼw {
+    font-style: italic;
+}
+
+/* 滚动条样式 */
+.cm-scroller::-webkit-scrollbar {
+    height: 10px !important;
+    width: 10px !important;
+    background-color: #282c34 !important;
+}
+
+.cm-scroller::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important;
+    border-radius: 10px !important;
+    background-color: #282c34 !important;
+}
+
+.cm-scroller::-webkit-scrollbar-thumb {
+    border-radius: 10px !important;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .5) !important;
+    background-color: #3e4451 !important;
+}
+
+/* 行号栏样式 */
+.cm-gutters {
+    background: #282c34 !important;
+    border-right: 1px solid #3e4451 !important;
+    color: #495162 !important;
+    padding-right: 10px !important;
+}
+
+/* 当前行高亮 */
+.cm-activeLine {
+    background: #6699ff0b !important;
+}
+
+.cm-gutterElement.cm-activeLineGutter {
+    background-color: #dd7694;
+}
+
+/* 添加代码选中样式 */
+.cm-selectionBackground, .cm-content ::selection {
+    background-color: rgba(122, 129, 255, 0.2) !important;
+}
+
+.cm-line.cm-selected {
+    background-color: rgba(122, 129, 255, 0.2) !important;
+}
+
+/* 选中时的文本颜色保持原样，确保可读性 */
+.cm-content ::selection {
+    color: rgba(245, 177, 255, 0.9) !important;
+}
+
+/* 当有多行选中时的样式 */
+.cm-selectionLayer>.cm-selectionBackground {
+    background-color: rgba(122, 129, 255, 0.2) !important;
+}
+
+/* 代码块折叠/展开样式添加与修改 */
+.cm-scroller {
+    padding-bottom: 40px;
+    background-color: #282c34;
+}
+
+.cm-scroller {
+    overflow: auto !important;
+}
+
+.cm-editor {
+    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden !important;
+}
+
+/* 只给超高的代码块添加最大高度和内边距 */
+.cm-editor#collapsed {
+    height: 400px;
+}
+
+/* .cm-editor#expanded { padding-bottom: 40px; } */
+.code-expand-btn {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px 15px;
+    border-radius: 15px;
+    font-size: 12px;
+    cursor: pointer;
+    border: none;
+    color: #666;
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 11;
+    transition: all 0.3s ease;
+}
+
+.dark .code-expand-btn {
+    background: rgba(45, 45, 45, 0.6);
+    color: #fff;
+}
+
+.code-expand-btn:hover {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    transform: translateX(-50%) translateY(-2px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.dark .code-expand-btn:hover {
+    background: rgba(45, 45, 45, 0.8);
+}
+
+.code-expand-btn:active {
+    transform: translateX(-50%) translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.code-expand-btn::before {
+    content: "⌄";
+    display: inline-block;
+    margin-right: 4px;
+    font-size: 14px;
+    transition: transform 0.3s ease;
+}
+
+.code-expand-btn#expanded::before {
+    transform: rotate(180deg);
+}
+
+.code-expand-btn::after {
+    content: "展开代码";
+}
+
+.code-expand-btn#expanded::after {
+    content: "收起代码";
+}
+
+/* 渐变遮罩 */
+.cm-editor#collapsed::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: linear-gradient(transparent 0%, rgba(45, 45, 45, 0.3) 40%, rgba(45, 45, 45, 0.6) 80%, rgba(45, 45, 45, 0.8) 100%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 10;
+    /* 确保遮罩层覆盖到滚动条 */
+    width: calc(100% + 17px);
+    /* 17px是标准滚动条宽度 */
+}
+
+.dark .cm-editor#collapsed::after {
+    background: linear-gradient(transparent 0%, rgba(45, 45, 45, 0.3) 40%, rgba(45, 45, 45, 0.6) 80%, rgba(45, 45, 45, 0.8) 100%);
+}
+
+/* 只在折叠状态显示渐变遮罩 */
+.cm-editor#collapsed::after {
+    opacity: 1;
+}

custom.js

@@ -0,0 +1 @@
+(function () { function checkIsEditPage() { return window.location.href.includes('/functions'); } let isCurrentlyEditPage = checkIsEditPage(); function onRouteChange() { isCurrentlyEditPage = checkIsEditPage(); if (isCurrentlyEditPage) { if (mutationObserverActive) { mutationObserver.disconnect(); mutationObserverActive = false; } } else { initializeAllCodeBlocks(); if (!mutationObserverActive) { mutationObserver.observe(document.body, { childList: true, subtree: true }); mutationObserverActive = true; } } } const originalPushState = history.pushState; history.pushState = function (state, title, url) { originalPushState.apply(history, arguments); onRouteChange(); }; window.addEventListener('popstate', onRouteChange); const observedCodeBlocks = new WeakSet(); const resizeObserver = new ResizeObserver((entries) => { if (isCurrentlyEditPage) return; for (const entry of entries) { const editorRoot = entry.target; if (!editorRoot.classList.contains('cm-editor')) continue; updateCodeBlock(editorRoot); } }); function updateCodeBlock(editorRoot) { if (editorRoot.querySelector('.code-expand-btn')) return; const height = editorRoot.scrollHeight; if (height > 400) { editorRoot.id = 'collapsed'; const expandBtn = document.createElement('button'); expandBtn.className = 'code-expand-btn'; expandBtn.id = 'collapsed'; editorRoot.appendChild(expandBtn); editorRoot.style.height = '400px'; } } function initializeCodeBlock(editorRoot) { if (observedCodeBlocks.has(editorRoot)) return; observedCodeBlocks.add(editorRoot); resizeObserver.observe(editorRoot); updateCodeBlock(editorRoot); } function initializeAllCodeBlocks() { if (isCurrentlyEditPage) return; document.querySelectorAll('.cm-editor').forEach(initializeCodeBlock); } const mutationObserver = new MutationObserver((mutations) => { if (isCurrentlyEditPage) return; let hasNewCodeBlocks = false; mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node.nodeType !== 1) return; if (node.classList?.contains('cm-editor')) { initializeCodeBlock(node); hasNewCodeBlocks = true; } else { const matches = node.querySelectorAll?.('.cm-editor') || []; matches.forEach((el) => { initializeCodeBlock(el); hasNewCodeBlocks = true; }); } }); }); if (hasNewCodeBlocks) requestAnimationFrame(initializeAllCodeBlocks); }); let mutationObserverActive = false; document.addEventListener('click', function (evt) { if (!evt.target.classList.contains('code-expand-btn')) return; const editorRoot = evt.target.closest('.cm-editor'); if (!editorRoot) return; const isCollapsed = editorRoot.id === 'collapsed'; requestAnimationFrame(() => { if (isCollapsed) { const scroller = editorRoot.querySelector('.cm-scroller'); editorRoot.style.height = `${scroller.scrollHeight}px`; editorRoot.id = 'expanded'; evt.target.id = 'expanded'; } else { editorRoot.style.height = '400px'; editorRoot.id = 'collapsed'; evt.target.id = 'collapsed'; const scrollTarget = editorRoot.closest('.relative.my-2')?.parentElement; scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); function init() { isCurrentlyEditPage = checkIsEditPage(); if (!isCurrentlyEditPage) initializeAllCodeBlocks(); mutationObserver.observe(document.body, { childList: true, subtree: true }); mutationObserverActive = true; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('error', (error) => { console.error('Code block error:', error); }); window.addEventListener('unhandledrejection', (event) => { console.error('Unhandled rejection:', event.reason); }); })();