feat(小组件内置化): 面板三分支渲染 + 三个内置组件 + 自定义片段 srcdoc + 玻璃层对比度
build / build (push) Successful in 42s

- components/widgets:widgetRegistry(defineAsyncComponent 按需加载)+ EvaluateWidget/SyllabusWidget/WeekplanWidget,props widgetId、emit loaded、内部自行取数、ResizeObserver 自报真实高度;呈现只保留语义不逐像素复刻旧 html
- views/index.vue:iframe 单分支改三分支(内置组件 / compType=2 走 :srcdoc + sandbox="allow-scripts allow-same-origin allow-forms"(不给 allow-top-navigation)/ 兜底「该小工具暂不可用」不白屏);:src="item.url" 与候选池 url 依赖删除;postMessage 身份下发只服务片段分支,高度统一收口 find.height
- utils/widgetFragment.ts:wrapFragment 两段注入——取数桥在 head(早于片段自身脚本,否则 yhWidget undefined)、高度上报在 body 之后;</script> 拆拼防提前闭合门户脚本;节流用 setTimeout 尾沿 + 300/1200ms 兜底(iframe 隐藏期子文档不出动画帧,rAF 会把上报永久吞掉、帧高卡 min-height 撑出内层滚动);桥 URL 走 serviceHost 且自行解平台信封 data
- views/Settings.vue:新增 admin pane「widget」(ADMIN_PANES/ALL_PANES/「系统」组导航项/v-else-if 链分支),普通用户导航隐藏且 URL 直达落 no-perm 黄条
- views/widget/WidgetManage.vue:双卡管理页(内置/自定义分组列表 + 名称/键/类型/data_code/排序/启用/sch_id 表单 + CodeMirror + 上传 .html 走 FileReader 填编辑器,不落地文件不产生 URL;内置条目 content 只读)
- _widget.scss:--wg-* 六令牌 + 深玻璃 blur(18px) saturate(140%) + 描边 + 投影;拖拽态加深 blur(22px) 不再翻白;空态与 +/− 前景改走 token(配套 widget-add/sub/empty.svg 由硬编码色改 currentColor,widget-empty 原为内嵌 PNG 无法着色故换线性版);.widget-item 浅底深字保持不动
- UserSettingApi.ts:getWidgetData / getWidgetContent / GetWidgetCatalogList / SaveWidgetCatalog
- 另含 src/store/index.ts 的 getWidgetAppIds 未配置态 .reverse()(非本会话所写,按用户确认一并提交:与 getWidgetAppList 降序比较器对齐,使未配置态按 widget_catalog.sort 正序渲染)
This commit is contained in:
chenxing
2026-10-11 08:50:49 +08:00
parent be0dac6bfa
commit f5faa29018
15 changed files with 1150 additions and 39 deletions
+2 -2
View File
@@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0303 5L12.012 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.0303 5L12.012 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 315 B

After

Width:  |  Height:  |  Size: 329 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 350 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 203 B

After

Width:  |  Height:  |  Size: 210 B

+38 -6
View File
@@ -1,12 +1,26 @@
.widget-wrap {
// 玻璃层令牌(方案 §6.2):深底 + 模糊 + 描边 + 投影,前景走 token,不再随壁纸漂移
--wg-glass-bg: rgba(15, 23, 42, 0.42);
--wg-glass-border: rgba(255, 255, 255, 0.18);
--wg-glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
--wg-fg: rgba(255, 255, 255, 0.94);
--wg-fg-dim: rgba(255, 255, 255, 0.66);
--wg-fg-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
width: 380px;
min-height: 200px;
z-index: 100;
border-radius: 5px;
background: rgba(0, 0, 0, 0.35);
background: var(--wg-glass-bg);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid var(--wg-glass-border);
box-shadow: var(--wg-glass-shadow);
.widget-header {
display: flex;
height: 48px;
color: var(--wg-fg-dim);
text-shadow: var(--wg-fg-shadow);
.widget-header-drag {
flex: 2 auto;
cursor: move;
@@ -18,6 +32,10 @@
cursor: pointer;
width: 24px;
flex-shrink: 1;
color: var(--wg-fg-dim);
}
&:hover svg {
color: var(--wg-fg);
}
}
.operate-btn:nth-child(2) {
@@ -36,6 +54,14 @@
&:first-child {
margin-top: 0;
}
.no-data {
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
color: #b9c2cc;
font-size: 13px;
}
}
.widget-app-header {
@@ -59,11 +85,12 @@
}
}
// 拖拽态加深 + 加强模糊(旧版翻白 → 浅灰图标压浅白,是这轮修掉的反向翻车)
&__drag {
.widget-header {
background: rgba(255, 255, 255, 0.5);
}
background: rgba(255, 255, 255, 0.6);
background: rgba(15, 23, 42, 0.56);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
}
}
@@ -73,7 +100,12 @@
align-items: center;
justify-content: center;
flex-direction: column;
color: #828c96;
color: var(--wg-fg);
text-shadow: var(--wg-fg-shadow);
svg {
color: var(--wg-fg-dim);
}
h4 {
font-weight: 500;