shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add note mode and workflow config

Browse Source
This commit is contained in:
shiyue
2026-06-12 16:39:44 +08:00
parent 5308a10b52
commit 8b2173be8f
93 changed files with 15292 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
public/style.css
View File

@@ -21,6 +21,11 @@
--success: #5d8a54; /* 抹茶 matcha */
--danger: #c0553a;
--info: #5b7ea1; /* 縹色 blue-gray */
--note-accent: #5b7ea1;
--note-accent-hover: #486b8f;
--note-bg: rgba(91, 126, 161, 0.1);
--note-bg-strong: rgba(91, 126, 161, 0.16);
--note-border: rgba(91, 126, 161, 0.24);
--scrollbar-thumb: #c9baa9;
--scrollbar-track: transparent;
--sidebar-width: 280px;
@@ -62,6 +67,11 @@ html[data-theme='coolvibe'] {
--success: #2e8a61;
--danger: #d65567;
--info: #1976a4;
--note-accent: #2e8a61;
--note-accent-hover: #226547;
--note-bg: rgba(46, 138, 97, 0.1);
--note-bg-strong: rgba(46, 138, 97, 0.16);
--note-border: rgba(46, 138, 97, 0.24);
--scrollbar-thumb: #a7c4ce;
--font-ui: 'Chivo Mono', ui-monospace, monospace;
--page-background:
@@ -328,6 +338,11 @@ html[data-theme='editorial'] {
--success: #4d7b57;
--danger: #c05c42;
--info: #4f6f87;
--note-accent: #4f6f87;
--note-accent-hover: #3d596f;
--note-bg: rgba(79, 111, 135, 0.1);
--note-bg-strong: rgba(79, 111, 135, 0.16);
--note-border: rgba(79, 111, 135, 0.24);
--scrollbar-thumb: #bba995;
--font-ui: 'Avenir Next', 'Segoe UI', 'PingFang SC', sans-serif;
--page-background:
@@ -1259,6 +1274,98 @@ body.session-loading-active {
border-bottom-left-radius: 4px;
color: var(--text-primary);
}
.msg.note {
align-self: flex-end;
flex-direction: row-reverse;
max-width: min(680px, 85%);
}
.msg.note .note-avatar {
background: var(--note-accent);
color: #fff;
}
.msg.note .note-bubble {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent),
var(--note-bg);
border: 1px solid var(--note-border);
border-bottom-right-radius: 4px;
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(45, 31, 20, 0.05);
}
.note-meta {
margin-bottom: 6px;
color: var(--note-accent);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
.note-text {
white-space: pre-wrap;
}
.note-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
margin-top: 10px;
}
.note-action {
appearance: none;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--note-border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.58);
color: var(--text-secondary);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.note-action:hover {
background: var(--note-bg-strong);
border-color: var(--note-accent);
color: var(--note-accent);
}
.note-action:active {
transform: scale(0.96);
}
.note-action.send,
.note-action.save {
background: var(--note-accent);
border-color: transparent;
color: #fff;
}
.note-action.send:hover,
.note-action.save:hover {
background: var(--note-accent-hover);
color: #fff;
}
.note-action.delete:hover {
background: rgba(192, 85, 58, 0.1);
border-color: rgba(192, 85, 58, 0.24);
color: var(--danger);
}
.note-edit-input {
width: min(460px, 100%);
min-width: 260px;
max-width: 100%;
border: 1px solid var(--note-border);
border-radius: 10px;
outline: none;
background: rgba(255, 255, 255, 0.76);
color: var(--text-primary);
font: inherit;
line-height: 1.5;
padding: 9px 10px;
resize: none;
}
.note-edit-input:focus {
border-color: var(--note-accent);
box-shadow: 0 0 0 3px var(--note-bg);
}
/* System messages */
.msg.system {
@@ -1844,6 +1951,10 @@ body.session-loading-active {
border-color: var(--info);
box-shadow: 0 0 0 3px rgba(91, 126, 161, 0.12);
}
.input-wrapper.note-mode-active {
border-color: var(--note-border);
box-shadow: 0 0 0 3px var(--note-bg);
}
.attach-btn {
appearance: none;
width: 40px;
@@ -1865,7 +1976,42 @@ body.session-loading-active {
background: rgba(192, 85, 58, 0.08);
border-color: rgba(192, 85, 58, 0.12);
}
.attach-btn:disabled {
.note-mode-btn {
appearance: none;
width: 36px;
height: 36px;
border: 1px solid transparent;
border-radius: 10px;
background: var(--note-accent);
color: #fff;
cursor: pointer;
padding: 0;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.note-mode-btn:hover {
background: var(--note-accent-hover);
color: #fff;
border-color: transparent;
}
.note-mode-btn:active {
transform: scale(0.92);
}
.note-mode-btn.active {
background: var(--note-accent-hover);
border-color: transparent;
color: #fff;
box-shadow: 0 8px 18px var(--note-bg-strong);
}
.note-mode-btn.active:hover {
background: var(--note-accent-hover);
color: #fff;
}
.attach-btn:disabled,
.note-mode-btn:disabled {
opacity: 0.45;
cursor: default;
}
@@ -1904,6 +2050,13 @@ body.session-loading-active {
color: #fff;
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn.note-send {
background: var(--note-accent);
color: #fff;
}
.send-btn.note-send:hover {
background: var(--note-accent-hover);
}
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.abort-btn {
background: var(--danger);
@@ -2024,8 +2177,13 @@ body.session-loading-active {
.msg.assistant .msg-bubble { border-bottom-left-radius: 4px; }
.code-block-wrapper pre code { font-size: 12px; }
.input-wrapper { padding: 6px 10px; border-radius: 12px; }
.attach-btn { width: 38px; height: 38px; border-radius: 11px; }
.attach-btn { width: 34px; height: 34px; border-radius: 10px; }
.note-mode-btn { width: 34px; height: 34px; border-radius: 10px; }
.send-btn, .abort-btn { width: 34px; height: 34px; }
.msg.note { max-width: 92%; }
.note-actions { gap: 5px; }
.note-action { min-height: 28px; padding: 0 8px; }
.note-edit-input { min-width: 0; }
.new-chat-btn,
.new-chat-arrow { min-height: 44px; }
.new-chat-arrow { width: 48px; }