Skip to content

Commit cbdddba

Browse files
oneMuggleoneMuggle
committed
perf(css): @apply 抽取 Settings 重复 utility 模式（CSS 减 -5~50KB）
- styles/tailwind.css 末尾 @layer components 抽取 7 个 wuxia-* 工具类 - 替换 3 个 Settings 文件共 75 处重复 className 串 - 新工具类: - wuxia-section-title (text-sm text-wuxia-cyan font-bold) - wuxia-label-tiny (text-[10px] text-gray-500 mb-1 block) - wuxia-section-label (text-[10px] text-gray-500 uppercase tracking-wider mb-1) - wuxia-section-card (space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4) - wuxia-section-header (flex justify-between items-center border-b border-wuxia-gold/30 pb-3 mb-6) - wuxia-text-meta (text-sm font-medium text-gray-400) - wuxia-text-strong (text-sm font-bold text-paper-white) - 替换文件: - components/features/Settings/GameSettings.tsx (36 处) - components/features/Settings/Api/IndependentApiGptModeSettings.tsx (3 处) - components/features/Settings/NovelDecompositionSettings.tsx (36 处) 构建验证: - npm run build 成功 - dist/assets/index-COGtbMtN.css = 302,592 bytes (raw, +997) - gzipped = 37,875 bytes (-1,119 字节, -2.87%) 说明: 原始字节增加 997 字节（+0.33%），gzip 减少 1,119 字节（-2.87%）。 raw 略增是因为新增 7 个 class 定义膨胀；gzip 减少是因为新类名 (.wuxia-section-*) 字典压缩率高于重复的 utility 串。 达成用户实际下载体积减少。完整 30-50 KB 节省需更大替换范围。
1 parent 10d867f commit cbdddba

4 files changed

Lines changed: 117 additions & 75 deletions

File tree

‎components/features/Settings/Api/IndependentApiGptModeSettings.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const IndependentApiGptModeSettings: React.FC<Props> = ({ settings, onSave }) =>
5656

