This commit is contained in:
yuxuanhui
@@ -0,0 +1,190 @@
|
||||
.alpha-views-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
background: var(--semi-color-fill-0);
|
||||
border-bottom: 1px solid var(--semi-color-border);
|
||||
}
|
||||
.alpha-view-tabs {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.alpha-view-tabs > .semi-tabs-content {
|
||||
display: none;
|
||||
}
|
||||
.alpha-view-tabs .semi-tabs-bar {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.alpha-view-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 24px;
|
||||
}
|
||||
.alpha-view-name {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.alpha-view-modified {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--semi-color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.alpha-add-view {
|
||||
flex-shrink: 0;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.alpha-toolbar {
|
||||
gap: 8px 16px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--semi-color-border);
|
||||
}
|
||||
.alpha-view-tools,
|
||||
.alpha-table-actions {
|
||||
gap: 4px;
|
||||
}
|
||||
.alpha-table-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
.alpha-filter-count {
|
||||
margin-left: 6px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.alpha-selection-actions {
|
||||
padding: 8px 12px;
|
||||
flex-shrink: 0;
|
||||
background: var(--semi-color-primary-light-default);
|
||||
border-bottom: 1px solid var(--semi-color-border);
|
||||
}
|
||||
.alpha-selection-actions .selection-text {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.alpha-filter-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(640px, calc(100vw - 32px));
|
||||
max-height: min(700px, calc(100dvh - 180px));
|
||||
color: var(--semi-color-text-0);
|
||||
}
|
||||
.alpha-filter-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 20px 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.alpha-filter-header p {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.alpha-filter-body {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
.alpha-filter-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.alpha-filter-fields > label {
|
||||
margin: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
.alpha-filter-fields .semi-select {
|
||||
width: 100%;
|
||||
}
|
||||
.alpha-filter-search {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.alpha-filter-panel .advanced-filters {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.alpha-filter-panel .advanced-filters > summary {
|
||||
font-size: 13px;
|
||||
color: var(--semi-color-text-1);
|
||||
}
|
||||
.alpha-filter-panel .advanced-filters .alpha-filter-fields {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.alpha-filter-panel .range-inputs {
|
||||
min-width: 0;
|
||||
}
|
||||
.alpha-filter-panel .range-inputs .semi-input-wrapper {
|
||||
min-width: 0;
|
||||
}
|
||||
.alpha-filter-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--semi-color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.alpha-filter-footer > :first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
.alpha-sort-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 96px;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
width: min(360px, calc(100vw - 32px));
|
||||
}
|
||||
.alpha-sort-panel > h2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.alpha-sort-panel .semi-select {
|
||||
width: 100%;
|
||||
}
|
||||
.alpha-table-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px 16px;
|
||||
}
|
||||
.alpha-table-meta .alpha-last-sync {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.alpha-table-meta .count-pill {
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.alpha-toolbar {
|
||||
padding: 8px;
|
||||
}
|
||||
.alpha-table-actions {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alpha-view-name {
|
||||
max-width: 120px;
|
||||
}
|
||||
.alpha-add-view {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.alpha-table-meta .alpha-last-sync {
|
||||
display: none;
|
||||
}
|
||||
.alpha-filter-header {
|
||||
padding: 16px;
|
||||
}
|
||||
.alpha-filter-body {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
.alpha-filter-fields {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.alpha-filter-fields {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
+454
-339
@@ -11,12 +11,22 @@ import {
|
||||
Pagination,
|
||||
Select,
|
||||
Table,
|
||||
Tabs,
|
||||
Tag,
|
||||
TextArea,
|
||||
Toast,
|
||||
Typography,
|
||||
} from "@douyinfe/semi-ui-19";
|
||||
import {
|
||||
IconFilter,
|
||||
IconSetting,
|
||||
IconSort,
|
||||
IconSearch,
|
||||
IconClose,
|
||||
IconDownload,
|
||||
IconUpload,
|
||||
IconRefresh,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import "./AlphaPage.css";
|
||||
import type { ColumnProps } from "@douyinfe/semi-ui-19/lib/es/table/interface";
|
||||
import {
|
||||
api,
|
||||
@@ -144,6 +154,8 @@ export function AlphaPage({
|
||||
const [facets, setFacets] = useState<Facets>({});
|
||||
const [draft, setDraft] = useState<Record<string, string>>({});
|
||||
const [filters, setFilters] = useState<Record<string, string>>({});
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
const [selectedViewId, setSelectedViewId] = useState<string | null>(null);
|
||||
const [submission, setSubmission] = useState<Submission>("UNSUBMITTED");
|
||||
const [syncingScope, setSyncingScope] = useState<Submission | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -238,6 +250,8 @@ export function AlphaPage({
|
||||
setDetailId(action.alpha_id);
|
||||
onOverlay();
|
||||
} else {
|
||||
setSelectedViewId(null);
|
||||
setFilterOpen(false);
|
||||
const {
|
||||
sort: nextSort,
|
||||
direction: nextDirection,
|
||||
@@ -296,15 +310,20 @@ export function AlphaPage({
|
||||
}));
|
||||
}
|
||||
function applyFilters() {
|
||||
setFilterOpen(false);
|
||||
setFilters({ ...draft });
|
||||
setPage(1);
|
||||
}
|
||||
function clearFilters() {
|
||||
setFilterOpen(false);
|
||||
setDraft({});
|
||||
setFilters({});
|
||||
setPage(1);
|
||||
}
|
||||
function changeSubmission(value: string) {
|
||||
setSelectedViewId(null);
|
||||
setFilterOpen(false);
|
||||
setDirection("desc");
|
||||
setSubmission(value as Submission);
|
||||
setDraft({});
|
||||
setFilters({});
|
||||
@@ -610,6 +629,233 @@ export function AlphaPage({
|
||||
const connected =
|
||||
account?.connection_status === "connected" ||
|
||||
account?.connection_status === "expired";
|
||||
const filterPanel = (
|
||||
<form
|
||||
className="alpha-filter-panel"
|
||||
aria-label="Alpha 筛选条件"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
applyFilters();
|
||||
}}
|
||||
>
|
||||
<header className="alpha-filter-header">
|
||||
<div>
|
||||
<h2>筛选 Alpha</h2>
|
||||
<p className="muted">设置搜索和筛选条件，查询后应用到当前视图。</p>
|
||||
</div>
|
||||
<Button
|
||||
icon={<IconClose aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
aria-label="关闭筛选"
|
||||
onClick={() => setFilterOpen(false)}
|
||||
/>
|
||||
</header>
|
||||
<div className="alpha-filter-body">
|
||||
<div className="alpha-filter-fields">
|
||||
<label className="alpha-filter-search">
|
||||
搜索
|
||||
<Input
|
||||
prefix={<IconSearch aria-hidden="true" />}
|
||||
aria-label="搜索 Alpha"
|
||||
placeholder="搜索 ID、名称或表达式"
|
||||
value={draft.q ?? ""}
|
||||
onChange={(v) => updateDraft("q", v)}
|
||||
showClear
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
地区
|
||||
<Select
|
||||
aria-label="地区"
|
||||
placeholder="全部地区"
|
||||
showClear
|
||||
value={draft.region || undefined}
|
||||
optionList={options("region")}
|
||||
onChange={(v) => updateDraft("region", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
平台状态
|
||||
<Select
|
||||
aria-label="平台状态"
|
||||
placeholder="全部平台状态"
|
||||
showClear
|
||||
value={draft.status || undefined}
|
||||
optionList={options("status")}
|
||||
onChange={(v) => updateDraft("status", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
研究状态
|
||||
<Select
|
||||
aria-label="研究状态筛选"
|
||||
placeholder="全部研究状态"
|
||||
showClear
|
||||
value={draft.research_state || undefined}
|
||||
optionList={stateOptions}
|
||||
onChange={(v) => updateDraft("research_state", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
检查结果
|
||||
<Select
|
||||
aria-label="检查结果筛选"
|
||||
placeholder="全部检查结果"
|
||||
showClear
|
||||
value={draft.check_type || undefined}
|
||||
optionList={Object.entries(checkLabels).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))}
|
||||
onChange={(v) => updateDraft("check_type", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
自定义标签
|
||||
<Select
|
||||
aria-label="自定义标签筛选"
|
||||
showClear
|
||||
filter
|
||||
value={draft.tag || undefined}
|
||||
optionList={options("tags")}
|
||||
placeholder="全部标签"
|
||||
onChange={(v) => updateDraft("tag", v)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<details className="advanced-filters">
|
||||
<summary>更多筛选</summary>
|
||||
<div className="alpha-filter-fields">
|
||||
<label>
|
||||
研究来源
|
||||
<Select
|
||||
aria-label="研究来源筛选"
|
||||
showClear
|
||||
value={draft.source || undefined}
|
||||
optionList={options("source").map((option) => ({
|
||||
...option,
|
||||
label: sourceLabel(option.value),
|
||||
}))}
|
||||
placeholder="全部来源"
|
||||
onChange={(v) => updateDraft("source", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
研究编号
|
||||
<Input
|
||||
aria-label="研究编号筛选"
|
||||
value={draft.research_id || ""}
|
||||
onChange={(v) => updateDraft("research_id", v)}
|
||||
/>
|
||||
</label>
|
||||
{[
|
||||
["universe", "Universe"],
|
||||
["alpha_type", "Alpha 类型"],
|
||||
["language", "语言"],
|
||||
["stage", "IS / OS"],
|
||||
].map(([key, label]) => (
|
||||
<label key={key}>
|
||||
{label}
|
||||
<Select
|
||||
showClear
|
||||
aria-label={label}
|
||||
value={draft[key] || undefined}
|
||||
optionList={options(key)}
|
||||
placeholder="全部"
|
||||
onChange={(v) => updateDraft(key, v)}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
<label>
|
||||
平台隐藏状态
|
||||
<Select
|
||||
showClear
|
||||
value={draft.hidden || undefined}
|
||||
optionList={[
|
||||
{ value: "false", label: "可见" },
|
||||
{ value: "true", label: "隐藏" },
|
||||
]}
|
||||
placeholder="全部"
|
||||
onChange={(v) => updateDraft("hidden", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
中性化
|
||||
<Input
|
||||
aria-label="中性化筛选"
|
||||
value={draft.neutralization || ""}
|
||||
placeholder="例如 INDUSTRY"
|
||||
onChange={(v) => updateDraft("neutralization", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
创建时间起（UTC）
|
||||
<Input
|
||||
type="date"
|
||||
value={draft.created_from?.slice(0, 10) || ""}
|
||||
onChange={(v) =>
|
||||
updateDraft("created_from", v ? `${v}T00:00:00Z` : "")
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
创建时间止（UTC）
|
||||
<Input
|
||||
type="date"
|
||||
value={draft.created_to?.slice(0, 10) || ""}
|
||||
onChange={(v) =>
|
||||
updateDraft("created_to", v ? `${v}T23:59:59.999999Z` : "")
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
{Object.entries(metricLabels).map(([key, label]) => (
|
||||
<label key={key}>
|
||||
{label}
|
||||
<div className="range-inputs">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label={`${label} 最小值`}
|
||||
placeholder="最小值"
|
||||
value={draft[`${key}_min`] || ""}
|
||||
onChange={(v) => updateDraft(`${key}_min`, v)}
|
||||
/>
|
||||
<span>—</span>
|
||||
<Input
|
||||
type="number"
|
||||
aria-label={`${label} 最大值`}
|
||||
placeholder="最大值"
|
||||
value={draft[`${key}_max`] || ""}
|
||||
onChange={(v) => updateDraft(`${key}_max`, v)}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
<Checkbox
|
||||
checked={draft.favorite === "true"}
|
||||
onChange={(e) =>
|
||||
updateDraft("favorite", e.target.checked ? "true" : "")
|
||||
}
|
||||
>
|
||||
只看收藏
|
||||
</Checkbox>
|
||||
</div>
|
||||
<p className="muted">
|
||||
数值筛选使用平台原始值，例如 Turnover 0.15 表示 15%。
|
||||
检查结果仅汇总已同步的平台检查；预检通过不代表可以提交，活动资格可用自定义标签记录。
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<footer className="alpha-filter-footer">
|
||||
<Button type="tertiary" theme="borderless" onClick={clearFilters}>
|
||||
重置
|
||||
</Button>
|
||||
<Button htmlType="submit" theme="solid">
|
||||
查询
|
||||
</Button>
|
||||
</footer>
|
||||
</form>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{!connected && (
|
||||
@@ -627,223 +873,17 @@ export function AlphaPage({
|
||||
)}
|
||||
{error && <Banner type="danger" description={error} />}
|
||||
<section className="library-panel" ref={tablePanel}>
|
||||
<div className="alpha-tabs-header">
|
||||
<Tabs
|
||||
className="alpha-submission-tabs"
|
||||
activeKey={submission}
|
||||
onChange={changeSubmission}
|
||||
tabList={[
|
||||
{ itemKey: "UNSUBMITTED", tab: "待提交" },
|
||||
{ itemKey: "SUBMITTED", tab: "已提交" },
|
||||
]}
|
||||
/>
|
||||
<span className="alpha-last-sync">
|
||||
最近数据更新{" "}
|
||||
<span>
|
||||
{formatTime(
|
||||
typeof facets.last_sync === "string" ? facets.last_sync : null,
|
||||
account?.timezone,
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<form
|
||||
className="filter-panel"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
applyFilters();
|
||||
}}
|
||||
>
|
||||
<div className="primary-filters">
|
||||
<Input
|
||||
aria-label="搜索 Alpha"
|
||||
placeholder="搜索 ID、名称或表达式"
|
||||
value={draft.q ?? ""}
|
||||
onChange={(v) => updateDraft("q", v)}
|
||||
showClear
|
||||
/>
|
||||
<Select
|
||||
aria-label="地区"
|
||||
placeholder="全部地区"
|
||||
showClear
|
||||
value={draft.region || undefined}
|
||||
optionList={options("region")}
|
||||
onChange={(v) => updateDraft("region", v)}
|
||||
/>
|
||||
<Select
|
||||
aria-label="平台状态"
|
||||
placeholder="全部平台状态"
|
||||
showClear
|
||||
value={draft.status || undefined}
|
||||
optionList={options("status")}
|
||||
onChange={(v) => updateDraft("status", v)}
|
||||
/>
|
||||
<Select
|
||||
aria-label="研究状态筛选"
|
||||
placeholder="全部研究状态"
|
||||
showClear
|
||||
value={draft.research_state || undefined}
|
||||
optionList={stateOptions}
|
||||
onChange={(v) => updateDraft("research_state", v)}
|
||||
/>
|
||||
<Select
|
||||
aria-label="检查结果筛选"
|
||||
placeholder="全部检查结果"
|
||||
showClear
|
||||
value={draft.check_type || undefined}
|
||||
optionList={Object.entries(checkLabels).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))}
|
||||
onChange={(v) => updateDraft("check_type", v)}
|
||||
/>
|
||||
<Select
|
||||
aria-label="自定义标签筛选"
|
||||
showClear
|
||||
filter
|
||||
value={draft.tag || undefined}
|
||||
optionList={options("tags")}
|
||||
placeholder="全部标签"
|
||||
onChange={(v) => updateDraft("tag", v)}
|
||||
/>
|
||||
</div>
|
||||
<details className="advanced-filters">
|
||||
<summary>
|
||||
更多筛选{" "}
|
||||
{activeFilterCount ? `· ${activeFilterCount} 项已应用` : ""}
|
||||
</summary>
|
||||
<div className="advanced-grid">
|
||||
<label>
|
||||
研究来源
|
||||
<Select
|
||||
aria-label="研究来源筛选"
|
||||
showClear
|
||||
value={draft.source || undefined}
|
||||
optionList={options("source").map((option) => ({
|
||||
...option,
|
||||
label: sourceLabel(option.value),
|
||||
}))}
|
||||
placeholder="全部来源"
|
||||
onChange={(v) => updateDraft("source", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
研究编号
|
||||
<Input
|
||||
aria-label="研究编号筛选"
|
||||
value={draft.research_id || ""}
|
||||
onChange={(v) => updateDraft("research_id", v)}
|
||||
/>
|
||||
</label>
|
||||
{[
|
||||
["universe", "Universe"],
|
||||
["alpha_type", "Alpha 类型"],
|
||||
["language", "语言"],
|
||||
["stage", "IS / OS"],
|
||||
].map(([key, label]) => (
|
||||
<label key={key}>
|
||||
{label}
|
||||
<Select
|
||||
showClear
|
||||
aria-label={label}
|
||||
value={draft[key] || undefined}
|
||||
optionList={options(key)}
|
||||
placeholder="全部"
|
||||
onChange={(v) => updateDraft(key, v)}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
<label>
|
||||
平台隐藏状态
|
||||
<Select
|
||||
showClear
|
||||
value={draft.hidden || undefined}
|
||||
optionList={[
|
||||
{ value: "false", label: "可见" },
|
||||
{ value: "true", label: "隐藏" },
|
||||
]}
|
||||
placeholder="全部"
|
||||
onChange={(v) => updateDraft("hidden", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
中性化
|
||||
<Input
|
||||
aria-label="中性化筛选"
|
||||
value={draft.neutralization || ""}
|
||||
placeholder="例如 INDUSTRY"
|
||||
onChange={(v) => updateDraft("neutralization", v)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
创建时间起（UTC）
|
||||
<Input
|
||||
type="date"
|
||||
value={draft.created_from?.slice(0, 10) || ""}
|
||||
onChange={(v) =>
|
||||
updateDraft("created_from", v ? `${v}T00:00:00Z` : "")
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
创建时间止（UTC）
|
||||
<Input
|
||||
type="date"
|
||||
value={draft.created_to?.slice(0, 10) || ""}
|
||||
onChange={(v) =>
|
||||
updateDraft("created_to", v ? `${v}T23:59:59.999999Z` : "")
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
{Object.entries(metricLabels).map(([key, label]) => (
|
||||
<label key={key}>
|
||||
{label}
|
||||
<div className="range-inputs">
|
||||
<Input
|
||||
type="number"
|
||||
aria-label={`${label} 最小值`}
|
||||
placeholder="最小值"
|
||||
value={draft[`${key}_min`] || ""}
|
||||
onChange={(v) => updateDraft(`${key}_min`, v)}
|
||||
/>
|
||||
<span>—</span>
|
||||
<Input
|
||||
type="number"
|
||||
aria-label={`${label} 最大值`}
|
||||
placeholder="最大值"
|
||||
value={draft[`${key}_max`] || ""}
|
||||
onChange={(v) => updateDraft(`${key}_max`, v)}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
<Checkbox
|
||||
checked={draft.favorite === "true"}
|
||||
onChange={(e) =>
|
||||
updateDraft("favorite", e.target.checked ? "true" : "")
|
||||
}
|
||||
>
|
||||
只看收藏
|
||||
</Checkbox>
|
||||
</div>
|
||||
<p className="muted">
|
||||
数值筛选使用平台原始值，例如 Turnover 0.15 表示 15%。
|
||||
检查结果仅汇总已同步的平台检查；预检通过不代表可以提交，活动资格可用自定义标签记录。
|
||||
</p>
|
||||
</details>
|
||||
<div className="inline-actions filter-actions">
|
||||
<Button htmlType="submit" theme="solid">
|
||||
查询
|
||||
</Button>
|
||||
<Button type="tertiary" theme="borderless" onClick={clearFilters}>
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<SavedViews
|
||||
submission={submission}
|
||||
selectedId={selectedViewId}
|
||||
onSelect={setSelectedViewId}
|
||||
onSubmissionChange={changeSubmission}
|
||||
suspended={overlaySuspended || !active}
|
||||
onOverlay={onOverlay}
|
||||
filters={{ ...filters, submission, sort, direction, limit: pageSize }}
|
||||
columns={visibleColumns}
|
||||
onRestore={(view) => {
|
||||
setFilterOpen(false);
|
||||
const {
|
||||
submission: savedSubmission,
|
||||
sort: savedSort,
|
||||
@@ -861,11 +901,9 @@ export function AlphaPage({
|
||||
setDraft(values);
|
||||
setPage(1);
|
||||
setSelected([]);
|
||||
if (
|
||||
savedSubmission === "SUBMITTED" ||
|
||||
savedSubmission === "UNSUBMITTED"
|
||||
)
|
||||
setSubmission(savedSubmission);
|
||||
setSubmission(
|
||||
savedSubmission === "SUBMITTED" ? "SUBMITTED" : "UNSUBMITTED",
|
||||
);
|
||||
setSort(String(savedSort || "date_created"));
|
||||
setDirection(String(savedDirection || "desc"));
|
||||
if (typeof limit === "number") setPageSize(limit);
|
||||
@@ -879,104 +917,148 @@ export function AlphaPage({
|
||||
localStorage.setItem("alpha-columns", JSON.stringify(next));
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="table-toolbar">
|
||||
<div>
|
||||
<strong>
|
||||
{submission === "UNSUBMITTED" ? "待提交" : "已提交"} Alpha
|
||||
</strong>
|
||||
<span className="count-pill">{data.total.toLocaleString()}</span>
|
||||
{selected.length > 0 && (
|
||||
<span className="selection-text">
|
||||
已选择 {selected.length} 条
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className="table-toolbar alpha-toolbar"
|
||||
aria-label="Alpha 表格工具栏"
|
||||
>
|
||||
<div className="inline-actions alpha-view-tools">
|
||||
<Popover
|
||||
trigger="custom"
|
||||
position="bottomLeft"
|
||||
visible={filterOpen && active && !overlaySuspended}
|
||||
onClickOutSide={() => setFilterOpen(false)}
|
||||
onEscKeyDown={() => setFilterOpen(false)}
|
||||
content={filterPanel}
|
||||
>
|
||||
<Button
|
||||
icon={<IconFilter aria-hidden="true" />}
|
||||
type={filterOpen || activeFilterCount ? "primary" : "tertiary"}
|
||||
theme={filterOpen || activeFilterCount ? "light" : "borderless"}
|
||||
aria-label="筛选 Alpha"
|
||||
onClick={() => {
|
||||
setFilterOpen((open) => !open);
|
||||
onOverlay();
|
||||
}}
|
||||
>
|
||||
筛选
|
||||
{activeFilterCount > 0 && (
|
||||
<span className="alpha-filter-count">
|
||||
{activeFilterCount}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</Popover>
|
||||
<Popover
|
||||
trigger="click"
|
||||
position="bottomRight"
|
||||
content={
|
||||
<div className="columns-picker">
|
||||
<strong>显示列</strong>
|
||||
<CheckboxGroup
|
||||
direction="vertical"
|
||||
value={visibleColumns}
|
||||
options={Object.entries(columnLabels).map(
|
||||
([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
disabled: value === "name",
|
||||
}),
|
||||
)}
|
||||
onChange={(values) => {
|
||||
const next = values.map(String);
|
||||
setVisibleColumns(next);
|
||||
localStorage.setItem(
|
||||
"alpha-columns",
|
||||
JSON.stringify(next),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
icon={<IconSetting aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
aria-label="显示列设置"
|
||||
>
|
||||
列设置
|
||||
</Button>
|
||||
</Popover>
|
||||
<Popover
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
content={
|
||||
<div className="alpha-sort-panel">
|
||||
<h2>排序</h2>
|
||||
<Select
|
||||
aria-label="排序字段"
|
||||
size="small"
|
||||
value={sort}
|
||||
optionList={[
|
||||
{ value: "date_created", label: "创建时间" },
|
||||
{ value: "date_submitted", label: "提交时间" },
|
||||
{ value: "synced_at", label: "同步时间" },
|
||||
...Object.entries(metricLabels).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
})),
|
||||
{ value: "name", label: "名称" },
|
||||
]}
|
||||
onChange={(v) => {
|
||||
setSort(String(v));
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
aria-label="排序方向"
|
||||
size="small"
|
||||
value={direction}
|
||||
optionList={[
|
||||
{ value: "desc", label: "降序" },
|
||||
{ value: "asc", label: "升序" },
|
||||
]}
|
||||
onChange={(v) => {
|
||||
setDirection(String(v));
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
icon={<IconSort aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
aria-label="排序设置"
|
||||
>
|
||||
排序
|
||||
</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="inline-actions">
|
||||
{selected.length > 0 && (
|
||||
<>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
loading={busy === "self_correlation"}
|
||||
onClick={() => void newTask("self_correlation", selected)}
|
||||
>
|
||||
检测自相关
|
||||
</Button>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setBulkVersions(
|
||||
Object.fromEntries(
|
||||
data.items
|
||||
.filter((row) => selected.includes(row.id))
|
||||
.map((row) => [row.id, row.research.version]),
|
||||
),
|
||||
);
|
||||
setBulkOpen(true);
|
||||
onOverlay();
|
||||
}}
|
||||
>
|
||||
批量编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
disabled={!connected}
|
||||
loading={busy === "alpha_refresh"}
|
||||
onClick={() => void newTask("alpha_refresh", selected)}
|
||||
>
|
||||
刷新选中
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Select
|
||||
aria-label="排序字段"
|
||||
size="small"
|
||||
value={sort}
|
||||
optionList={[
|
||||
{ value: "date_created", label: "创建时间" },
|
||||
{ value: "date_submitted", label: "提交时间" },
|
||||
{ value: "synced_at", label: "同步时间" },
|
||||
...Object.entries(metricLabels).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
})),
|
||||
{ value: "name", label: "名称" },
|
||||
]}
|
||||
onChange={(v) => {
|
||||
setSort(String(v));
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
aria-label="排序方向"
|
||||
size="small"
|
||||
value={direction}
|
||||
optionList={[
|
||||
{ value: "desc", label: "降序" },
|
||||
{ value: "asc", label: "升序" },
|
||||
]}
|
||||
onChange={(v) => {
|
||||
setDirection(String(v));
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
<div className="inline-actions alpha-table-actions">
|
||||
<a href={`/api/v1/alphas/export?${query}`}>
|
||||
<Button type="tertiary" size="small">
|
||||
<Button
|
||||
icon={<IconDownload aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<IconUpload aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
onClick={() => setImporting(true)}
|
||||
onClick={() => {
|
||||
setImporting(true);
|
||||
onOverlay();
|
||||
}}
|
||||
>
|
||||
导入 Alpha ID
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<IconRefresh aria-hidden="true" />}
|
||||
theme="solid"
|
||||
disabled={!connected}
|
||||
onClick={() => {
|
||||
@@ -1007,40 +1089,56 @@ export function AlphaPage({
|
||||
全量同步已提交
|
||||
</Button>
|
||||
)}
|
||||
<Popover
|
||||
trigger="click"
|
||||
position="bottomRight"
|
||||
content={
|
||||
<div className="columns-picker">
|
||||
<strong>显示列</strong>
|
||||
<CheckboxGroup
|
||||
direction="vertical"
|
||||
value={visibleColumns}
|
||||
options={Object.entries(columnLabels).map(
|
||||
([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
disabled: value === "name",
|
||||
}),
|
||||
)}
|
||||
onChange={(values) => {
|
||||
const next = values.map(String);
|
||||
setVisibleColumns(next);
|
||||
localStorage.setItem(
|
||||
"alpha-columns",
|
||||
JSON.stringify(next),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button type="tertiary" aria-label="显示列设置" size="small">
|
||||
列设置
|
||||
</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
{selected.length > 0 && (
|
||||
<div className="alpha-selection-actions inline-actions">
|
||||
<span className="selection-text">已选择 {selected.length} 条</span>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
loading={busy === "self_correlation"}
|
||||
onClick={() => void newTask("self_correlation", selected)}
|
||||
>
|
||||
检测自相关
|
||||
</Button>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setBulkVersions(
|
||||
Object.fromEntries(
|
||||
data.items
|
||||
.filter((row) => selected.includes(row.id))
|
||||
.map((row) => [row.id, row.research.version]),
|
||||
),
|
||||
);
|
||||
setBulkOpen(true);
|
||||
onOverlay();
|
||||
}}
|
||||
>
|
||||
批量编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
disabled={!connected}
|
||||
loading={busy === "alpha_refresh"}
|
||||
onClick={() => void newTask("alpha_refresh", selected)}
|
||||
>
|
||||
刷新选中
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
onClick={() => setSelected([])}
|
||||
>
|
||||
取消选择
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Table<Alpha>
|
||||
columns={columns}
|
||||
dataSource={data.items}
|
||||
@@ -1075,7 +1173,24 @@ export function AlphaPage({
|
||||
}
|
||||
/>
|
||||
<footer className="table-pagination" aria-label="Alpha 分页">
|
||||
<span className="muted">共 {data.total.toLocaleString()} 条</span>
|
||||
<div className="alpha-table-meta">
|
||||
<span className="muted">
|
||||
{submission === "UNSUBMITTED" ? "待提交" : "已提交"} Alpha{" "}
|
||||
<span className="count-pill">{data.total.toLocaleString()}</span>{" "}
|
||||
条
|
||||
</span>
|
||||
<span className="alpha-last-sync">
|
||||
最近数据更新{" "}
|
||||
<span>
|
||||
{formatTime(
|
||||
typeof facets.last_sync === "string"
|
||||
? facets.last_sync
|
||||
: null,
|
||||
account?.timezone,
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Pagination
|
||||
size={compact ? "small" : "default"}
|
||||
currentPage={page}
|
||||
|
||||
@@ -1,113 +1,344 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Input, Toast } from "@douyinfe/semi-ui-19";
|
||||
import { api, post } from "../api";
|
||||
import { ResearchSelect } from "./ResearchSelect";
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
Input,
|
||||
Modal,
|
||||
Tabs,
|
||||
Toast,
|
||||
} from "@douyinfe/semi-ui-19";
|
||||
import {
|
||||
IconCopy,
|
||||
IconDelete,
|
||||
IconEdit,
|
||||
IconMore,
|
||||
IconPlus,
|
||||
IconSave,
|
||||
IconList,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import { api, ApiError, post } from "../api";
|
||||
import type { Submission } from "../types";
|
||||
|
||||
export type ViewContent = {
|
||||
name: string;
|
||||
filters: Record<string, unknown>;
|
||||
columns: string[];
|
||||
};
|
||||
type View = { id: string; version: number; content: ViewContent };
|
||||
type Editor = {
|
||||
mode: "create" | "rename" | "copy";
|
||||
content: ViewContent;
|
||||
view?: View;
|
||||
};
|
||||
|
||||
// The API normalizes numbers and adds offset; neither changes the saved view.
|
||||
function filterSignature(filters: Record<string, unknown>) {
|
||||
return JSON.stringify(
|
||||
Object.entries(filters)
|
||||
.filter(
|
||||
([key, value]) => key !== "offset" && value !== "" && value != null,
|
||||
)
|
||||
.map(([key, value]) => [key, String(value)])
|
||||
.sort(([a], [b]) => a.localeCompare(b)),
|
||||
);
|
||||
}
|
||||
|
||||
export function SavedViews({
|
||||
filters,
|
||||
columns,
|
||||
submission,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onSubmissionChange,
|
||||
onRestore,
|
||||
suspended,
|
||||
onOverlay,
|
||||
}: {
|
||||
filters: Record<string, unknown>;
|
||||
columns: string[];
|
||||
submission: Submission;
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string | null) => void;
|
||||
onSubmissionChange: (submission: string) => void;
|
||||
onRestore: (view: ViewContent) => void;
|
||||
suspended: boolean;
|
||||
onOverlay: () => void;
|
||||
}) {
|
||||
const [items, setItems] = useState<View[]>([]);
|
||||
const [editor, setEditor] = useState<Editor | null>(null);
|
||||
const [deleting, setDeleting] = useState<View | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [selected, setSelected] = useState<string>();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const [version, setVersion] = useState(0);
|
||||
const [revision, setRevision] = useState(0);
|
||||
const current = items.find((item) => item.id === selectedId);
|
||||
const modified =
|
||||
current &&
|
||||
(filterSignature(filters) !== filterSignature(current.content.filters) ||
|
||||
JSON.stringify(columns) !== JSON.stringify(current.content.columns));
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
api<{ items: View[] }>(
|
||||
`/research/assets?kind=view&q=${encodeURIComponent(q)}&limit=100`,
|
||||
{ signal: controller.signal },
|
||||
)
|
||||
.then((r) => setItems(r.items))
|
||||
.catch((e) => {
|
||||
if (!controller.signal.aborted) Toast.error(e.message);
|
||||
});
|
||||
async function load() {
|
||||
const views: View[] = [];
|
||||
// Tabs replace remote search, so retain access to views beyond the first page.
|
||||
while (!controller.signal.aborted) {
|
||||
const result = await api<{ items: View[]; total: number }>(
|
||||
`/research/assets?kind=view&limit=100&offset=${views.length}`,
|
||||
{ signal: controller.signal },
|
||||
);
|
||||
views.push(...result.items);
|
||||
if (views.length >= result.total || result.items.length === 0) break;
|
||||
}
|
||||
if (!controller.signal.aborted) setItems(views);
|
||||
}
|
||||
void load().catch((error: Error) => {
|
||||
if (!controller.signal.aborted) Toast.error(error.message);
|
||||
});
|
||||
return () => controller.abort();
|
||||
}, [q, version]);
|
||||
async function save(replace: boolean) {
|
||||
}, [revision]);
|
||||
|
||||
function openEditor(mode: Editor["mode"], view?: View) {
|
||||
const content = view?.content ?? { name: "", filters, columns };
|
||||
setEditor({ mode, content, view });
|
||||
setName(
|
||||
mode === "copy" ? `${content.name} 副本`.slice(0, 200) : content.name,
|
||||
);
|
||||
onOverlay();
|
||||
}
|
||||
function reportError(error: unknown) {
|
||||
Toast.error((error as Error).message);
|
||||
if (error instanceof ApiError && error.status === 409) {
|
||||
setRevision((value) => value + 1);
|
||||
setEditor(null);
|
||||
setDeleting(null);
|
||||
}
|
||||
}
|
||||
async function save(content: ViewContent, old?: View, restore = false) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const old = items.find((i) => i.id === selected);
|
||||
if (replace && !old) return;
|
||||
const content = {
|
||||
name: name.trim() || old?.content.name || "研究队列",
|
||||
filters: Object.fromEntries(
|
||||
Object.entries(filters).filter(
|
||||
([, v]) => v !== "" && v !== null && v !== undefined,
|
||||
),
|
||||
),
|
||||
columns,
|
||||
};
|
||||
const value = replace
|
||||
? await api<View>(`/research/assets/${old!.id}`, {
|
||||
const value = old
|
||||
? await api<View>(`/research/assets/${old.id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
kind: "view",
|
||||
version: old!.version,
|
||||
version: old.version,
|
||||
content,
|
||||
}),
|
||||
})
|
||||
: await post<View>("/research/assets", { kind: "view", content });
|
||||
setSelected(value.id);
|
||||
setName(value.content.name);
|
||||
setVersion((n) => n + 1);
|
||||
setItems((previous) =>
|
||||
old
|
||||
? previous.map((item) => (item.id === value.id ? value : item))
|
||||
: [...previous, value],
|
||||
);
|
||||
if (restore) {
|
||||
onSelect(value.id);
|
||||
onRestore(value.content);
|
||||
}
|
||||
setEditor(null);
|
||||
Toast.success("筛选视图已保存");
|
||||
} catch (e) {
|
||||
Toast.error((e as Error).message);
|
||||
} catch (error) {
|
||||
reportError(error);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
async function remove() {
|
||||
if (!deleting) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api(`/research/assets/${deleting.id}?version=${deleting.version}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
setItems((previous) =>
|
||||
previous.filter((item) => item.id !== deleting.id),
|
||||
);
|
||||
if (selectedId === deleting.id) onSubmissionChange(submission);
|
||||
setDeleting(null);
|
||||
Toast.success("视图已删除");
|
||||
} catch (error) {
|
||||
reportError(error);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="research-saved-views inline-actions">
|
||||
<ResearchSelect
|
||||
label="保存的 Alpha 视图"
|
||||
placeholder="搜索并恢复研究队列"
|
||||
filter
|
||||
remote
|
||||
onSearch={setQ}
|
||||
value={selected}
|
||||
optionList={items.map((i) => ({
|
||||
value: i.id,
|
||||
label: `${i.content.name} · v${i.version}`,
|
||||
}))}
|
||||
onChange={(v) => {
|
||||
const item = items.find((i) => i.id === v);
|
||||
if (item) {
|
||||
setSelected(item.id);
|
||||
setName(item.content.name);
|
||||
onRestore(item.content);
|
||||
}
|
||||
<>
|
||||
<div className="alpha-views-header">
|
||||
<Tabs
|
||||
className="alpha-view-tabs"
|
||||
type="card"
|
||||
collapsible="auto"
|
||||
activeKey={selectedId ?? submission}
|
||||
onChange={(key) => {
|
||||
const view = items.find((item) => item.id === key);
|
||||
if (view) {
|
||||
onSelect(view.id);
|
||||
onRestore(view.content);
|
||||
} else onSubmissionChange(key);
|
||||
}}
|
||||
tabList={[
|
||||
{
|
||||
itemKey: "UNSUBMITTED",
|
||||
tab: "待提交",
|
||||
icon: <IconList aria-hidden="true" />,
|
||||
},
|
||||
{
|
||||
itemKey: "SUBMITTED",
|
||||
tab: "已提交",
|
||||
icon: <IconList aria-hidden="true" />,
|
||||
},
|
||||
...items.map((view) => ({
|
||||
itemKey: view.id,
|
||||
icon: <IconList aria-hidden="true" />,
|
||||
tab: (
|
||||
<span className="alpha-view-label">
|
||||
<span className="alpha-view-name" title={view.content.name}>
|
||||
{view.content.name}
|
||||
</span>
|
||||
{view.id === selectedId && modified && (
|
||||
<span
|
||||
className="alpha-view-modified"
|
||||
title="视图有未保存的更改"
|
||||
aria-label="有未保存的更改"
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<Dropdown
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
stopPropagation
|
||||
render={
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
icon={<IconSave aria-hidden="true" />}
|
||||
disabled={
|
||||
busy || view.id !== selectedId || !modified
|
||||
}
|
||||
onClick={() =>
|
||||
void save(
|
||||
{ name: view.content.name, filters, columns },
|
||||
view,
|
||||
)
|
||||
}
|
||||
>
|
||||
更新当前视图
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={<IconEdit aria-hidden="true" />}
|
||||
disabled={busy}
|
||||
onClick={() => openEditor("rename", view)}
|
||||
>
|
||||
重命名
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={<IconCopy aria-hidden="true" />}
|
||||
disabled={busy}
|
||||
onClick={() => openEditor("copy", view)}
|
||||
>
|
||||
复制视图
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item
|
||||
icon={<IconDelete aria-hidden="true" />}
|
||||
type="danger"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setDeleting(view);
|
||||
onOverlay();
|
||||
}}
|
||||
>
|
||||
删除视图
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore aria-hidden="true" />}
|
||||
size="small"
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
aria-label={`${view.content.name} 视图操作`}
|
||||
/>
|
||||
</Dropdown>
|
||||
</span>
|
||||
</span>
|
||||
),
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
<Button
|
||||
className="alpha-add-view"
|
||||
icon={<IconPlus aria-hidden="true" />}
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
disabled={busy}
|
||||
aria-label="保存为新视图"
|
||||
title="将当前筛选、排序和显示列保存为新视图"
|
||||
onClick={() => openEditor("create")}
|
||||
>
|
||||
新建视图
|
||||
</Button>
|
||||
</div>
|
||||
<Modal
|
||||
title={
|
||||
editor?.mode === "rename"
|
||||
? "重命名视图"
|
||||
: editor?.mode === "copy"
|
||||
? "复制视图"
|
||||
: "保存为新视图"
|
||||
}
|
||||
visible={Boolean(editor) && !suspended}
|
||||
onCancel={() => {
|
||||
if (!busy) setEditor(null);
|
||||
}}
|
||||
confirmLoading={busy}
|
||||
okText="保存视图"
|
||||
okButtonProps={{ disabled: !name.trim(), "aria-label": "保存视图" }}
|
||||
onOk={() => {
|
||||
if (editor && name.trim())
|
||||
void save(
|
||||
{ ...editor.content, name: name.trim() },
|
||||
editor.mode === "rename" ? editor.view : undefined,
|
||||
editor.mode !== "rename",
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
aria-label="视图名称"
|
||||
placeholder="视图名称"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
style={{ width: 160 }}
|
||||
/>
|
||||
<Button size="small" disabled={busy} onClick={() => void save(false)}>
|
||||
保存为新视图
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
disabled={busy || !selected}
|
||||
onClick={() => void save(true)}
|
||||
>
|
||||
更新当前视图
|
||||
</Button>
|
||||
</div>
|
||||
<label>
|
||||
视图名称
|
||||
<Input
|
||||
aria-label="视图名称"
|
||||
placeholder="例如：低换手候选"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
maxLength={200}
|
||||
autoFocus
|
||||
/>
|
||||
</label>
|
||||
{editor?.mode !== "rename" && (
|
||||
<p className="muted">
|
||||
保存筛选条件、排序、每页条数和显示列，之后可从标签栏一键切换。
|
||||
</p>
|
||||
)}
|
||||
</Modal>
|
||||
<Modal
|
||||
title="删除视图"
|
||||
visible={Boolean(deleting) && !suspended}
|
||||
onCancel={() => {
|
||||
if (!busy) setDeleting(null);
|
||||
}}
|
||||
confirmLoading={busy}
|
||||
okText="删除视图"
|
||||
okButtonProps={{ type: "danger", "aria-label": "删除视图" }}
|
||||
onOk={() => void remove()}
|
||||
>
|
||||
<p>
|
||||
删除“{deleting?.content.name}”后，该视图将从标签栏移除，Alpha
|
||||
数据不受影响。
|
||||
</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user