1411 lines
38 KiB
Markdown
1411 lines
38 KiB
Markdown
# System Extension Workbench Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 将 `系统管理 -> 系统拓展` 从纵向堆叠的旧式配置页，翻新为正式、紧凑、工业质感的“系统设置工作台”，不改变现有业务字段、接口和配置语义。
|
||
|
||
**Architecture:** 前端单页内重构：保留 `SystemExtensionView.vue` 的现有 API 调用和表单状态，新增顶部状态条、左侧配置目录、右侧单模块编辑区、底部固定保存栏。CSS 只新增/替换系统拓展专属 class，避免影响 DAG、仓库单据、权限脑图等近期未提交改动。
|
||
|
||
**Tech Stack:** Vue 3 `<script setup>`、现有 `fetchResource/postResource/putResource` API helper、现有 `TableControls` / `PaginationBar`、源码级 Node test、全局 `frontend/src/styles/main.css`。
|
||
|
||
---
|
||
|
||
## Current Constraints
|
||
|
||
- 当前工作区已有未提交 DAG 改动：`backend/app/api/routes/dashboard.py`、`frontend/src/views/DashboardView.vue`、`frontend/src/styles/main.css`，以及若干未跟踪 DAG 文件。
|
||
- 本计划执行时不得回滚、覆盖、格式化无关文件。
|
||
- `frontend/src/styles/main.css` 已有 DAG 未提交样式，执行时只编辑系统拓展相关选择器附近或追加新的系统拓展选择器。
|
||
- 本次不新增后端接口，不改数据库，不改变“广播通知 / 原材料库存批次号前缀 / 是否对接智能报工小程序 / AI 助手配置”的保存逻辑。
|
||
- AI 助手“测试连接”本次不做，因为现有后端没有对应接口，避免为了视觉翻新引入后端行为变更。
|
||
|
||
---
|
||
|
||
## File Structure
|
||
|
||
- Create: `frontend/src/views/SystemExtensionView.test.js`
|
||
- Modify: `frontend/src/views/SystemExtensionView.vue`
|
||
- Modify: `frontend/src/styles/main.css`
|
||
|
||
---
|
||
|
||
## Visual Target
|
||
|
||
页面最终结构：
|
||
|
||
```text
|
||
系统拓展
|
||
广播启用数 | 库存批次前缀 | 报工小程序状态 | AI助手状态
|
||
|
||
+----------------------+---------------------------------------------+
|
||
| 广播通知 | 当前模块标题 / 状态 / 表单 / 列表 / 预览 |
|
||
| 库存批次规则 | |
|
||
| 生产对接模式 | |
|
||
| AI 助手配置 | |
|
||
+----------------------+---------------------------------------------+
|
||
|
||
右下角固定保存栏：放弃修改 | 保存配置
|
||
```
|
||
|
||
交互规则：
|
||
|
||
- 进入页面默认选中 `广播通知`。
|
||
- 左侧目录点击后只显示当前模块，不再让四组配置同时堆在页面里。
|
||
- 有未保存修改时才显示右下角固定保存栏。
|
||
- 当前模块保存成功后刷新对应状态条。
|
||
- 顶部不再出现 `ADMIN ONLY`、大面积解释卡片、`广播通知与 AI 助手配置中心` 这种 demo 感强的 hero。
|
||
- 状态字段使用清晰色彩：启用绿色、暂停灰色、重要红色、预警橙色、信息蓝色。
|
||
- 响应式下，左侧目录变成横向滚动 tab，右侧模块撑满宽度。
|
||
|
||
---
|
||
|
||
### Task 1: Add Source-Level UI Contract Test
|
||
|
||
**Files:**
|
||
- Create: `frontend/src/views/SystemExtensionView.test.js`
|
||
|
||
- [ ] **Step 1: Write the failing test**
|
||
|
||
Create `frontend/src/views/SystemExtensionView.test.js` with:
|
||
|
||
```js
|
||
import assert from "node:assert/strict";
|
||
import { describe, it } from "node:test";
|
||
import { readFileSync } from "node:fs";
|
||
import { fileURLToPath } from "node:url";
|
||
import { dirname, join, resolve } from "node:path";
|
||
|
||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||
const source = readFileSync(join(__dirname, "SystemExtensionView.vue"), "utf8");
|
||
const mainCss = readFileSync(resolve(__dirname, "../styles/main.css"), "utf8");
|
||
|
||
describe("SystemExtensionView workbench redesign", () => {
|
||
it("removes the old hero explanation card and admin-only copy", () => {
|
||
assert.doesNotMatch(source, /extension-hero/);
|
||
assert.doesNotMatch(source, /extension-status-card/);
|
||
assert.doesNotMatch(source, /广播通知与 AI 助手配置中心/);
|
||
assert.doesNotMatch(source, /ADMIN ONLY/);
|
||
});
|
||
|
||
it("renders a compact system extension workbench shell", () => {
|
||
[
|
||
"system-extension-workbench",
|
||
"extension-status-strip",
|
||
"extension-config-shell",
|
||
"extension-nav-rail",
|
||
"extension-module-panel",
|
||
"extension-save-dock"
|
||
].forEach((className) => {
|
||
assert.match(source, new RegExp(className));
|
||
assert.match(mainCss, new RegExp(`\\\\.${className}`));
|
||
});
|
||
});
|
||
|
||
it("exposes the four configuration modules as a navigation directory", () => {
|
||
["广播通知", "库存批次规则", "生产对接模式", "AI 助手配置"].forEach((label) => {
|
||
assert.match(source, new RegExp(label));
|
||
});
|
||
|
||
assert.match(source, /activeSection/);
|
||
assert.match(source, /extensionSections/);
|
||
});
|
||
|
||
it("uses a fixed save dock with explicit save and reset actions", () => {
|
||
assert.match(source, /放弃修改/);
|
||
assert.match(source, /保存配置/);
|
||
assert.match(source, /saveActiveSection/);
|
||
assert.match(source, /resetActiveSection/);
|
||
assert.match(source, /activeSectionDirty/);
|
||
});
|
||
|
||
it("keeps existing system extension API endpoints unchanged", () => {
|
||
[
|
||
"/system-extension/broadcasts",
|
||
"/system-extension/assistant-config",
|
||
"/system-extension/raw-material-lot-prefix",
|
||
"/system-extension/smart-operation-report"
|
||
].forEach((endpoint) => {
|
||
assert.match(source, new RegExp(endpoint.replaceAll("/", "\\\\/")));
|
||
});
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
node --test src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
not ok ... removes the old hero explanation card and admin-only copy
|
||
not ok ... renders a compact system extension workbench shell
|
||
```
|
||
|
||
The test should fail because the existing page still contains `extension-hero` and does not contain the new workbench classes.
|
||
|
||
---
|
||
|
||
### Task 2: Refactor Component State for Workbench Navigation and Dirty Save
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/views/SystemExtensionView.vue`
|
||
|
||
- [ ] **Step 1: Update Vue imports**
|
||
|
||
Change:
|
||
|
||
```js
|
||
import { onMounted, reactive, ref } from "vue";
|
||
```
|
||
|
||
To:
|
||
|
||
```js
|
||
import { computed, onMounted, reactive, ref } from "vue";
|
||
```
|
||
|
||
- [ ] **Step 2: Add navigation state after existing refs**
|
||
|
||
Add after:
|
||
|
||
```js
|
||
const editingBroadcastId = ref(null);
|
||
```
|
||
|
||
This block:
|
||
|
||
```js
|
||
const activeSection = ref("broadcast");
|
||
const sectionSnapshots = reactive({
|
||
broadcast: "",
|
||
rawLotPrefix: "",
|
||
productionMode: "",
|
||
assistant: ""
|
||
});
|
||
|
||
const extensionSections = [
|
||
{
|
||
key: "broadcast",
|
||
eyebrow: "Broadcast",
|
||
title: "广播通知",
|
||
desc: "维护右上角小喇叭通知",
|
||
accent: "blue"
|
||
},
|
||
{
|
||
key: "rawLotPrefix",
|
||
eyebrow: "Lot Rule",
|
||
title: "库存批次规则",
|
||
desc: "维护原材料库存批次号前缀",
|
||
accent: "steel"
|
||
},
|
||
{
|
||
key: "productionMode",
|
||
eyebrow: "Production",
|
||
title: "生产对接模式",
|
||
desc: "控制是否对接智能报工小程序",
|
||
accent: "green"
|
||
},
|
||
{
|
||
key: "assistant",
|
||
eyebrow: "AI Assistant",
|
||
title: "AI 助手配置",
|
||
desc: "维护 LLM 供应商、模型与提示词",
|
||
accent: "orange"
|
||
}
|
||
];
|
||
```
|
||
|
||
- [ ] **Step 3: Add snapshot helpers after `formatAttendancePoints`**
|
||
|
||
Add:
|
||
|
||
```js
|
||
function clonePlain(value) {
|
||
return JSON.parse(JSON.stringify(value));
|
||
}
|
||
|
||
function serializeValue(value) {
|
||
return JSON.stringify(value);
|
||
}
|
||
|
||
function getSectionState(sectionKey) {
|
||
if (sectionKey === "broadcast") {
|
||
return {
|
||
editingBroadcastId: editingBroadcastId.value,
|
||
...clonePlain(broadcastForm)
|
||
};
|
||
}
|
||
|
||
if (sectionKey === "rawLotPrefix") {
|
||
return clonePlain(rawLotPrefixForm);
|
||
}
|
||
|
||
if (sectionKey === "productionMode") {
|
||
return clonePlain(smartOperationReportForm);
|
||
}
|
||
|
||
if (sectionKey === "assistant") {
|
||
return {
|
||
...clonePlain(assistantForm),
|
||
api_key: ""
|
||
};
|
||
}
|
||
|
||
return {};
|
||
}
|
||
|
||
function captureSectionSnapshot(sectionKey) {
|
||
sectionSnapshots[sectionKey] = serializeValue(getSectionState(sectionKey));
|
||
}
|
||
|
||
function captureAllSectionSnapshots() {
|
||
extensionSections.forEach((section) => {
|
||
captureSectionSnapshot(section.key);
|
||
});
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Add computed status and dirty state before `loadAll`**
|
||
|
||
Add:
|
||
|
||
```js
|
||
const activeSectionMeta = computed(() => {
|
||
return extensionSections.find((section) => section.key === activeSection.value) || extensionSections[0];
|
||
});
|
||
|
||
const activeBroadcastCount = computed(() => {
|
||
return broadcasts.value.filter((item) => item.status === "ACTIVE").length;
|
||
});
|
||
|
||
const assistantStateLabel = computed(() => {
|
||
if (assistantConfig.value.enabled && assistantConfig.value.api_key_configured) {
|
||
return "已启用";
|
||
}
|
||
if (assistantConfig.value.api_key_configured) {
|
||
return "密钥已配置";
|
||
}
|
||
return "占位模式";
|
||
});
|
||
|
||
const statusCards = computed(() => [
|
||
{
|
||
label: "广播启用",
|
||
value: `${activeBroadcastCount.value} 条`,
|
||
tone: activeBroadcastCount.value ? "success" : "muted"
|
||
},
|
||
{
|
||
label: "库存批次前缀",
|
||
value: rawLotPrefixConfig.value.config_value || rawLotPrefixForm.config_value || "YL",
|
||
tone: "info"
|
||
},
|
||
{
|
||
label: "报工小程序",
|
||
value: smartOperationReportForm.enabled ? "已对接" : "未对接",
|
||
tone: smartOperationReportForm.enabled ? "success" : "warning"
|
||
},
|
||
{
|
||
label: "AI 助手",
|
||
value: assistantStateLabel.value,
|
||
tone: assistantConfig.value.enabled ? "success" : "muted"
|
||
}
|
||
]);
|
||
|
||
const activeSectionDirty = computed(() => {
|
||
return sectionSnapshots[activeSection.value] !== serializeValue(getSectionState(activeSection.value));
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 5: Add active-section save and reset helpers before `onMounted`**
|
||
|
||
Add:
|
||
|
||
```js
|
||
async function saveActiveSection() {
|
||
if (activeSection.value === "broadcast") {
|
||
await saveBroadcast();
|
||
captureSectionSnapshot("broadcast");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "rawLotPrefix") {
|
||
await saveRawLotPrefixConfig();
|
||
captureSectionSnapshot("rawLotPrefix");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "productionMode") {
|
||
await saveSmartOperationReportConfig();
|
||
captureSectionSnapshot("productionMode");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "assistant") {
|
||
await saveAssistantConfig();
|
||
captureSectionSnapshot("assistant");
|
||
}
|
||
}
|
||
|
||
function resetActiveSection() {
|
||
if (activeSection.value === "broadcast") {
|
||
resetBroadcastForm();
|
||
captureSectionSnapshot("broadcast");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "rawLotPrefix") {
|
||
applyRawLotPrefixConfig(rawLotPrefixConfig.value);
|
||
captureSectionSnapshot("rawLotPrefix");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "productionMode") {
|
||
applySmartOperationReportConfig(smartOperationReportConfig.value);
|
||
captureSectionSnapshot("productionMode");
|
||
return;
|
||
}
|
||
|
||
if (activeSection.value === "assistant") {
|
||
applyAssistantConfig(assistantConfig.value);
|
||
captureSectionSnapshot("assistant");
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 6: Update save functions to refresh snapshots**
|
||
|
||
At the end of successful `saveBroadcast`, after:
|
||
|
||
```js
|
||
broadcasts.value = await fetchResource("/system-extension/broadcasts", []);
|
||
```
|
||
|
||
Add:
|
||
|
||
```js
|
||
captureSectionSnapshot("broadcast");
|
||
```
|
||
|
||
At the end of successful `saveAssistantConfig`, after feedback:
|
||
|
||
```js
|
||
feedbackMessage.value = "AI 机器人配置已保存";
|
||
```
|
||
|
||
Add:
|
||
|
||
```js
|
||
captureSectionSnapshot("assistant");
|
||
```
|
||
|
||
At the end of successful `saveRawLotPrefixConfig`, after feedback:
|
||
|
||
```js
|
||
feedbackMessage.value = "原材料库存批次号前缀已保存";
|
||
```
|
||
|
||
Add:
|
||
|
||
```js
|
||
captureSectionSnapshot("rawLotPrefix");
|
||
```
|
||
|
||
At the end of successful `saveSmartOperationReportConfig`, after feedback:
|
||
|
||
```js
|
||
feedbackMessage.value = "生产模式配置已保存";
|
||
```
|
||
|
||
Add:
|
||
|
||
```js
|
||
captureSectionSnapshot("productionMode");
|
||
```
|
||
|
||
- [ ] **Step 7: Capture initial snapshots after loading**
|
||
|
||
Change `onMounted` from:
|
||
|
||
```js
|
||
onMounted(async () => {
|
||
await loadAll();
|
||
});
|
||
```
|
||
|
||
To:
|
||
|
||
```js
|
||
onMounted(async () => {
|
||
await loadAll();
|
||
captureAllSectionSnapshots();
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 8: Run the source test**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
node --test src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
not ok ... removes the old hero explanation card and admin-only copy
|
||
not ok ... renders a compact system extension workbench shell
|
||
```
|
||
|
||
The test still fails because the template and CSS have not been refactored yet.
|
||
|
||
---
|
||
|
||
### Task 3: Replace Old Stacked Template with Workbench Layout
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/views/SystemExtensionView.vue`
|
||
|
||
- [ ] **Step 1: Replace the entire `<template>` block**
|
||
|
||
Replace the current `<template>...</template>` with:
|
||
|
||
```vue
|
||
<template>
|
||
<section class="system-extension-workbench">
|
||
<header class="extension-workbench-head">
|
||
<div>
|
||
<p class="eyebrow">系统管理</p>
|
||
<h2>系统拓展</h2>
|
||
</div>
|
||
<div class="extension-status-strip" aria-label="系统拓展状态概览">
|
||
<article
|
||
v-for="card in statusCards"
|
||
:key="card.label"
|
||
class="extension-status-pill"
|
||
:class="`extension-status-${card.tone}`"
|
||
>
|
||
<span>{{ card.label }}</span>
|
||
<strong>{{ card.value }}</strong>
|
||
</article>
|
||
</div>
|
||
</header>
|
||
|
||
<div v-if="feedbackMessage" class="feedback-banner">{{ feedbackMessage }}</div>
|
||
<div v-if="errorMessage" class="feedback-banner error-banner">{{ errorMessage }}</div>
|
||
|
||
<section class="extension-config-shell">
|
||
<nav class="extension-nav-rail" aria-label="系统拓展配置目录">
|
||
<button
|
||
v-for="section in extensionSections"
|
||
:key="section.key"
|
||
class="extension-nav-button"
|
||
:class="[{ active: activeSection === section.key }, `extension-nav-${section.accent}`]"
|
||
type="button"
|
||
@click="activeSection = section.key"
|
||
>
|
||
<span>{{ section.eyebrow }}</span>
|
||
<strong>{{ section.title }}</strong>
|
||
<small>{{ section.desc }}</small>
|
||
</button>
|
||
</nav>
|
||
|
||
<main class="extension-module-panel">
|
||
<div class="extension-module-head">
|
||
<div>
|
||
<p class="eyebrow">{{ activeSectionMeta.eyebrow }}</p>
|
||
<h3>{{ activeSectionMeta.title }}</h3>
|
||
</div>
|
||
<span v-if="activeSectionDirty" class="panel-tag warning-tag">有未保存修改</span>
|
||
<span v-else class="panel-tag">已同步</span>
|
||
</div>
|
||
|
||
<section v-if="activeSection === 'broadcast'" class="extension-broadcast-grid">
|
||
<form class="stack-form extension-form-card" @submit.prevent="saveActiveSection">
|
||
<div class="form-section-title">
|
||
<strong>{{ editingBroadcastId ? "编辑广播" : "新增广播" }}</strong>
|
||
<button class="ghost-button" type="button" @click="resetBroadcastForm">新建广播</button>
|
||
</div>
|
||
|
||
<div class="double-field">
|
||
<label class="form-field">
|
||
<span>广播标题 <i class="required-mark">*</i></span>
|
||
<input v-model.trim="broadcastForm.title" type="text" required />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>提示类型</span>
|
||
<select v-model="broadcastForm.tone">
|
||
<option value="INFO">信息</option>
|
||
<option value="SUCCESS">成功</option>
|
||
<option value="WARNING">预警</option>
|
||
<option value="DANGER">重要</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<label class="form-field">
|
||
<span>广播内容 <i class="required-mark">*</i></span>
|
||
<input v-model.trim="broadcastForm.content" type="text" required />
|
||
</label>
|
||
|
||
<div class="form-field">
|
||
<span>通知考勤点 <i class="required-mark">*</i></span>
|
||
<div class="checkbox-grid extension-checkbox-grid">
|
||
<label v-for="point in attendancePoints" :key="point.name" class="checkbox-field">
|
||
<input v-model="broadcastForm.attendance_point_names" type="checkbox" :value="point.name" />
|
||
<span>{{ point.name }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="triple-field">
|
||
<label class="form-field">
|
||
<span>开始时间</span>
|
||
<input v-model="broadcastForm.starts_at" type="datetime-local" />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>结束时间</span>
|
||
<input v-model="broadcastForm.ends_at" type="datetime-local" />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>排序号</span>
|
||
<input v-model.number="broadcastForm.sort_no" type="number" step="1" />
|
||
</label>
|
||
</div>
|
||
|
||
<div class="double-field">
|
||
<label class="form-field">
|
||
<span>状态</span>
|
||
<select v-model="broadcastForm.status">
|
||
<option value="ACTIVE">启用</option>
|
||
<option value="PAUSED">暂停</option>
|
||
</select>
|
||
</label>
|
||
<div class="extension-banner-preview">
|
||
<span>横幅预览</span>
|
||
<div class="broadcast-banner" :class="`broadcast-${broadcastForm.tone.toLowerCase()}`">
|
||
<span class="broadcast-speaker" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" role="img">
|
||
<path d="M4 10.5H7.5L16 6.5V17.5L7.5 13.5H4V10.5Z" />
|
||
<path d="M7.5 13.5L9.2 19H12.2L10.4 14.8" />
|
||
<path d="M18.3 9.2L20.5 8" />
|
||
<path d="M18.7 12H21.4" />
|
||
<path d="M18.3 14.8L20.5 16" />
|
||
</svg>
|
||
</span>
|
||
<strong>{{ broadcastForm.title || "广播标题" }}</strong>
|
||
<span>{{ broadcastForm.content || "广播内容会显示在系统右上角" }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<section class="extension-list-card">
|
||
<div class="form-section-title">
|
||
<strong>广播记录</strong>
|
||
<span class="panel-tag">{{ filteredBroadcasts.length }} 条</span>
|
||
</div>
|
||
|
||
<TableControls
|
||
v-model:search="broadcastControls.search.value"
|
||
v-model:sort-key="broadcastControls.sortKey.value"
|
||
v-model:sort-direction="broadcastControls.sortDirection.value"
|
||
:sort-options="broadcastControls.sortOptions"
|
||
placeholder="搜索标题、内容、状态、类型"
|
||
/>
|
||
|
||
<div class="table-wrap extension-table-wrap">
|
||
<table class="data-table compact-table">
|
||
<thead>
|
||
<tr>
|
||
<th>标题</th>
|
||
<th>考勤点</th>
|
||
<th>内容</th>
|
||
<th>类型</th>
|
||
<th>状态</th>
|
||
<th>开始</th>
|
||
<th>结束</th>
|
||
<th>排序</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="item in paginatedBroadcasts" :key="item.broadcast_id">
|
||
<td>{{ item.title }}</td>
|
||
<td>{{ formatAttendancePoints(item.attendance_point_names) }}</td>
|
||
<td>{{ item.content }}</td>
|
||
<td><span class="status-chip" :class="`status-${String(item.tone || 'INFO').toLowerCase()}`">{{ formatToneLabel(item.tone) }}</span></td>
|
||
<td><span class="status-chip" :class="item.status === 'ACTIVE' ? 'status-active' : 'status-paused'">{{ item.status === "ACTIVE" ? "启用" : "暂停" }}</span></td>
|
||
<td>{{ formatDateTime(item.starts_at) }}</td>
|
||
<td>{{ formatDateTime(item.ends_at) }}</td>
|
||
<td>{{ item.sort_no }}</td>
|
||
<td class="action-row">
|
||
<button class="ghost-button" type="button" @click="editBroadcast(item)">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="!filteredBroadcasts.length">
|
||
<td colspan="9" class="empty-row">暂无广播内容</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<PaginationBar v-model:page="broadcastPage" v-model:page-size="broadcastPageSize" :total="filteredBroadcasts.length" />
|
||
</section>
|
||
</section>
|
||
|
||
<form v-else-if="activeSection === 'rawLotPrefix'" class="stack-form extension-form-card" @submit.prevent="saveActiveSection">
|
||
<div class="extension-setting-block">
|
||
<span class="setting-kicker">当前规则</span>
|
||
<strong>{{ rawLotPrefixForm.config_value || "YL" }}0001</strong>
|
||
<p>序号达到 9999 后自然扩展为 {{ rawLotPrefixForm.config_value || "YL" }}10000，不截断、不补新规则。</p>
|
||
</div>
|
||
|
||
<div class="double-field">
|
||
<label class="form-field">
|
||
<span>前缀</span>
|
||
<input v-model.trim="rawLotPrefixForm.config_value" type="text" maxlength="20" placeholder="默认 YL" />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>说明</span>
|
||
<input v-model.trim="rawLotPrefixForm.remark" type="text" placeholder="例如：原材料库存批次号默认前缀" />
|
||
</label>
|
||
</div>
|
||
</form>
|
||
|
||
<form v-else-if="activeSection === 'productionMode'" class="stack-form extension-form-card" @submit.prevent="saveActiveSection">
|
||
<label class="extension-mode-switch" :class="{ active: smartOperationReportForm.enabled }">
|
||
<input v-model="smartOperationReportForm.enabled" type="checkbox" />
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
<span>
|
||
<strong>对接智能报工小程序</strong>
|
||
<small>{{ smartOperationReportForm.enabled ? "开启后，ERP 展示工序报工和小程序报工证据。" : "关闭后，ERP 隐藏工序报工，生产按入库闭环推进。" }}</small>
|
||
</span>
|
||
</label>
|
||
|
||
<div class="extension-impact-list">
|
||
<article>
|
||
<span>开启时</span>
|
||
<strong>显示工序报工</strong>
|
||
<p>工单明细展示小程序报工证据，生产台账可参考工序进度。</p>
|
||
</article>
|
||
<article>
|
||
<span>关闭时</span>
|
||
<strong>ERP 入库闭环</strong>
|
||
<p>隐藏工序报工入口，成品、余料、废料按 ERP 单据推进。</p>
|
||
</article>
|
||
</div>
|
||
|
||
<label class="form-field">
|
||
<span>说明</span>
|
||
<input v-model.trim="smartOperationReportForm.remark" type="text" placeholder="例如：客户未购买小程序模块，暂按ERP入库反推" />
|
||
</label>
|
||
</form>
|
||
|
||
<form v-else class="stack-form extension-form-card" @submit.prevent="saveActiveSection">
|
||
<div class="triple-field">
|
||
<label class="form-field">
|
||
<span>助手名称</span>
|
||
<input v-model.trim="assistantForm.assistant_name" type="text" required />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>供应商</span>
|
||
<input v-model.trim="assistantForm.provider_name" type="text" placeholder="例如：OpenRouter / SiliconFlow" />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>模型名称</span>
|
||
<input v-model.trim="assistantForm.model_name" type="text" placeholder="例如：deepseek-chat" />
|
||
</label>
|
||
</div>
|
||
|
||
<div class="double-field">
|
||
<label class="form-field">
|
||
<span>API Base URL</span>
|
||
<input v-model.trim="assistantForm.api_base_url" type="text" placeholder="https://api.example.com/v1" />
|
||
</label>
|
||
<label class="form-field">
|
||
<span>API Key</span>
|
||
<input v-model.trim="assistantForm.api_key" type="password" :placeholder="assistantConfig.api_key_configured ? '留空表示不修改现有密钥' : '请输入 API Key'" />
|
||
</label>
|
||
</div>
|
||
|
||
<div class="double-field">
|
||
<label class="form-field">
|
||
<span>温度</span>
|
||
<input v-model.number="assistantForm.temperature" type="number" min="0" max="2" step="0.1" />
|
||
</label>
|
||
<label class="extension-mode-switch" :class="{ active: assistantForm.enabled }">
|
||
<input v-model="assistantForm.enabled" type="checkbox" />
|
||
<span class="switch-track" aria-hidden="true"></span>
|
||
<span>
|
||
<strong>启用真实 LLM 调用</strong>
|
||
<small>{{ assistantConfig.api_key_configured ? "密钥已配置，保存后按当前开关生效。" : "未配置密钥时建议保持占位模式。" }}</small>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<label class="form-field">
|
||
<span>每次新建对话的系统提示词</span>
|
||
<textarea v-model.trim="assistantForm.system_prompt" rows="6"></textarea>
|
||
</label>
|
||
</form>
|
||
</main>
|
||
</section>
|
||
|
||
<div v-if="activeSectionDirty" class="extension-save-dock">
|
||
<span>{{ activeSectionMeta.title }}有未保存修改</span>
|
||
<button class="ghost-button" type="button" @click="resetActiveSection">放弃修改</button>
|
||
<button class="primary-button" type="button" @click="saveActiveSection">保存配置</button>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
```
|
||
|
||
- [ ] **Step 2: Run the source test**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
node --test src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
not ok ... renders a compact system extension workbench shell
|
||
```
|
||
|
||
The old hero assertions should now pass. CSS assertions still fail until Task 4.
|
||
|
||
---
|
||
|
||
### Task 4: Add Workbench CSS and Remove Old Extension Overrides
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/styles/main.css`
|
||
|
||
- [ ] **Step 1: Remove old extension hero selectors**
|
||
|
||
Delete these old blocks if they still exist:
|
||
|
||
```css
|
||
.extension-hero {
|
||
align-items: center;
|
||
}
|
||
|
||
.extension-status-card {
|
||
display: grid;
|
||
gap: 8px;
|
||
align-content: center;
|
||
padding: 20px;
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(126, 198, 255, 0.24);
|
||
background: rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.extension-status-card strong {
|
||
color: #f5fbff;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.compact-extension-form {
|
||
max-width: 1180px;
|
||
}
|
||
|
||
.extension-preview-field {
|
||
justify-content: end;
|
||
}
|
||
|
||
.extension-preview-banner {
|
||
max-width: 100%;
|
||
}
|
||
```
|
||
|
||
Also remove `.extension-status-card` from grouped old card override selectors where it appears with `.kpi-card`, `.hero-stat`, `.summary-card`.
|
||
|
||
- [ ] **Step 2: Append new workbench styles near other system/page styles**
|
||
|
||
Add:
|
||
|
||
```css
|
||
.system-extension-workbench {
|
||
display: grid;
|
||
gap: 16px;
|
||
padding-bottom: 92px;
|
||
}
|
||
|
||
.extension-workbench-head {
|
||
display: grid;
|
||
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.8fr);
|
||
gap: 16px;
|
||
align-items: end;
|
||
}
|
||
|
||
.extension-workbench-head h2 {
|
||
margin: 2px 0 0;
|
||
color: var(--text-strong);
|
||
font-size: clamp(24px, 2.2vw, 34px);
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.extension-status-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.extension-status-pill {
|
||
min-width: 0;
|
||
padding: 12px 14px;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
border-radius: 18px;
|
||
background:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.9)),
|
||
radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.12), transparent 34%);
|
||
box-shadow: var(--card-shadow-low), var(--card-highlight);
|
||
}
|
||
|
||
.extension-status-pill span {
|
||
display: block;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.extension-status-pill strong {
|
||
display: block;
|
||
margin-top: 5px;
|
||
overflow: hidden;
|
||
color: var(--text-strong);
|
||
font-size: 17px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.extension-status-success {
|
||
border-color: rgba(34, 197, 94, 0.28);
|
||
}
|
||
|
||
.extension-status-warning {
|
||
border-color: rgba(245, 158, 11, 0.34);
|
||
}
|
||
|
||
.extension-status-info {
|
||
border-color: rgba(14, 165, 233, 0.28);
|
||
}
|
||
|
||
.extension-status-muted {
|
||
border-color: rgba(148, 163, 184, 0.26);
|
||
}
|
||
|
||
.extension-config-shell {
|
||
display: grid;
|
||
grid-template-columns: 240px minmax(0, 1fr);
|
||
gap: 16px;
|
||
align-items: start;
|
||
}
|
||
|
||
.extension-nav-rail {
|
||
position: sticky;
|
||
top: 88px;
|
||
display: grid;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||
border-radius: 24px;
|
||
background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(239, 245, 251, 0.9));
|
||
box-shadow: var(--card-shadow-low), var(--card-highlight);
|
||
}
|
||
|
||
.extension-nav-button {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 4px;
|
||
width: 100%;
|
||
padding: 14px 14px 14px 18px;
|
||
overflow: hidden;
|
||
border: 1px solid transparent;
|
||
border-radius: 18px;
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 0.18s ease,
|
||
border-color 0.18s ease,
|
||
background 0.18s ease,
|
||
box-shadow 0.18s ease;
|
||
}
|
||
|
||
.extension-nav-button::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 12px auto 12px 8px;
|
||
width: 4px;
|
||
border-radius: 999px;
|
||
background: rgba(148, 163, 184, 0.38);
|
||
}
|
||
|
||
.extension-nav-button span {
|
||
color: var(--text-subtle);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.extension-nav-button strong {
|
||
color: var(--text-strong);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.extension-nav-button small {
|
||
color: var(--text-muted);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.extension-nav-button:hover,
|
||
.extension-nav-button.active {
|
||
border-color: rgba(31, 78, 121, 0.2);
|
||
background: #ffffff;
|
||
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.extension-nav-blue.active::before {
|
||
background: #0ea5e9;
|
||
}
|
||
|
||
.extension-nav-steel.active::before {
|
||
background: #475569;
|
||
}
|
||
|
||
.extension-nav-green.active::before {
|
||
background: #16a34a;
|
||
}
|
||
|
||
.extension-nav-orange.active::before {
|
||
background: #f97316;
|
||
}
|
||
|
||
.extension-module-panel {
|
||
min-width: 0;
|
||
padding: 18px;
|
||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||
border-radius: 28px;
|
||
background:
|
||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.94)),
|
||
radial-gradient(circle at 96% 0%, rgba(59, 130, 246, 0.1), transparent 30%);
|
||
box-shadow: var(--card-shadow), var(--card-highlight);
|
||
}
|
||
|
||
.extension-module-head {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.extension-module-head h3 {
|
||
margin: 2px 0 0;
|
||
color: var(--text-strong);
|
||
font-size: 22px;
|
||
}
|
||
|
||
.warning-tag {
|
||
border-color: rgba(245, 158, 11, 0.28);
|
||
background: rgba(255, 247, 237, 0.92);
|
||
color: #b45309;
|
||
}
|
||
|
||
.extension-broadcast-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1.14fr);
|
||
gap: 16px;
|
||
align-items: start;
|
||
}
|
||
|
||
.extension-form-card,
|
||
.extension-list-card {
|
||
min-width: 0;
|
||
padding: 16px;
|
||
border: 1px solid rgba(203, 213, 225, 0.72);
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.84);
|
||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.form-section-title {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.form-section-title strong {
|
||
color: var(--text-strong);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.extension-checkbox-grid {
|
||
max-height: 178px;
|
||
overflow: auto;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.extension-banner-preview {
|
||
display: grid;
|
||
gap: 8px;
|
||
align-content: end;
|
||
}
|
||
|
||
.extension-banner-preview > span {
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.extension-table-wrap {
|
||
max-height: 430px;
|
||
}
|
||
|
||
.extension-setting-block {
|
||
display: grid;
|
||
gap: 6px;
|
||
padding: 18px;
|
||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||
border-radius: 22px;
|
||
background:
|
||
linear-gradient(135deg, #0f172a, #1e3a5f),
|
||
radial-gradient(circle at 16% 0%, rgba(125, 211, 252, 0.26), transparent 34%);
|
||
color: #e5eef8;
|
||
}
|
||
|
||
.extension-setting-block .setting-kicker {
|
||
color: rgba(226, 232, 240, 0.72);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.extension-setting-block strong {
|
||
font-size: clamp(28px, 4vw, 48px);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.extension-setting-block p {
|
||
margin: 0;
|
||
color: rgba(226, 232, 240, 0.78);
|
||
}
|
||
|
||
.extension-mode-switch {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
gap: 14px;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
border-radius: 22px;
|
||
background: #ffffff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.extension-mode-switch input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.extension-mode-switch .switch-track {
|
||
position: relative;
|
||
width: 54px;
|
||
height: 30px;
|
||
border-radius: 999px;
|
||
background: #cbd5e1;
|
||
box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.16);
|
||
transition: background 0.18s ease;
|
||
}
|
||
|
||
.extension-mode-switch .switch-track::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 4px;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
|
||
transition: transform 0.18s ease;
|
||
}
|
||
|
||
.extension-mode-switch.active .switch-track {
|
||
background: #0f766e;
|
||
}
|
||
|
||
.extension-mode-switch.active .switch-track::after {
|
||
transform: translateX(24px);
|
||
}
|
||
|
||
.extension-mode-switch strong {
|
||
display: block;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.extension-mode-switch small {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--text-muted);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.extension-impact-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.extension-impact-list article {
|
||
padding: 14px;
|
||
border: 1px solid rgba(203, 213, 225, 0.76);
|
||
border-radius: 18px;
|
||
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||
}
|
||
|
||
.extension-impact-list span {
|
||
color: var(--text-subtle);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.extension-impact-list strong {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.extension-impact-list p {
|
||
margin: 6px 0 0;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.extension-save-dock {
|
||
position: fixed;
|
||
right: 28px;
|
||
bottom: 28px;
|
||
z-index: 30;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
max-width: min(680px, calc(100vw - 56px));
|
||
padding: 12px;
|
||
border: 1px solid rgba(15, 23, 42, 0.1);
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.94);
|
||
box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.extension-save-dock span {
|
||
padding: 0 8px;
|
||
color: var(--text-muted);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-chip.status-info {
|
||
background: rgba(14, 165, 233, 0.12);
|
||
color: #0369a1;
|
||
}
|
||
|
||
.status-chip.status-success {
|
||
background: rgba(34, 197, 94, 0.14);
|
||
color: #15803d;
|
||
}
|
||
|
||
.status-chip.status-warning {
|
||
background: rgba(245, 158, 11, 0.14);
|
||
color: #b45309;
|
||
}
|
||
|
||
.status-chip.status-danger {
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.status-chip.status-active {
|
||
background: rgba(34, 197, 94, 0.14);
|
||
color: #15803d;
|
||
}
|
||
|
||
.status-chip.status-paused {
|
||
background: rgba(148, 163, 184, 0.16);
|
||
color: #475569;
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.extension-workbench-head {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.extension-config-shell {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.extension-nav-rail {
|
||
position: static;
|
||
grid-template-columns: repeat(4, minmax(180px, 1fr));
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.extension-broadcast-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.extension-status-strip {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.extension-impact-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.extension-save-dock {
|
||
right: 14px;
|
||
bottom: 14px;
|
||
left: 14px;
|
||
justify-content: flex-end;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.extension-save-dock span {
|
||
display: none;
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Run source test**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
node --test src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
ok ... SystemExtensionView workbench redesign
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: Verify Build and Browser Behavior
|
||
|
||
**Files:**
|
||
- No additional files unless the build exposes a syntax issue.
|
||
|
||
- [ ] **Step 1: Run targeted test**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
node --test src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
# pass 5
|
||
# fail 0
|
||
```
|
||
|
||
- [ ] **Step 2: Run frontend build**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd frontend
|
||
npm run build
|
||
```
|
||
|
||
Expected:
|
||
|
||
```text
|
||
✓ built in
|
||
```
|
||
|
||
The existing Vite chunk-size warning is acceptable if it appears; do not treat it as a failure.
|
||
|
||
- [ ] **Step 3: Browser smoke test**
|
||
|
||
Use the in-app Browser on:
|
||
|
||
```text
|
||
http://localhost:5173/system-extension
|
||
```
|
||
|
||
Verify:
|
||
|
||
```text
|
||
顶部只有紧凑标题和四个状态 pill
|
||
没有 ADMIN ONLY
|
||
没有大面积 hero 解释卡
|
||
左侧目录有 广播通知 / 库存批次规则 / 生产对接模式 / AI 助手配置
|
||
点击每个目录只切换右侧模块，不刷新整页
|
||
修改任意字段后右下角出现 放弃修改 / 保存配置
|
||
点击放弃修改后字段回到已加载状态，保存栏消失
|
||
广播通知列表状态有颜色区分
|
||
窄屏下左侧目录变横向滚动，不挤压右侧表单
|
||
```
|
||
|
||
- [ ] **Step 4: Git safety check**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
git status --short
|
||
```
|
||
|
||
Expected changed files for this plan:
|
||
|
||
```text
|
||
M frontend/src/views/SystemExtensionView.vue
|
||
M frontend/src/styles/main.css
|
||
?? frontend/src/views/SystemExtensionView.test.js
|
||
```
|
||
|
||
Existing DAG changes may still appear. Do not revert them. Do not commit unless the user explicitly asks.
|
||
|
||
---
|
||
|
||
## Self-Review Checklist
|
||
|
||
- Spec coverage: Removes old large explanation UI, creates compact workbench, preserves all current fields and endpoints, adds status color distinction, adds fixed save/reset dock, supports responsive layout.
|
||
- Placeholder scan: No implementation step contains placeholder wording or含糊处理描述。
|
||
- Type consistency: Uses one key set everywhere: `broadcast`, `rawLotPrefix`, `productionMode`, `assistant`.
|
||
- API safety: Existing endpoints remain unchanged.
|
||
- Dirty worktree safety: Plan explicitly avoids committing and warns not to touch unrelated DAG files.
|
||
|
||
---
|
||
|
||
## Execution Options
|
||
|
||
Plan complete and saved to `docs/superpowers/plans/2026-06-14-system-extension-workbench.md`.
|
||
|
||
**1. Subagent-Driven (recommended)** - Dispatch a fresh subagent per task, review between tasks, fast iteration.
|
||
|
||
**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints.
|