docs:更新提示词、任务清单、原型图
This commit is contained in:
zwt13703
@@ -14,7 +14,7 @@ AI 文档模板生成系统（第一阶段 MVP），定位是一个 **Word 模
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端**：Vue 3 + TypeScript + Vite + Element Plus + Pinia + Vue Router 4
|
||||
- **前端**：Vue 3 + TypeScript + Vite + Ant Design Vue + Pinia + Vue Router 4
|
||||
- **后端**：Python 3.11+ + FastAPI + SQLAlchemy + Alembic + MySQL 8.0
|
||||
- **存储**：MinIO（文件）/ MySQL（结构化数据）
|
||||
- **关键词**：block_id, template, region_type, upsert
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|---|------|---------|
|
||||
| 前端框架 | Vue 3 | ^3.4 |
|
||||
| 构建工具 | Vite | ^5.x |
|
||||
| UI 组件库 | Element Plus | ^2.8 |
|
||||
| UI 组件库 | Ant Design Vue | ^4.x |
|
||||
| 状态管理 | Pinia | ^2.x |
|
||||
| 路由 | Vue Router 4 | ^4.x |
|
||||
| 后端框架 | Python FastAPI | ^0.110 |
|
||||
@@ -135,8 +135,8 @@ uvicorn app.main:app --reload --port 8000
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
pnpm install
|
||||
pnpm run dev
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 访问
|
||||
|
||||
@@ -30,7 +30,7 @@ metadata:
|
||||
|
||||
| 层 | 选型 | 说明 |
|
||||
|---|------|------|
|
||||
| 前端 | Vue3 + Vite + Element Plus + Pinia | 组件化单页应用 |
|
||||
| 前端 | Vue3 + Vite + Ant Design Vue + Pinia | 组件化单页应用 |
|
||||
| 后端 | Python FastAPI | RESTful API |
|
||||
| 数据库 | MySQL 8.0 + SQLAlchemy + Alembic | 关系型数据 |
|
||||
| 文件存储 | MinIO / 本地文件系统 | 模板和资料文件 |
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,618 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>AI 文档模板系统 · 原型</title>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5b5bd6; --primary-hover:#4a4ac0; --primary-soft:#eeeefb;
|
||||
--primary-2:#7c7cdb;
|
||||
--bg:#f5f6f8; --bg-card:#fff; --bg-soft:#f0f1f3; --bg-hover:#eaecef;
|
||||
--border:#e0e2e6; --border-light:#eaecef;
|
||||
--text:#1a1d24; --text-2:#5b626e; --text-3:#9aa1ad; --text-4:#c4c8cf;
|
||||
--success:#1a8c4a; --warn:#d48a00; --danger:#d33;
|
||||
--font:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
|
||||
--fs-h1:22px; --fs-h2:16px; --fs-h3:14px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
|
||||
--fw-bold:600; --fw-medium:500;
|
||||
--sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
|
||||
--radius:6px; --radius-sm:4px; --radius-lg:10px;
|
||||
--shadow:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 12px rgba(0,0,0,.08);
|
||||
--sidebar-w:220px; --toolbar-h:48px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:var(--font);font-size:var(--fs-body);color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
|
||||
[data-lucide]{width:16px;height:16px;stroke-width:1.8;vertical-align:middle;flex-shrink:0}
|
||||
.icon-sm{width:14px;height:14px}
|
||||
/* ===== layout ===== */
|
||||
.app{display:flex;height:100vh}
|
||||
/* ===== sidebar ===== */
|
||||
.sidebar{width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
|
||||
.sidebar-logo{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--border);font-weight:var(--fw-bold);font-size:var(--fs-h3);height:52px;flex-shrink:0}
|
||||
.logo-icon{width:26px;height:26px;background:var(--primary);border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
|
||||
.sidebar-scroll{flex:1;overflow-y:auto;padding:var(--sp2) 0}
|
||||
.nav-group{margin-bottom:2px}
|
||||
.nav-group-title{font-size:var(--fs-xs);color:var(--text-3);padding:var(--sp2) var(--sp4) var(--sp1);font-weight:var(--fw-medium);letter-spacing:.3px}
|
||||
.nav-item{display:flex;align-items:center;gap:var(--sp2);padding:7px var(--sp4);cursor:pointer;color:var(--text-2);font-size:var(--fs-body);transition:all .12s;position:relative;user-select:none}
|
||||
.nav-item:hover{background:var(--bg-soft);color:var(--text)}
|
||||
.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:var(--fw-medium)}
|
||||
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--primary);border-radius:0 2px 2px 0}
|
||||
.nav-arrow{margin-left:auto;color:var(--text-4);transition:transform .15s;width:14px;height:14px}
|
||||
.nav-arrow.open{transform:rotate(90deg)}
|
||||
.nav-sub{padding-left:8px;overflow:hidden;max-height:0;transition:max-height .22s ease}
|
||||
.nav-sub.open{max-height:300px}
|
||||
.nav-sub-item{padding:5px var(--sp4) 5px 28px;cursor:pointer;color:var(--text-3);font-size:var(--fs-sm);border-radius:var(--radius-sm);margin:1px 0;display:flex;align-items:center;gap:6px}
|
||||
.nav-sub-item:hover{color:var(--text);background:var(--bg-soft)}
|
||||
.nav-sub-item.active{color:var(--primary);font-weight:var(--fw-medium)}
|
||||
.nav-sub-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
|
||||
.nav-sub-item .dot.green{background:var(--success)}
|
||||
.nav-sub-item .dot.gray{background:var(--text-4)}
|
||||
.sidebar-footer{padding:var(--sp2) var(--sp3);border-top:1px solid var(--border);flex-shrink:0}
|
||||
.user-info{display:flex;align-items:center;gap:var(--sp2);padding:6px var(--sp3);border-radius:var(--radius);cursor:pointer}
|
||||
.user-info:hover{background:var(--bg-soft)}
|
||||
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:12px;flex-shrink:0}
|
||||
/* ===== main ===== */
|
||||
.main{flex:1;display:flex;flex-direction:column;min-width:0}
|
||||
/* ===== pages ===== */
|
||||
.page{display:none;flex:1;flex-direction:column}
|
||||
.page.active{display:flex}
|
||||
/* ===== toolbar ===== */
|
||||
.toolbar{height:var(--toolbar-h);display:flex;align-items:center;padding:0 var(--sp4);border-bottom:1px solid var(--border);background:var(--bg-card);flex-shrink:0;gap:var(--sp2)}
|
||||
.toolbar-left{display:flex;align-items:center;gap:var(--sp2);flex:1}
|
||||
.toolbar-right{display:flex;align-items:center;gap:var(--sp2)}
|
||||
.toolbar-divider{width:1px;height:18px;background:var(--border);margin:0 var(--sp1)}
|
||||
.breadcrumb{font-size:var(--fs-sm);color:var(--text-3);display:flex;align-items:center;gap:4px}
|
||||
.breadcrumb span+span::before{content:'/';margin-right:4px;color:var(--text-4)}
|
||||
.view-btn{display:flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-xs);background:var(--bg-card);cursor:pointer;color:var(--text-2);transition:all .12s;line-height:1}
|
||||
.view-btn.active{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
|
||||
.zoom-ctl{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--text-2)}
|
||||
.zoom-ctl span{cursor:pointer;padding:2px;border-radius:3px}
|
||||
.zoom-ctl span:hover{background:var(--bg-soft)}
|
||||
.page-nav{display:flex;align-items:center;gap:2px;font-size:var(--fs-sm);color:var(--text-2)}
|
||||
.pn-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:3px;cursor:pointer;color:var(--text-2);background:var(--bg-card)}
|
||||
.pn-btn:hover{background:var(--bg-soft)}
|
||||
.pn-btn:disabled{opacity:.4;cursor:default}
|
||||
.toggle-group{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;user-select:none}
|
||||
.tgl{width:32px;height:18px;border-radius:9px;background:var(--border);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
|
||||
.tgl.on{background:var(--primary)}
|
||||
.tgl::after{content:'';width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
|
||||
.tgl.on::after{transform:translateX(14px)}
|
||||
/* ===== content area (3-panel) ===== */
|
||||
.content-area{flex:1;display:flex;overflow:hidden}
|
||||
/* ===== config panel ===== */
|
||||
.config-panel{width:380px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
|
||||
.config-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
|
||||
.config-tab{padding:var(--sp3) var(--sp4);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);border-bottom:2px solid transparent;transition:all .12s;user-select:none}
|
||||
.config-tab:hover{color:var(--text)}
|
||||
.config-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:var(--fw-medium)}
|
||||
.config-tab .cnt{display:inline-block;margin-left:4px;font-size:10px;background:var(--bg-soft);color:var(--text-3);padding:0 6px;border-radius:8px;line-height:16px}
|
||||
.config-scroll{flex:1;overflow-y:auto;padding:var(--sp4)}
|
||||
.sec{margin-bottom:var(--sp4)}
|
||||
.sec-title{font-size:var(--fs-h3);font-weight:var(--fw-bold);margin-bottom:var(--sp3);padding-bottom:var(--sp2);border-bottom:1px solid var(--border-light)}
|
||||
.fg{margin-bottom:var(--sp3)}
|
||||
.fl{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);margin-bottom:5px}
|
||||
.fi,.fs{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-body);font-family:var(--font);color:var(--text);background:var(--bg-card);outline:none;transition:border-color .15s}
|
||||
.fi:focus,.fs:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
|
||||
.fta{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-body);font-family:var(--font);color:var(--text);outline:none;resize:vertical;min-height:80px;transition:border-color .15s}
|
||||
.fta:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
|
||||
.cc{text-align:right;font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
|
||||
.tag-list{display:flex;flex-wrap:wrap;gap:5px}
|
||||
.tag-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 10px;border-radius:12px;font-size:var(--fs-sm);background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary);line-height:1.6}
|
||||
.tag-chip .tc{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;cursor:pointer;color:var(--primary);margin-left:2px;font-size:10px;line-height:1}
|
||||
.tag-chip .tc:hover{background:var(--primary);color:#fff}
|
||||
.tag-add{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:var(--fs-sm);border:1px dashed var(--border);color:var(--text-3);cursor:pointer;line-height:1.6}
|
||||
.tag-add:hover{border-color:var(--primary);color:var(--primary)}
|
||||
.rg{display:flex;gap:var(--sp4)}
|
||||
.ri{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--fs-body)}
|
||||
.ri input{accent-color:var(--primary)}
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 16px;border-radius:var(--radius);font-size:var(--fs-body);font-weight:var(--fw-medium);cursor:pointer;border:1px solid transparent;transition:all .12s;line-height:1.4;white-space:nowrap}
|
||||
.btn-p{background:var(--primary);color:#fff;border-color:var(--primary)}
|
||||
.btn-p:hover{background:var(--primary-hover)}
|
||||
.btn-ghost{background:transparent;color:var(--text-2);border-color:transparent;padding:7px 10px}
|
||||
.btn-ghost:hover{background:var(--bg-soft)}
|
||||
.btn-block{width:100%;justify-content:center}
|
||||
.section-empty{padding:var(--sp6);text-align:center;color:var(--text-3)}
|
||||
/* ===== doc preview ===== */
|
||||
.doc-preview{flex:1;overflow-y:auto;padding:var(--sp5);background:#f0f1f3;display:flex;justify-content:center}
|
||||
.doc-page{width:794px;min-height:1000px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:72px 64px;font-size:14px;line-height:1.8;position:relative}
|
||||
.doc-title{font-size:20px;font-weight:var(--fw-bold);text-align:center;margin-bottom:28px}
|
||||
.doc-subtitle{text-align:center;font-size:13px;color:var(--text-2);margin-bottom:32px}
|
||||
.doc-h2{font-size:15px;font-weight:var(--fw-bold);margin-top:24px;margin-bottom:12px;padding-bottom:5px;border-bottom:2px solid var(--text);display:flex;align-items:center;gap:8px}
|
||||
.doc-p{text-indent:2em;margin-bottom:8px;text-align:justify}
|
||||
.doc-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
|
||||
.doc-table th,.doc-table td{padding:7px 10px;border:1px solid #ddd;text-align:left}
|
||||
.doc-table th{background:var(--bg-soft);font-weight:var(--fw-medium);font-size:12px;color:var(--text-2)}
|
||||
.doc-table tr:hover{background:#f8f9fb}
|
||||
.doc-li{margin-bottom:5px;padding-left:1.5em}
|
||||
.doc-tag{display:inline-block;padding:0 7px;border-radius:3px;font-size:10px;font-weight:400;line-height:18px}
|
||||
.doc-tag.blue{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary)}
|
||||
.doc-tag.green{background:#e6f4ea;color:var(--success);border:1px solid var(--success)}
|
||||
.doc-tag.yellow{background:#fef7e0;color:var(--warn);border:1px solid var(--warn)}
|
||||
.doc-tag.purple{background:#f3e8ff;color:#7c3aed;border:1px solid #7c3aed}
|
||||
/* region highlight */
|
||||
.rblock{position:relative;border-radius:4px;transition:background .15s;cursor:pointer;padding:2px 0;margin:0 -4px;padding-left:4px;padding-right:4px}
|
||||
.rblock:hover{background:#f5f5ff}
|
||||
.rblock.active{background:#f0f0ff;outline:2px solid var(--primary);outline-offset:-1px}
|
||||
.rblock .rm{position:absolute;left:-86px;top:2px;font-size:10px;color:var(--primary);background:var(--primary-soft);padding:1px 6px;border-radius:3px;border:1px solid var(--primary);white-space:nowrap;opacity:0;transition:opacity .18s;pointer-events:none;z-index:10}
|
||||
.rblock:hover .rm{opacity:1}
|
||||
.rblock .rm.on{opacity:1}
|
||||
/* ===== tree panel ===== */
|
||||
.tree-panel{width:240px;background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
|
||||
.tree-header{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:var(--fw-medium);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
|
||||
.tree-header .cnt{font-weight:400;color:var(--text-3);font-size:var(--fs-xs);background:var(--bg-soft);padding:0 7px;border-radius:8px;line-height:18px}
|
||||
.tree-scroll{flex:1;overflow-y:auto;padding:var(--sp2) 0}
|
||||
.tree{list-style:none;padding:0;margin:0}
|
||||
.tree li{position:relative}
|
||||
.tn{display:flex;align-items:center;gap:4px;padding:4px var(--sp3);cursor:pointer;font-size:var(--fs-sm);border-radius:3px;transition:all .1s;user-select:none}
|
||||
.tn:hover{background:var(--bg-soft)}
|
||||
.tn.active{background:var(--primary-soft);color:var(--primary)}
|
||||
.tn .tt{width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);flex-shrink:0;transition:transform .12s}
|
||||
.tn .tt.exp{transform:rotate(90deg)}
|
||||
.tn .ti{flex-shrink:0;font-size:12px}
|
||||
.tn .tl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.tn .sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:auto}
|
||||
.tn .sdot.g{background:var(--success)}
|
||||
.tn .sdot.y{background:var(--warn)}
|
||||
.tn .sdot.r{background:var(--danger)}
|
||||
.tn .sdot.n{background:var(--text-4)}
|
||||
.tc2{padding-left:18px}
|
||||
.tc2.hide{display:none}
|
||||
/* ===== page header (for list pages) ===== */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp5) var(--sp5) 0}
|
||||
.page-header h1{font-size:var(--fs-h1);font-weight:var(--fw-bold)}
|
||||
.page-header p{color:var(--text-3);font-size:var(--fs-sm);margin-top:2px}
|
||||
/* ===== list card ===== */
|
||||
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp4);margin:var(--sp4) var(--sp5)}
|
||||
.card-body{padding:0}
|
||||
.sbar{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4);flex-wrap:wrap}
|
||||
.swrap{position:relative;flex:1;max-width:300px}
|
||||
.swrap input{padding-left:32px;width:100%}
|
||||
.swrap .sicon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
|
||||
/* table */
|
||||
.tw{overflow-x:auto}
|
||||
table.w{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
|
||||
thead.w th{padding:var(--sp2) var(--sp3);text-align:left;font-weight:var(--fw-medium);color:var(--text-2);font-size:var(--fs-sm);border-bottom:2px solid var(--border);white-space:nowrap}
|
||||
tbody.w td{padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--border-light);vertical-align:middle}
|
||||
tbody.w tr:hover{background:var(--bg-soft)}
|
||||
.ca{display:flex;gap:3px}
|
||||
.ca button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--text-2);transition:all .12s}
|
||||
.ca button:hover{background:var(--bg-soft);color:var(--primary)}
|
||||
.ca button.d:hover{color:var(--danger)}
|
||||
.tag{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:18px}
|
||||
.tag-g{background:#e6f4ea;color:#1a7e34}
|
||||
.tag-b{background:#e8f0fe;color:#1967d2}
|
||||
.tag-y{background:#fef7e0;color:#b06000}
|
||||
.tag-r{background:#fce8e6;color:#c5221f}
|
||||
.tag-gr{background:var(--bg-soft);color:var(--text-3)}
|
||||
/* pagination */
|
||||
.pg{display:flex;align-items:center;justify-content:space-between;padding:var(--sp3) 0;font-size:var(--fs-sm);color:var(--text-2)}
|
||||
.pg-btns{display:flex;gap:2px}
|
||||
.pg-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2)}
|
||||
.pg-btn:hover{background:var(--bg-soft)}
|
||||
.pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
|
||||
.pg-btn:disabled{opacity:.4;cursor:default}
|
||||
/* stats row */
|
||||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp3);margin:var(--sp4) var(--sp5) 0}
|
||||
.sc{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp3);background:var(--bg-card)}
|
||||
.sc .v{font-size:24px;font-weight:var(--fw-bold);line-height:1.2}
|
||||
.sc .l{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
|
||||
/* config page tabs */
|
||||
.cfg-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--sp4)}
|
||||
.cfg-tab{padding:var(--sp2) var(--sp4);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);border-bottom:2px solid transparent;transition:all .12s}
|
||||
.cfg-tab:hover{color:var(--text)}
|
||||
.cfg-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:var(--fw-medium)}
|
||||
.cfg-c{display:none}
|
||||
.cfg-c.active{display:block}
|
||||
/* upload area */
|
||||
.ua{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:var(--sp6);text-align:center;cursor:pointer;transition:all .2s;margin-bottom:var(--sp4)}
|
||||
.ua:hover{border-color:var(--primary);background:var(--primary-soft)}
|
||||
.ua .uic{color:var(--text-3);margin-bottom:var(--sp2)}
|
||||
.flist{display:flex;flex-direction:column;gap:var(--sp2)}
|
||||
.fl{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp2) var(--sp3);border:1px solid var(--border-light);border-radius:var(--radius)}
|
||||
.fl:hover{background:var(--bg-soft)}
|
||||
.fl .fi2{flex:1;min-width:0}
|
||||
.fl .fn{font-size:var(--fs-body);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.fl .fs2{font-size:var(--fs-xs);color:var(--text-3)}
|
||||
/* ===== responsive ===== */
|
||||
@media(max-width:1200px){
|
||||
.config-panel{width:340px}
|
||||
.tree-panel{width:200px}
|
||||
}
|
||||
@media(max-width:900px){
|
||||
.config-panel{width:300px}
|
||||
.tree-panel{display:none}
|
||||
.doc-page{padding:48px 36px;width:100%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- ===== Sidebar ===== -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon">A</div><span>AI 文档模板</span></div>
|
||||
<div class="sidebar-scroll">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">模板中心</div>
|
||||
<div class="nav-item active" onclick="switchNav(this,'page-list')">
|
||||
<i data-lucide="layout-dashboard" class="icon-sm"></i><span>模板列表</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="switchNav(this,'page-edit')">
|
||||
<i data-lucide="file-edit" class="icon-sm"></i><span>创建模板</span>
|
||||
</div>
|
||||
<div class="nav-item"><i data-lucide="folder-tree" class="icon-sm"></i><span>模板分类</span></div>
|
||||
<div class="nav-item"><i data-lucide="git-branch" class="icon-sm"></i><span>模板版本</span></div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">生成文档</div>
|
||||
<div class="nav-item"><i data-lucide="file-plus" class="icon-sm"></i><span>新建任务</span></div>
|
||||
<div class="nav-item"><i data-lucide="list" class="icon-sm"></i><span>任务列表</span></div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">历史记录</div>
|
||||
<div class="nav-item" onclick="switchNav(this,'page-history')"><i data-lucide="clock" class="icon-sm"></i><span>生成记录</span></div>
|
||||
<div class="nav-item"><i data-lucide="check-circle" class="icon-sm"></i><span>审核记录</span></div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统配置</div>
|
||||
<div class="nav-item" onclick="switchNav(this,'page-config')"><i data-lucide="settings" class="icon-sm"></i><span>提示词库</span></div>
|
||||
<div class="nav-item"><i data-lucide="database" class="icon-sm"></i><span>数据源管理</span></div>
|
||||
<div class="nav-item"><i data-lucide="cpu" class="icon-sm"></i><span>模型配置</span></div>
|
||||
<div class="nav-item"><i data-lucide="users" class="icon-sm"></i><span>用户管理</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-info">
|
||||
<div class="avatar">周</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-size:var(--fs-body);font-weight:var(--fw-medium)">周文涛</div><div style="font-size:var(--fs-xs);color:var(--text-3)">管理员</div></div>
|
||||
<i data-lucide="log-out" class="icon-sm" style="color:var(--text-3);cursor:pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ===== Main ===== -->
|
||||
<div class="main">
|
||||
|
||||
<!-- ========== PAGE: 模板列表 ========== -->
|
||||
<div class="page active" id="page-list">
|
||||
<div class="page-header">
|
||||
<div><h1>模板中心</h1><p>管理所有文档模板，上传、分类、标注</p></div>
|
||||
<button class="btn btn-p" onclick="switchNav(document.querySelector('.nav-item:nth-child(3)'),'page-edit')"><i data-lucide="upload" class="icon-sm"></i>上传模板</button>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="sc"><div class="v">8</div><div class="l">模板总数</div></div>
|
||||
<div class="sc"><div class="v">5</div><div class="l">已启用</div></div>
|
||||
<div class="sc"><div class="v">3</div><div class="l">本周使用</div></div>
|
||||
<div class="sc"><div class="v">12</div><div class="l">累计生成</div></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="sbar">
|
||||
<div class="swrap"><i data-lucide="search" class="icon-sm sicon"></i><input class="fi" placeholder="搜索模板名称..."></div>
|
||||
<select class="fs" style="width:auto"><option>全部分类</option><option>报告类</option><option>公文类</option><option>总结类</option><option>合同类</option></select>
|
||||
<select class="fs" style="width:auto"><option>全部状态</option><option>已启用</option><option>已停用</option></select>
|
||||
</div>
|
||||
<div class="tw">
|
||||
<table class="w">
|
||||
<thead class="w"><tr><th>模板名称</th><th>类型</th><th>版本</th><th>区域数</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
|
||||
<tbody class="w">
|
||||
<tr><td><a href="#" onclick="switchNav(document.querySelector('.nav-item:nth-child(3)'),'page-edit');return false" style="font-weight:var(--fw-medium);color:var(--primary)">季度经济活动分析报告</a></td><td><span class="tag tag-b">报告类</span></td><td>v1.2</td><td>8</td><td><span class="tag tag-g">已启用</span></td><td>2026-06-28</td><td class="ca"><button title="编辑" onclick="switchNav(document.querySelector('.nav-item:nth-child(3)'),'page-edit')"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" onclick="switchNav(document.querySelector('.nav-item:nth-child(3)'),'page-edit');return false" style="font-weight:var(--fw-medium);color:var(--primary)">工作总结报告模板</a></td><td><span class="tag tag-b">报告类</span></td><td>v1.0</td><td>6</td><td><span class="tag tag-g">已启用</span></td><td>2026-06-25</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">述职报告模板</a></td><td><span class="tag tag-b">报告类</span></td><td>v1.0</td><td>5</td><td><span class="tag tag-gr">已停用</span></td><td>2026-06-20</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">项目申报书</a></td><td><span class="tag tag-b">报告类</span></td><td>v2.1</td><td>10</td><td><span class="tag tag-g">已启用</span></td><td>2026-06-18</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">会议纪要模板</a></td><td><span class="tag tag-y">公文类</span></td><td>v1.0</td><td>4</td><td><span class="tag tag-g">已启用</span></td><td>2026-06-15</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">合同模板（技术服务）</a></td><td><span class="tag tag-g" style="background:#f0fdf4;color:#1a7e34">合同类</span></td><td>v1.0</td><td>12</td><td><span class="tag tag-g">已启用</span></td><td>2026-06-10</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">整改报告模板</a></td><td><span class="tag tag-b">报告类</span></td><td>v1.0</td><td>5</td><td><span class="tag tag-gr">已停用</span></td><td>2026-06-05</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td><a href="#" style="font-weight:var(--fw-medium);color:var(--primary)">人才培养方案</a></td><td><span class="tag tag-y">公文类</span></td><td>v1.0</td><td>7</td><td><span class="tag tag-g">已启用</span></td><td>2026-05-28</td><td class="ca"><button title="编辑"><i data-lucide="edit-3" class="icon-sm"></i></button><button title="复制"><i data-lucide="copy" class="icon-sm"></i></button><button title="下载"><i data-lucide="download" class="icon-sm"></i></button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pg"><span>共 8 条</span><div class="pg-btns"><button class="pg-btn" disabled><i data-lucide="chevron-left" class="icon-sm"></i></button><button class="pg-btn active">1</button><button class="pg-btn" disabled><i data-lucide="chevron-right" class="icon-sm"></i></button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== PAGE: 模板编辑（核心页面） ========== -->
|
||||
<div class="page" id="page-edit">
|
||||
<!-- toolbar -->
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<div class="breadcrumb"><span>模板中心</span><span style="color:var(--text)">季度经济活动分析报告</span></div>
|
||||
<span style="font-size:var(--fs-xs);color:var(--text-3);background:var(--bg-soft);padding:1px 7px;border-radius:8px;line-height:18px">v1.0.0</span>
|
||||
<span style="display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--success);margin-left:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--success)"></span>已保存</span>
|
||||
<div class="toolbar-divider"></div>
|
||||
<div class="view-btn active">阅读视图</div>
|
||||
<div class="view-btn">页面视图</div>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="zoom-ctl"><span onclick="zoomChange(-1)"><i data-lucide="minus" class="icon-sm"></i></span><span id="zoomLabel">100%</span><span onclick="zoomChange(1)"><i data-lucide="plus" class="icon-sm"></i></span></div>
|
||||
<div class="toolbar-divider"></div>
|
||||
<div class="page-nav"><button class="pn-btn" disabled><i data-lucide="chevron-left" class="icon-sm"></i></button><span>2 / 8</span><button class="pn-btn"><i data-lucide="chevron-right" class="icon-sm"></i></button></div>
|
||||
<div class="toolbar-divider"></div>
|
||||
<div class="toggle-group" onclick="toggleLabels()"><div class="tgl on" id="labelTgl"></div><span>显示区域标识</span></div>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="btn btn-ghost" style="padding:3px 8px;font-size:var(--fs-sm)"><i data-lucide="eye" class="icon-sm"></i>预览</button>
|
||||
<button class="btn btn-p" style="padding:3px 12px;font-size:var(--fs-sm)"><i data-lucide="save" class="icon-sm"></i>保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3-panel content -->
|
||||
<div class="content-area">
|
||||
<!-- Config Panel -->
|
||||
<div class="config-panel">
|
||||
<div class="config-tabs">
|
||||
<div class="config-tab active" onclick="switchCfg(this,'cfg1')">区域配置</div>
|
||||
<div class="config-tab" onclick="switchCfg(this,'cfg2')">提示词历史 <span class="cnt">3</span></div>
|
||||
</div>
|
||||
<div class="config-scroll">
|
||||
<!-- Tab: 区域配置 -->
|
||||
<div class="tab-c active" id="cfg1">
|
||||
<div class="sec">
|
||||
<div class="sec-title">基本信息</div>
|
||||
<div class="fg"><label class="fl">区域名称</label><input class="fi" value="一、主要经营指标完成情况（正文）" readonly style="background:var(--bg-soft);color:var(--text-2)"></div>
|
||||
<div class="fg"><label class="fl">区域类型</label><select class="fs"><option selected>AI 生成区域</option><option>人工填写区域</option><option>固定区域</option><option>表格生成区域</option></select></div>
|
||||
<div class="fg"><label class="fl">数据来源</label>
|
||||
<div class="tag-list">
|
||||
<span class="tag-chip">财务部 <span class="tc" onclick="this.parentElement.remove()">✕</span></span>
|
||||
<span class="tag-chip">运行部 <span class="tc" onclick="this.parentElement.remove()">✕</span></span>
|
||||
<span class="tag-chip">生技部 <span class="tc" onclick="this.parentElement.remove()">✕</span></span>
|
||||
<span class="tag-add" onclick="addSource(this)">+ 添加部门</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fg"><label class="fl">提示词</label>
|
||||
<textarea class="fta" id="promptText" oninput="updCount(this,'pc',1000)">请根据上传资料生成本章节内容，要求包括主要指标完成情况、同比变化、原因分析和存在风险。语言要求正式、客观、逻辑清晰，字数控制在600字以内。</textarea>
|
||||
<div class="cc"><span id="pc">73</span> / 1000</div>
|
||||
</div>
|
||||
<div class="fg"><label class="fl">输出格式</label><select class="fs"><option selected>正式报告段落</option><option>分条说明</option><option>表格数据</option><option>JSON 数据</option><option>标题文本</option></select></div>
|
||||
<div class="fg"><label class="fl">是否需要审核</label><div class="rg"><label class="ri"><input type="radio" name="review" checked> 是</label><label class="ri"><input type="radio" name="review"> 否</label></div></div>
|
||||
<div class="fg"><label class="fl">备注</label><textarea class="fta" style="min-height:50px" oninput="updCount(this,'nc',200)" placeholder="请输入备注信息（可选）"></textarea><div class="cc"><span id="nc">0</span> / 200</div></div>
|
||||
</div>
|
||||
<button class="btn btn-p btn-block"><i data-lucide="save" class="icon-sm"></i>保存该区域配置</button>
|
||||
</div>
|
||||
<!-- Tab: 提示词历史 -->
|
||||
<div class="tab-c" id="cfg2">
|
||||
<div class="sec">
|
||||
<div class="sec-title">版本历史</div>
|
||||
<div class="pv"><div class="pvn">v3</div><div><div class="pvc">请根据上传资料生成本章节内容，要求包括主要指标完成情况、同比变化、原因分析和存在风险。语言要求正式、客观、逻辑清晰。</div><div class="pvm">当前使用 · 周文涛 · 2026-06-28</div></div></div>
|
||||
<div class="pv" style="opacity:.7"><div class="pvn">v2</div><div><div class="pvc">请根据上传资料生成本章节内容，要求包括主要指标完成情况、同比变化和原因分析。</div><div class="pvm">2026-06-20 · 周文涛</div></div></div>
|
||||
<div class="pv" style="opacity:.5"><div class="pvn">v1</div><div><div class="pvc">请根据上传资料生成"主要经营指标完成情况"章节内容。</div><div class="pvm">2026-06-15 · 初始版本</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Word Preview -->
|
||||
<div class="doc-preview" id="preview">
|
||||
<div class="doc-page" id="docPage" style="transform:scale(1);transform-origin:top center">
|
||||
<div class="doc-title">2025年第一季度经济活动分析报告</div>
|
||||
<div class="doc-subtitle">某某集团有限公司</div>
|
||||
|
||||
<div class="rblock active" onclick="selectBlock(this,'block_001')">
|
||||
<span class="rm on" id="lm_block_001">block_001 · AI</span>
|
||||
<div class="doc-h2">一、主要经营指标完成情况 <span class="doc-tag blue">AI 区域</span></div>
|
||||
</div>
|
||||
|
||||
<div class="rblock" onclick="selectBlock(this,'block_002')">
|
||||
<span class="rm" id="lm_block_002">block_002 · AI</span>
|
||||
<p class="doc-p">本季度公司经营整体保持平稳，各项主要经营指标完成情况良好。营业收入完成<span style="font-weight:var(--fw-medium)">12.35亿元</span>，同比上升<span style="color:var(--success);font-weight:var(--fw-medium)">8.7%</span>；利润总额完成<span style="font-weight:var(--fw-medium)">1.25亿元</span>，同比上升<span style="color:var(--success);font-weight:var(--fw-medium)">5.3%</span>；净利润完成<span style="font-weight:var(--fw-medium)">1.02亿元</span>，同比上升<span style="color:var(--success);font-weight:var(--fw-medium)">4.8%</span>。主要原因是电量增长、成本控制有效以及市场销售情况改善。部分指标虽然完成目标，但也存在一定风险和压力，需要在下一步工作中持续关注和改进。</p>
|
||||
</div>
|
||||
|
||||
<div class="rblock" onclick="selectBlock(this,'block_003')">
|
||||
<span class="rm" id="lm_block_003">block_003 · 表格</span>
|
||||
<div class="doc-h2" style="margin-top:20px">二、主要经营指标完成情况表 <span class="doc-tag green">表格区域</span></div>
|
||||
<table class="doc-table">
|
||||
<thead><tr><th>指标名称</th><th>本期完成值</th><th>同比增减</th><th>完成率</th><th>责任部门</th><th>原因分析</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>营业收入（亿元）</td><td>12.35</td><td style="color:var(--success)">+8.7%</td><td>102.3%</td><td>营销部</td><td>市场需求增长</td></tr>
|
||||
<tr><td>利润总额（亿元）</td><td>1.25</td><td style="color:var(--success)">+5.3%</td><td>100.8%</td><td>财务部</td><td>成本控制有效</td></tr>
|
||||
<tr><td>净利润（亿元）</td><td>1.02</td><td style="color:var(--success)">+4.8%</td><td>100.5%</td><td>财务部</td><td>综合因素影响</td></tr>
|
||||
<tr><td>发电量（亿度）</td><td>45.67</td><td style="color:var(--success)">+6.2%</td><td>101.2%</td><td>运行部</td><td>设备运行稳定</td></tr>
|
||||
<tr><td>供电煤耗（克/度）</td><td>301.5</td><td style="color:var(--danger)">-1.2%</td><td>99.5%</td><td>生技部</td><td>机组负荷率偏低</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="rblock" onclick="selectBlock(this,'block_004')" style="margin-top:20px">
|
||||
<span class="rm" id="lm_block_004">block_004 · AI</span>
|
||||
<div class="doc-h2">三、存在的主要问题 <span class="doc-tag blue">AI 区域</span></div>
|
||||
<div class="doc-li">1. 部分指标完成质量不高，存在一定的虚增因素；</div>
|
||||
<div class="doc-li">2. 成本控制压力仍然较大，燃料成本同比上升明显；</div>
|
||||
<div class="doc-li">3. 设备老化问题突出，非计划停运次数较去年同期增加2次；</div>
|
||||
<div class="doc-li">4. 安全风险管控仍需加强，现场违章作业问题时有发生。</div>
|
||||
</div>
|
||||
|
||||
<div class="rblock" onclick="selectBlock(this,'block_005')" style="margin-top:12px">
|
||||
<span class="rm" id="lm_block_005">block_005 · AI</span>
|
||||
<div class="doc-h2">四、下一步工作措施 <span class="doc-tag blue">AI 区域</span></div>
|
||||
<p class="doc-p">下一步，公司将重点做好以下工作：一是加强成本管控，深入推进降本增效专项行动，确保完成年度利润目标；二是强化设备管理，加大设备检修维护力度，提高设备可靠性；三是严格落实安全生产责任制，深入开展安全隐患排查治理，坚决杜绝较大及以上安全事故。</p>
|
||||
</div>
|
||||
|
||||
<div class="rblock" onclick="selectBlock(this,'block_006')" style="margin-top:12px">
|
||||
<span class="rm" id="lm_block_006">block_006 · 变量</span>
|
||||
<div style="display:flex;gap:var(--sp5);font-size:13px;color:var(--text-2);margin:12px 0;padding:12px;background:var(--bg-soft);border-radius:6px"><span>报告单位：某某集团有限公司</span><span>报告日期：2025年4月15日</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tree Panel -->
|
||||
<div class="tree-panel">
|
||||
<div class="tree-header"><span>文档结构</span><span class="cnt">8 个区域</span></div>
|
||||
<div style="padding:var(--sp2) var(--sp3)"><div class="swrap"><i data-lucide="search" class="icon-sm sicon"></i><input class="fi" placeholder="搜索章节..." style="padding-left:30px;padding-top:5px;padding-bottom:5px;font-size:var(--fs-sm)"></div></div>
|
||||
<div class="tree-scroll">
|
||||
<ul class="tree">
|
||||
<li>
|
||||
<div class="tn active"><span class="tt exp" onclick="toggleSub(this)"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📄</span><span class="tl">全文</span><span class="sdot g"></span></div>
|
||||
<ul class="tc2">
|
||||
<li><div class="tn"><span class="tt exp" onclick="toggleSub(this)"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📄</span><span class="tl">封面信息</span><span class="sdot y"></span></div></li>
|
||||
<li>
|
||||
<div class="tn active" onclick="selectTreeItem(this,'block_001')"><span class="tt exp" onclick="toggleSub(this)"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📄</span><span class="tl">一、经营指标完成情况</span><span class="sdot g"></span></div>
|
||||
<ul class="tc2">
|
||||
<li><div class="tn" onclick="selectTreeItem(this,'block_002')"><span class="tt" style="visibility:hidden"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📝</span><span class="tl">正文</span><span class="sdot g"></span></div></li>
|
||||
<li><div class="tn" onclick="selectTreeItem(this,'block_003')"><span class="tt" style="visibility:hidden"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📊</span><span class="tl">指标完成情况表</span><span class="sdot g"></span></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div class="tn" onclick="selectTreeItem(this,'block_004')"><span class="tt" style="visibility:hidden"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📄</span><span class="tl">三、存在的主要问题</span><span class="sdot g"></span></div></li>
|
||||
<li><div class="tn" onclick="selectTreeItem(this,'block_005')"><span class="tt" style="visibility:hidden"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">📄</span><span class="tl">四、下一步工作措施</span><span class="sdot g"></span></div></li>
|
||||
<li><div class="tn"><span class="tt" style="visibility:hidden"><i data-lucide="chevron-right" class="icon-sm"></i></span><span class="ti">🔒</span><span class="tl">页脚</span><span class="sdot n"></span></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== PAGE: 历史记录 ========== -->
|
||||
<div class="page" id="page-history">
|
||||
<div class="page-header"><div><h1>历史记录</h1><p>所有文档生成任务的记录与审核</p></div></div>
|
||||
<div class="card">
|
||||
<div class="sbar">
|
||||
<div class="swrap"><i data-lucide="search" class="icon-sm sicon"></i><input class="fi" placeholder="搜索任务名称..."></div>
|
||||
<select class="fs" style="width:auto"><option>全部状态</option><option>已完成</option><option>处理中</option><option>待审核</option><option>已驳回</option><option>失败</option></select>
|
||||
<select class="fs" style="width:auto"><option>近 7 天</option><option>近 30 天</option><option>全部</option></select>
|
||||
</div>
|
||||
<div class="tw">
|
||||
<table class="w">
|
||||
<thead class="w"><tr><th>任务名称</th><th>使用模板</th><th>资料数</th><th>生成时间</th><th>状态</th><th>审核</th><th>操作</th></tr></thead>
|
||||
<tbody class="w">
|
||||
<tr><td style="font-weight:var(--fw-medium)">2026Q2 经济活动分析报告</td><td>季度经济活动分析报告</td><td>4</td><td>2026-06-30 14:23</td><td><span class="tag tag-g">已完成</span></td><td><span class="tag tag-y">待审核</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="下载 Word"><i data-lucide="file-text" class="icon-sm"></i></button><button title="下载 PDF"><i data-lucide="file" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">上半年工作总结</td><td>工作总结报告模板</td><td>3</td><td>2026-06-28 09:15</td><td><span class="tag tag-g">已完成</span></td><td><span class="tag tag-g">已通过</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="下载 Word"><i data-lucide="file-text" class="icon-sm"></i></button><button title="下载 PDF"><i data-lucide="file" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">项目申报书（智慧港口）</td><td>项目申报书</td><td>6</td><td>2026-06-25 16:40</td><td><span class="tag tag-g">已完成</span></td><td><span class="tag tag-g">已通过</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="下载 Word"><i data-lucide="file-text" class="icon-sm"></i></button><button title="下载 PDF"><i data-lucide="file" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">5月安全生产整改报告</td><td>整改报告模板</td><td>2</td><td>2026-06-20 11:00</td><td><span class="tag tag-r">失败</span></td><td><span class="tag tag-gr">—</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="重试"><i data-lucide="refresh-cw" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">Q2 会议纪要（月度）</td><td>会议纪要模板</td><td>1</td><td>2026-06-18 08:30</td><td><span class="tag tag-g">已完成</span></td><td><span class="tag tag-r">已驳回</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="下载 Word"><i data-lucide="file-text" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">2026Q1 经济活动分析报告</td><td>季度经济活动分析报告</td><td>4</td><td>2026-04-05 10:00</td><td><span class="tag tag-g">已完成</span></td><td><span class="tag tag-g">已通过</span></td><td class="ca"><button title="查看"><i data-lucide="eye" class="icon-sm"></i></button><button title="下载 Word"><i data-lucide="file-text" class="icon-sm"></i></button><button title="下载 PDF"><i data-lucide="file" class="icon-sm"></i></button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pg"><span>共 6 条</span><div class="pg-btns"><button class="pg-btn" disabled><i data-lucide="chevron-left" class="icon-sm"></i></button><button class="pg-btn active">1</button><button class="pg-btn" disabled><i data-lucide="chevron-right" class="icon-sm"></i></button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== PAGE: 系统配置 ========== -->
|
||||
<div class="page" id="page-config">
|
||||
<div class="page-header"><div><h1>提示词库</h1><p>管理公共提示词模板</p></div></div>
|
||||
<div class="card">
|
||||
<div class="cfg-tabs">
|
||||
<div class="cfg-tab active" onclick="switchCfgTab(this,'c1')">提示词模板</div>
|
||||
<div class="cfg-tab" onclick="switchCfgTab(this,'c2')">默认提示词</div>
|
||||
</div>
|
||||
<div class="cfg-c active" id="c1">
|
||||
<div class="sbar">
|
||||
<div class="swrap"><i data-lucide="search" class="icon-sm sicon"></i><input class="fi" placeholder="搜索提示词模板..."></div>
|
||||
<button class="btn btn-p" style="padding:5px 12px;font-size:var(--fs-sm)"><i data-lucide="plus" class="icon-sm"></i>新建模板</button>
|
||||
</div>
|
||||
<div class="tw">
|
||||
<table class="w">
|
||||
<thead class="w"><tr><th>模板名称</th><th>适用场景</th><th>字数</th><th>版本</th><th>更新时间</th><th>操作</th></tr></thead>
|
||||
<tbody class="w">
|
||||
<tr><td style="font-weight:var(--fw-medium)">经济活动分析报告 · 总提示词</td><td>季度/年度经济分析</td><td>186</td><td>v3</td><td>2026-06-28</td><td class="ca"><button><i data-lucide="edit-3" class="icon-sm"></i></button><button><i data-lucide="copy" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">工作总结 · 章节生成</td><td>工作总结各章节</td><td>152</td><td>v2</td><td>2026-06-25</td><td class="ca"><button><i data-lucide="edit-3" class="icon-sm"></i></button><button><i data-lucide="copy" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">会议纪要 · 要点提取</td><td>会议记录摘要</td><td>98</td><td>v1</td><td>2026-06-20</td><td class="ca"><button><i data-lucide="edit-3" class="icon-sm"></i></button><button><i data-lucide="copy" class="icon-sm"></i></button></td></tr>
|
||||
<tr><td style="font-weight:var(--fw-medium)">数据提取 · 表格填充</td><td>从资料提取数据填表</td><td>210</td><td>v1</td><td>2026-06-15</td><td class="ca"><button><i data-lucide="edit-3" class="icon-sm"></i></button><button><i data-lucide="copy" class="icon-sm"></i></button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cfg-c" id="c2">
|
||||
<div class="fg"><label class="fl">默认模板总提示词</label><textarea class="fta" style="min-height:100px">你是专业文稿撰写人员，请根据上传资料生成正式、规范、客观的报告内容。语言要求符合单位内部公文风格。不得编造数据，资料中没有的数据统一标记为"待补充"。</textarea></div>
|
||||
<div class="fg"><label class="fl">默认审核提示词</label><textarea class="fta" style="min-height:80px">请检查上述生成内容是否存在以下问题：1. 数据缺失未标记；2. 前后矛盾；3. 逻辑不通顺；4. 存在编造数据嫌疑。</textarea></div>
|
||||
<button class="btn btn-p">保存默认配置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// === 页面切换 ===
|
||||
function switchNav(el, pageId) {
|
||||
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'))
|
||||
document.getElementById(pageId).classList.add('active')
|
||||
document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'))
|
||||
if(el) el.classList.add('active')
|
||||
}
|
||||
|
||||
// === 缩放 ===
|
||||
let zoom = 1
|
||||
function zoomChange(dir) {
|
||||
zoom = Math.max(0.7, Math.min(1.5, zoom + dir * 0.3))
|
||||
document.getElementById('docPage').style.transform = `scale(${zoom})`
|
||||
document.getElementById('zoomLabel').textContent = Math.round(zoom*100)+'%'
|
||||
}
|
||||
|
||||
// === 区域标识切换 ===
|
||||
let labelsOn = true
|
||||
function toggleLabels() {
|
||||
labelsOn = !labelsOn
|
||||
document.getElementById('labelTgl').classList.toggle('on')
|
||||
document.querySelectorAll('.rm').forEach(m=>m.classList.toggle('on'))
|
||||
}
|
||||
|
||||
// === 选中 block ===
|
||||
function selectBlock(el, blockId) {
|
||||
document.querySelectorAll('.rblock').forEach(b=>b.classList.remove('active'))
|
||||
el.classList.add('active')
|
||||
// 树节点高亮
|
||||
document.querySelectorAll('.tn').forEach(n=>n.classList.remove('active'))
|
||||
document.querySelectorAll('.tn').forEach(n=>{
|
||||
if(n.textContent.includes(blockId) || n.getAttribute('onclick')?.includes(blockId)) n.classList.add('active')
|
||||
})
|
||||
}
|
||||
|
||||
// === 树节点点击 ===
|
||||
function selectTreeItem(el, blockId) {
|
||||
document.querySelectorAll('.tn').forEach(n=>n.classList.remove('active'))
|
||||
el.classList.add('active')
|
||||
const target = document.querySelector(`.rblock[onclick*="${blockId}"]`)
|
||||
if(target) {
|
||||
target.scrollIntoView({behavior:'smooth',block:'center'})
|
||||
selectBlock(target, blockId)
|
||||
}
|
||||
}
|
||||
|
||||
// === 树展开收起 ===
|
||||
function toggleSub(el) {
|
||||
el.classList.toggle('exp')
|
||||
const next = el.closest('li')?.querySelector('.tc2')
|
||||
if(next) next.classList.toggle('hide')
|
||||
}
|
||||
|
||||
// === 配置 tab ===
|
||||
function switchCfg(el, id) {
|
||||
document.querySelectorAll('.config-tab').forEach(t=>t.classList.remove('active'))
|
||||
document.querySelectorAll('.tab-c').forEach(c=>c.classList.remove('active'))
|
||||
el.classList.add('active')
|
||||
document.getElementById(id).classList.add('active')
|
||||
}
|
||||
|
||||
// === 系统配置 tab ===
|
||||
function switchCfgTab(el, id) {
|
||||
document.querySelectorAll('.cfg-tab').forEach(t=>t.classList.remove('active'))
|
||||
document.querySelectorAll('.cfg-c').forEach(c=>c.classList.remove('active'))
|
||||
el.classList.add('active')
|
||||
document.getElementById(id).classList.add('active')
|
||||
}
|
||||
|
||||
// === 字数统计 ===
|
||||
function updCount(ta, id, max) {
|
||||
const len = ta.value.length
|
||||
const span = document.getElementById(id)
|
||||
span.textContent = len
|
||||
span.style.color = len > max ? 'var(--danger)' : len > max*0.85 ? 'var(--warn)' : 'var(--text-3)'
|
||||
}
|
||||
|
||||
// === 添加数据来源 ===
|
||||
function addSource(el) {
|
||||
const depts = ['安全监察部','综合管理部','营销部','燃煤供应部']
|
||||
const existing = Array.from(document.querySelectorAll('.tag-chip')).map(t=>t.textContent.trim().replace('✕','').trim())
|
||||
const avail = depts.filter(d=>!existing.includes(d))
|
||||
if(!avail.length) return
|
||||
const chip = document.createElement('span')
|
||||
chip.className = 'tag-chip'
|
||||
chip.innerHTML = avail[0] + ' <span class="tc" onclick="this.parentElement.remove()">✕</span>'
|
||||
el.parentElement.insertBefore(chip, el)
|
||||
}
|
||||
|
||||
lucide.createIcons()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user