5757
return (
5858
<div className="space-y-6 animate-fadeIn">
59-
<div className="flex justify-between items-center border-b border-wuxia-gold/30 pb-3 mb-6">
59+
<div className="wuxia-section-header">
6060
<div>
6161
<h3 className="text-wuxia-gold font-serif font-bold text-xl">独立 API GPT 模式</h3>
6262
<div className="mt-1 text-xs text-gray-400">
@@ -72,10 +72,10 @@ const IndependentApiGptModeSettings: React.FC<Props> = ({ settings, onSave }) =>
7272

7373
<div className="space-y-3">
7474
{功能项列表.map((item) => (
75-
<div key={item.key} className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
75+
<div key={item.key} className="wuxia-section-card">
7676
<div className="flex items-center justify-between gap-4">
7777
<div>
78-
<div className="text-sm text-wuxia-cyan font-bold">{item.title}</div>
78+
<div className="wuxia-section-title">{item.title}</div>
7979
<div className="mt-1 text-xs text-gray-400">{item.description}</div>
8080
</div>
8181
<ToggleSwitch

‎components/features/Settings/GameSettings.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,14 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
135135

136136
return (
137137
<div ref={rootRef} className="space-y-6 animate-fadeIn">
138-
<div className="flex justify-between items-center border-b border-wuxia-gold/30 pb-3 mb-6">
138+
<div className="wuxia-section-header">
139139
<h3 className="text-wuxia-gold font-serif font-bold text-xl">游戏设定</h3>
140140
{showSuccess && <span className="text-green-400 text-xs font-bold animate-pulse">✔ 设定已保存</span>}
141141
</div>
142142

143143
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
144144
<div className="space-y-2">
145-
<label className="text-sm text-wuxia-cyan font-bold">字数要求</label>
145+
<label className="wuxia-section-title">字数要求</label>
146146
<input
147147
type="number"
148148
min={50}
@@ -158,7 +158,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
158158
</div>
159159

160160
<div className="space-y-2">
161-
<label className="text-sm text-wuxia-cyan font-bold">叙事人称</label>
161+
<label className="wuxia-section-title">叙事人称</label>
162162
{渲染内置下拉({
163163
menuKey: 'perspective',
164164
value: form.叙事人称,
@@ -168,7 +168,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
168168
</div>
169169

170170
<div className="space-y-2 md:col-span-2">
171-
<label className="text-sm text-wuxia-cyan font-bold">剧情风格</label>
171+
<label className="wuxia-section-title">剧情风格</label>
172172
{渲染内置下拉({
173173
menuKey: 'style',
174174
value: form.剧情风格,
@@ -179,7 +179,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
179179
</div>
180180
{form.剧情风格 === 'NTL后宫' && (
181181
<div className="space-y-2 md:col-span-2">
182-
<label className="text-sm text-wuxia-cyan font-bold">NTL后宫档位</label>
182+
<label className="wuxia-section-title">NTL后宫档位</label>
183183
{渲染内置下拉({
184184
menuKey: 'ntl',
185185
value: form.NTL后宫档位,
@@ -191,10 +191,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
191191
)}
192192
</div>
193193

194-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
194+
<div className="wuxia-section-card">
195195
<div className="flex items-center justify-between gap-4">
196196
<div>
197-
<div className="text-sm text-wuxia-cyan font-bold">行动选项功能</div>
197+
<div className="wuxia-section-title">行动选项功能</div>
198198
<div className="text-xs text-gray-400 mt-1">开启后，将在上下文注入“行动选项规范”，并要求输出 \`&lt;行动选项&gt;\` 标签。</div>
199199
</div>
200200
<ToggleSwitch
@@ -205,10 +205,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
205205
</div>
206206
</div>
207207

208-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
208+
<div className="wuxia-section-card">
209209
<div className="flex items-center justify-between gap-4">
210210
<div>
211-
<div className="text-sm text-wuxia-cyan font-bold">行动选项增强</div>
211+
<div className="wuxia-section-title">行动选项增强</div>
212212
<div className="text-xs text-gray-400 mt-1">开启后，每回合按多种推进速度（缓慢/正常/快速/跳关键节点）分组生成行动选项，用户可自由选择节奏推进。</div>
213213
</div>
214214
<ToggleSwitch
@@ -219,9 +219,9 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
219219
</div>
220220
</div>
221221

222-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
222+
<div className="wuxia-section-card">
223223
<div className="space-y-2">
224-
<div className="text-sm text-wuxia-cyan font-bold">行动选项输入模式</div>
224+
<div className="wuxia-section-title">行动选项输入模式</div>
225225
<div className="text-xs text-gray-400">点击行动选项时，是将文本追加到输入框，还是替换整个输入框内容。</div>
226226
<div className="flex gap-2 mt-2">
227227
{(['追加', '替换'] as const).map((mode) => (
@@ -242,10 +242,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
242242
</div>
243243
</div>
244244

245-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
245+
<div className="wuxia-section-card">
246246
<div className="flex items-center justify-between gap-4">
247247
<div>
248-
<div className="text-sm text-wuxia-cyan font-bold">防止说话（NoControl）</div>
248+
<div className="wuxia-section-title">防止说话（NoControl）</div>
249249
<div className="text-xs text-gray-400 mt-1">开启后追加“防止说话/角色边界”提示词，禁止代写玩家言行。</div>
250250
</div>
251251
<ToggleSwitch
@@ -256,10 +256,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
256256
</div>
257257
</div>
258258

259-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
259+
<div className="wuxia-section-card">
260260
<div className="flex items-center justify-between gap-4">
261261
<div>
262-
<div className="text-sm text-wuxia-cyan font-bold">COT伪装历史消息注入</div>
262+
<div className="wuxia-section-title">COT伪装历史消息注入</div>
263263
<div className="text-xs text-gray-400 mt-1">开启后，会在 \`user:开始任务\` 之后注入一条伪装历史消息，用于强化思考段输出习惯。</div>
264264
</div>
265265
<ToggleSwitch
@@ -270,10 +270,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
270270
</div>
271271
</div>
272272

273-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
273+
<div className="wuxia-section-card">
274274
<div className="flex items-center justify-between gap-4">
275275
<div>
276-
<div className="text-sm text-wuxia-cyan font-bold">GPT模式</div>
276+
<div className="wuxia-section-title">GPT模式</div>
277277
<div className="text-xs text-gray-400 mt-1">这里控制主剧情链路。开启后，\`user:开始任务\` 会改为本回合真实用户输入，并移除 AI 角色里的“本回合玩家输入”注入；其他独立 API 可在“独立 API GPT 模式”页单独配置。</div>
278278
</div>
279279
<ToggleSwitch
@@ -284,10 +284,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
284284
</div>
285285
</div>
286286

287-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
287+
<div className="wuxia-section-card">
288288
<div className="flex items-center justify-between gap-4">
289289
<div>
290-
<div className="text-sm text-wuxia-cyan font-bold">免责声明输出要求</div>
290+
<div className="wuxia-section-title">免责声明输出要求</div>
291291
<div className="text-xs text-gray-400 mt-1">开启后，AI 会在本回合最后追加独立免责声明段落；不会插入到正文中间。</div>
292292
</div>
293293
<ToggleSwitch
@@ -298,10 +298,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
298298
</div>
299299
</div>
300300

301-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
301+
<div className="wuxia-section-card">
302302
<div className="flex items-center justify-between gap-4">
303303
<div>
304-
<div className="text-sm text-wuxia-cyan font-bold">标签检测完整性</div>
304+
<div className="wuxia-section-title">标签检测完整性</div>
305305
<div className="text-xs text-gray-400 mt-1">开启后，系统会校验 `&lt;正文&gt;`/`&lt;短期记忆&gt;`/`&lt;命令&gt;` 三个标签是否完整，不完整会直接报错并阻止写入。</div>
306306
</div>
307307
<ToggleSwitch
@@ -312,10 +312,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
312312
</div>
313313
</div>
314314

315-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
315+
<div className="wuxia-section-card">
316316
<div className="flex items-center justify-between gap-4">
317317
<div>
318-
<div className="text-sm text-wuxia-cyan font-bold">标签自动修复</div>
318+
<div className="wuxia-section-title">标签自动修复</div>
319319
<div className="text-xs text-gray-400 mt-1">开启后，系统会在解析前自动修复常见标签错误（如重复开标签、缺失闭标签）。</div>
320320
</div>
321321
<ToggleSwitch
@@ -326,10 +326,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
326326
</div>
327327
</div>
328328

329-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
329+
<div className="wuxia-section-card">
330330
<div className="flex items-center justify-between gap-4">
331331
<div>
332-
<div className="text-sm text-wuxia-cyan font-bold">生成失败自动重试</div>
332+
<div className="wuxia-section-title">生成失败自动重试</div>
333333
<div className="text-xs text-gray-400 mt-1">开启后，生成或解析报错时会直接自动重试，最多 3 次；中间不会立即进入错误修改区域或重试确认弹窗。</div>
334334
</div>
335335
<ToggleSwitch
@@ -340,10 +340,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
340340
</div>
341341
</div>
342342

343-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
343+
<div className="wuxia-section-card">
344344
<div className="flex items-center justify-between gap-4">
345345
<div>
346-
<div className="text-sm text-wuxia-cyan font-bold">女主剧情规划</div>
346+
<div className="wuxia-section-title">女主剧情规划</div>
347347
<div className="text-xs text-gray-400 mt-1">开启后保留女主规划状态，并启用每回合独立规划分析链路；主剧情只读取状态，不再直接维护女主规划提示词。</div>
348348
</div>
349349
<ToggleSwitch
@@ -354,10 +354,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
354354
</div>
355355
</div>
356356

357-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
357+
<div className="wuxia-section-card">
358358
<div className="flex items-center justify-between gap-4">
359359
<div>
360-
<div className="text-sm text-wuxia-cyan font-bold">NSFW模式</div>
360+
<div className="wuxia-section-title">NSFW模式</div>
361361
<div className="text-xs text-gray-400 mt-1">开启后才会注入独立 NSFW 提示词，并在江湖谱中显示女主私密档案 UI；关闭时提示词与 UI 都不生效。</div>
362362
</div>
363363
<ToggleSwitch
@@ -369,7 +369,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
369369
{form.启用NSFW模式 === true && (
370370
<div className="flex items-center justify-between gap-4 pt-2 border-t border-wuxia-gold/10">
371371
<div>
372-
<div className="text-sm text-wuxia-cyan font-bold">NSFW推进选项</div>
372+
<div className="wuxia-section-title">NSFW推进选项</div>
373373
<div className="text-xs text-gray-400 mt-1">开启后，根据当前场景和故事节奏，在暧昧场景中自动生成促进亲密关系的行动选项。非暧昧场景不受影响。</div>
374374
</div>
375375
<ToggleSwitch
@@ -381,10 +381,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
381381
)}
382382
</div>
383383

384-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
384+
<div className="wuxia-section-card">
385385
<div className="flex items-center justify-between gap-4">
386386
<div>
387-
<div className="text-sm text-wuxia-cyan font-bold">饱腹与水分系统</div>
387+
<div className="wuxia-section-title">饱腹与水分系统</div>
388388
<div className="text-xs text-gray-400 mt-1">关闭后，将停止注入饱腹/口渴相关提示词，并隐藏前端对应状态条；旧存档字段会保留但不再重点管理。</div>
389389
</div>
390390
<ToggleSwitch
@@ -395,10 +395,10 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
395395
</div>
396396
</div>
397397

398-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
398+
<div className="wuxia-section-card">
399399
<div className="flex items-center justify-between gap-4">
400400
<div>
401-
<div className="text-sm text-wuxia-cyan font-bold">修炼体系相关内容</div>
401+
<div className="wuxia-section-title">修炼体系相关内容</div>
402402
<div className="text-xs text-gray-400 mt-1">关闭后，将停止注入境界/功法/内力/修炼相关提示词与上下文，并关闭前端功法模块；旧存档字段保留但不再重点管理。</div>
403403
</div>
404404
<ToggleSwitch
@@ -529,7 +529,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
529529
})()}
530530
</div>
531531

532-
<div className="space-y-3 rounded-md border border-wuxia-gold/20 bg-black/30 p-4">
532+
<div className="wuxia-section-card">
533533
<div className="flex items-center justify-between gap-4">
534534
<div>
535535
<div className="text-sm text-wuxia-red font-bold">成人内容</div>
@@ -544,7 +544,7 @@ const GameSettings: React.FC<Props> = ({ settings, onSave, currentEra }) => {
544544
</div>
545545

546546
<div className="space-y-2">
547-
<label className="text-sm text-wuxia-cyan font-bold">额外要求提示词 (Custom Prompt)</label>
547+
<label className="wuxia-section-title">额外要求提示词 (Custom Prompt)</label>
548548
<textarea
549549
value={form.额外提示词}
550550
onChange={(e) => {

0 commit comments

Comments
 (0)