249 lines
8.9 KiB
HTML
249 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>AppTabs 静态预览（调试用，验证完删除）</title>
|
|
<style>
|
|
:root {
|
|
--fms-surface: #ffffff;
|
|
--fms-border: #dfe5ec;
|
|
--fms-text: #1f2329;
|
|
--fms-text-secondary: #6f7784;
|
|
--fms-primary: #0f172b;
|
|
--fms-primary-soft: color-mix(in srgb, #0f172b 12%, transparent);
|
|
--fms-secondary-hover: #f1f5f9;
|
|
}
|
|
/* 字体栈对齐应用真实栈（src/styles/index.css），否则预览不出字形墨迹的 1px 偏移 */
|
|
body { margin: 0; background: #f1f3f6; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
|
|
|
.fms-tabs {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: 38px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: var(--fms-surface);
|
|
border-bottom: 1px solid var(--fms-border);
|
|
}
|
|
.fms-tabs-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: 0 8px;
|
|
color: var(--fms-text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.fms-tabs-arrow svg { width: 16px; height: 16px; }
|
|
.fms-tabs-arrow--left { border-right: 1px solid var(--fms-border); }
|
|
.fms-tabs-arrow--right { border-left: 1px solid var(--fms-border); }
|
|
|
|
.fms-tabs-tools { display: flex; align-items: stretch; flex-shrink: 0; }
|
|
.fms-tabs-tool {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
padding: 0 8px;
|
|
border-left: 1px solid var(--fms-border);
|
|
color: var(--fms-text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.fms-tabs-tool svg { width: 16px; height: 16px; }
|
|
.fms-tabs-tool:hover { background: var(--fms-secondary-hover); color: var(--fms-text); }
|
|
|
|
.fms-tabs-track {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
padding-top: 3px;
|
|
overflow: hidden;
|
|
}
|
|
.fms-tabs-track::after { content: ''; flex: none; width: 24px; }
|
|
|
|
.fms-tab-item {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
margin-right: -12px;
|
|
}
|
|
.fms-tab {
|
|
position: relative;
|
|
z-index: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.fms-tab.is-active { z-index: 2; }
|
|
|
|
.fms-tab__inner {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 4px;
|
|
}
|
|
.fms-tab__divider {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 7px;
|
|
z-index: 1;
|
|
width: 1px;
|
|
height: 16px;
|
|
transform: translateY(-50%);
|
|
background: var(--fms-border);
|
|
}
|
|
.fms-tab__background {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
padding: 0 6px;
|
|
}
|
|
.fms-tab__background-content {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 7px 7px 0 0;
|
|
}
|
|
.fms-tab__corner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 7px;
|
|
height: 7px;
|
|
fill: transparent;
|
|
}
|
|
.fms-tab__corner--left { left: -1px; }
|
|
.fms-tab__corner--right { right: -1px; }
|
|
|
|
.fms-tab__extra {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.fms-tab__close {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
color: color-mix(in srgb, var(--fms-text) 80%, transparent);
|
|
}
|
|
.fms-tab__close svg { width: 12px; height: 12px; }
|
|
|
|
.fms-tab__main {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin: 0 14px;
|
|
padding: 0 16px 0 8px;
|
|
overflow: hidden;
|
|
border-radius: 5px 5px 0 0;
|
|
color: var(--fms-text);
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
.fms-tab.is-unclosable .fms-tab__main { padding: 0 8px; }
|
|
.fms-tab__label { flex: 1; overflow: hidden; white-space: nowrap; transform: translateY(-1px); }
|
|
|
|
.fms-tab.is-active .fms-tab__background-content { background: var(--fms-primary-soft); }
|
|
.fms-tab.is-active .fms-tab__corner { fill: var(--fms-primary-soft); }
|
|
.fms-tab.is-active .fms-tab__main { color: var(--fms-primary); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="fms-tabs">
|
|
<span class="fms-tabs-arrow fms-tabs-arrow--left" aria-label="向左滚动页签">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
|
|
</span>
|
|
|
|
<div class="fms-tabs-track" role="tablist">
|
|
<div class="fms-tab-item is-active">
|
|
<button type="button" role="tab" class="fms-tab is-active is-unclosable" aria-selected="true">
|
|
<span class="fms-tab__inner">
|
|
<span class="fms-tab__background">
|
|
<span class="fms-tab__background-content"></span>
|
|
<svg class="fms-tab__corner fms-tab__corner--left" height="7" width="7" aria-hidden="true"><path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" /></svg>
|
|
<svg class="fms-tab__corner fms-tab__corner--right" height="7" width="7" aria-hidden="true"><path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" /></svg>
|
|
</span>
|
|
<span class="fms-tab__main"><span class="fms-tab__label">工作台</span></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="fms-tab-item">
|
|
<button type="button" role="tab" class="fms-tab" aria-selected="false">
|
|
<span class="fms-tab__inner">
|
|
<span class="fms-tab__divider"></span>
|
|
<span class="fms-tab__background">
|
|
<span class="fms-tab__background-content"></span>
|
|
<svg class="fms-tab__corner fms-tab__corner--left" height="7" width="7" aria-hidden="true"><path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" /></svg>
|
|
<svg class="fms-tab__corner fms-tab__corner--right" height="7" width="7" aria-hidden="true"><path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" /></svg>
|
|
</span>
|
|
<span class="fms-tab__extra">
|
|
<span class="fms-tab__close" aria-label="关闭页签">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="fms-tab__main"><span class="fms-tab__label">联系人</span></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="fms-tab-item">
|
|
<button type="button" role="tab" class="fms-tab" aria-selected="false">
|
|
<span class="fms-tab__inner">
|
|
<span class="fms-tab__divider"></span>
|
|
<span class="fms-tab__background">
|
|
<span class="fms-tab__background-content"></span>
|
|
<svg class="fms-tab__corner fms-tab__corner--left" height="7" width="7" aria-hidden="true"><path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" /></svg>
|
|
<svg class="fms-tab__corner fms-tab__corner--right" height="7" width="7" aria-hidden="true"><path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" /></svg>
|
|
</span>
|
|
<span class="fms-tab__extra">
|
|
<span class="fms-tab__close" aria-label="关闭页签">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="fms-tab__main"><span class="fms-tab__label">订单管理</span></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="fms-tabs-arrow fms-tabs-arrow--right" aria-label="向右滚动页签">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
|
|
</span>
|
|
|
|
<div class="fms-tabs-tools">
|
|
<span class="fms-tabs-tool" title="页签操作">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
|
|
</span>
|
|
<span class="fms-tabs-tool" title="刷新当前页">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
|
|
</span>
|
|
<span class="fms-tabs-tool" title="内容最大化">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|