Skip to content

Commit dd64da7

Browse files
CodFrmCodFrm
committed
✨ 增加布局菜单隐藏侧边栏 #689 
1 parent e432210 commit dd64da7

4 files changed

Lines changed: 168 additions & 147 deletions

File tree

‎src/locales/en-US/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,5 +471,7 @@
471471
"editor_config_saved": "Editor Configuration Saved",
472472
"editor_config_format_error": "Editor Configuration Format Error",
473473
"editor_type_definition_reset": "Editor Type Definition Reset",
474-
"editor_type_definition_saved": "Editor Type Definition Saved"
474+
"editor_type_definition_saved": "Editor Type Definition Saved",
475+
"layout": "Layout",
476+
"hide_script_list": "Hide Script List"
475477
}

‎src/locales/zh-CN/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,5 +471,7 @@
471471
"editor_config_saved": "编辑器配置已保存",
472472
"editor_config_format_error": "编辑器配置格式错误",
473473
"editor_type_definition_reset": "编辑器类型定义已重置",
474-
"editor_type_definition_saved": "编辑器类型定义已保存"
474+
"editor_type_definition_saved": "编辑器类型定义已保存",
475+
"layout": "布局",
476+
"hide_script_list": "隐藏脚本列表"
475477
}

‎src/locales/zh-TW/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,5 +471,7 @@
471471
"editor_config_saved": "編輯器配置已儲存",
472472
"editor_config_format_error": "編輯器配置格式錯誤",
473473
"editor_type_definition_reset": "編輯器類型定義已重設",
474-
"editor_type_definition_saved": "編輯器類型定義已儲存"
474+
"editor_type_definition_saved": "編輯器類型定義已儲存",
475+
"layout": "佈局",
476+
"hide_script_list": "隱藏腳本列表"
475477
}

‎src/pages/options/routes/script/ScriptEditor.tsx‎

Lines changed: 159 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ function ScriptEditor() {
205205
}>();
206206
const [pageInit, setPageInit] = useState<boolean>(false);
207207
const [canLoadScript, setCanLoadScript] = useState<boolean>(false);
208+
const [hiddenScriptList, setHiddenScriptList] = useState<boolean>(false);
208209

209210
const pageUrlParams = useParams();
210211
const [pageUrlSearchParams, setPageUrlSearchParams] = useSearchParams();
@@ -408,6 +409,18 @@ function ScriptEditor() {
408409
},
409410
],
410411
},
412+
{
413+
title: t("layout"),
414+
items: [
415+
{
416+
id: "hideScriptList",
417+
title: (hiddenScriptList ? "✓ " : "") + t("hide_script_list"),
418+
action() {
419+
setHiddenScriptList(!hiddenScriptList);
420+
},
421+
},
422+
],
423+
},
411424
{
412425
title: t("settings"),
413426
tooltip: t("script_setting_tooltip"),
@@ -847,162 +860,164 @@ function ScriptEditor() {
847860
overflow: "hidden",
848861
}}
849862
>
850-
<Col
851-
span={4}
852-
className="h-full"
853-
style={{
854-
overflow: "scroll",
855-
}}
856-
>
857-
<div
858-
className="flex flex-col"
863+
{!hiddenScriptList && (
864+
<Col
865+
span={4}
866+
className="h-full"
859867
style={{
860-
backgroundColor: "var(--color-secondary)",
861-
overflow: "hidden",
868+
overflowY: "scroll",
862869
}}
863870
>
864-
<Button
865-
className="text-left"
866-
size="mini"
871+
<div
872+
className="flex flex-col"
867873
style={{
868-
color: "var(--color-text-2)",
869-
background: "transparent",
870-
cursor: "pointer",
871-
borderBottom: "1px solid rgba(127, 127, 127, 0.8)",
872-
}}
873-
onClick={() => {
874-
setShowSearchInput(!showSearchInput);
875-
setTimeout(
876-
() =>
877-
showSearchInput &&
878-
(document.querySelector("#editor_search_scripts_input") as HTMLInputElement)?.focus(),
879-
1
880-
);
874+
backgroundColor: "var(--color-secondary)",
875+
overflow: "hidden",
881876
}}
882877
>
883-
<div className="flex justify-between items-center">
884-
{t("installed_scripts")}
885-
<IconSearch
886-
style={{
887-
cursor: "inherit",
888-
}}
889-
/>
890-
</div>
891-
</Button>
892-
{showSearchInput && (
893-
<div className="p-2">
894-
<Input
895-
placeholder={t("search_scripts")}
896-
allowClear
897-
value={searchKeyword}
898-
onChange={(value) => setSearchKeyword(value)}
899-
size="mini"
900-
id="editor_search_scripts_input"
901-
/>
902-
</div>
903-
)}
904-
{scriptList
905-
.filter((script) => {
906-
if (!searchKeyword) return true;
907-
return i18nName(script).toLowerCase().includes(searchKeyword.toLowerCase());
908-
})
909-
.map((script) => (
910-
<div
911-
key={`s_${script.uuid}`}
912-
className="relative group"
913-
style={{
914-
overflow: "hidden",
915-
}}
916-
>
917-
<Button
878+
<Button
879+
className="text-left"
880+
size="mini"
881+
style={{
882+
color: "var(--color-text-2)",
883+
background: "transparent",
884+
cursor: "pointer",
885+
borderBottom: "1px solid rgba(127, 127, 127, 0.8)",
886+
}}
887+
onClick={() => {
888+
setShowSearchInput(!showSearchInput);
889+
setTimeout(
890+
() =>
891+
showSearchInput &&
892+
(document.querySelector("#editor_search_scripts_input") as HTMLInputElement)?.focus(),
893+
1
894+
);
895+
}}
896+
>
897+
<div className="flex justify-between items-center">
898+
{t("installed_scripts")}
899+
<IconSearch
900+
style={{
901+
cursor: "inherit",
902+
}}
903+
/>
904+
</div>
905+
</Button>
906+
{showSearchInput && (
907+
<div className="p-2">
908+
<Input
909+
placeholder={t("search_scripts")}
910+
allowClear
911+
value={searchKeyword}
912+
onChange={(value) => setSearchKeyword(value)}
918913
size="mini"
919-
className="text-left w-full"
914+
id="editor_search_scripts_input"
915+
/>
916+
</div>
917+
)}
918+
{scriptList
919+
.filter((script) => {
920+
if (!searchKeyword) return true;
921+
return i18nName(script).toLowerCase().includes(searchKeyword.toLowerCase());
922+
})
923+
.map((script) => (
924+
<div
925+
key={`s_${script.uuid}`}
926+
className="relative group"
920927
style={{
921928
overflow: "hidden",
922-
textOverflow: "ellipsis",
923-
whiteSpace: "nowrap",
924-
backgroundColor: selectSciptButtonAndTab === script.uuid ? "gray" : "",
925-
paddingRight: "32px", // 为删除按钮留出空间
926929
}}
927-
onClick={() => {
928-
setSelectSciptButtonAndTab(script.uuid);
929-
// 如果已经打开则激活
930-
let flag = false;
931-
for (let i = 0; i < editors.length; i += 1) {
932-
if (editors[i].script.uuid === script.uuid) {
933-
editors[i].active = true;
934-
flag = true;
935-
} else {
936-
editors[i].active = false;
937-
}
938-
}
939-
if (!flag) {
940-
// 如果没有打开则打开
941-
// 获取code
942-
scriptCodeDAO.findByUUID(script.uuid).then((code) => {
943-
if (!code) {
944-
return;
930+
>
931+
<Button
932+
size="mini"
933+
className="text-left w-full"
934+
style={{
935+
overflow: "hidden",
936+
textOverflow: "ellipsis",
937+
whiteSpace: "nowrap",
938+
backgroundColor: selectSciptButtonAndTab === script.uuid ? "gray" : "",
939+
paddingRight: "32px", // 为删除按钮留出空间
940+
}}
941+
onClick={() => {
942+
setSelectSciptButtonAndTab(script.uuid);
943+
// 如果已经打开则激活
944+
let flag = false;
945+
for (let i = 0; i < editors.length; i += 1) {
946+
if (editors[i].script.uuid === script.uuid) {
947+
editors[i].active = true;
948+
flag = true;
949+
} else {
950+
editors[i].active = false;
945951
}
946-
const newEditor = {
947-
script,
948-
code: code.code,
949-
active: true,
950-
hotKeys,
951-
isChanged: false,
952-
};
953-
setEditors((prev) => [...prev, newEditor]);
952+
}
953+
if (!flag) {
954+
// 如果没有打开则打开
955+
// 获取code
956+
scriptCodeDAO.findByUUID(script.uuid).then((code) => {
957+
if (!code) {
958+
return;
959+
}
960+
const newEditor = {
961+
script,
962+
code: code.code,
963+
active: true,
964+
hotKeys,
965+
isChanged: false,
966+
};
967+
setEditors((prev) => [...prev, newEditor]);
968+
});
969+
}
970+
}}
971+
>
972+
<span className="overflow-hidden text-ellipsis">{i18nName(script)}</span>
973+
</Button>
974+
{/* 删除按钮，只在鼠标悬停时显示 */}
975+
<Button
976+
type="text"
977+
icon={<IconDelete />}
978+
iconOnly
979+
size="mini"
980+
className="absolute right-1 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
981+
style={{
982+
width: "20px",
983+
height: "20px",
984+
minWidth: "20px",
985+
border: "none",
986+
background: "transparent",
987+
color: "var(--color-text-2)",
988+
boxShadow: "none",
989+
}}
990+
onClick={(e) => {
991+
e.stopPropagation();
992+
// 删除脚本
993+
Modal.confirm({
994+
title: t("confirm_delete_script"),
995+
content: t("confirm_delete_script_content", { name: i18nName(script) }),
996+
onOk: () => {
997+
scriptClient
998+
.delete(script.uuid)
999+
.then(() => {
1000+
setScriptList((prev) => prev.filter((s) => s.uuid !== script.uuid));
1001+
handleDeleteEditor(script.uuid);
1002+
if (selectSciptButtonAndTab === script.uuid) {
1003+
setSelectSciptButtonAndTab("");
1004+
}
1005+
Message.success(t("delete_success"));
1006+
})
1007+
.catch((err) => {
1008+
LoggerCore.logger(Logger.E(err)).debug("delete script error");
1009+
Message.error(`${t("delete_failed")}: ${err}`);
1010+
});
1011+
},
9541012
});
955-
}
956-
}}
957-
>
958-
<span className="overflow-hidden text-ellipsis">{i18nName(script)}</span>
959-
</Button>
960-
{/* 删除按钮，只在鼠标悬停时显示 */}
961-
<Button
962-
type="text"
963-
icon={<IconDelete />}
964-
iconOnly
965-
size="mini"
966-
className="absolute right-1 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
967-
style={{
968-
width: "20px",
969-
height: "20px",
970-
minWidth: "20px",
971-
border: "none",
972-
background: "transparent",
973-
color: "var(--color-text-2)",
974-
boxShadow: "none",
975-
}}
976-
onClick={(e) => {
977-
e.stopPropagation();
978-
// 删除脚本
979-
Modal.confirm({
980-
title: t("confirm_delete_script"),
981-
content: t("confirm_delete_script_content", { name: i18nName(script) }),
982-
onOk: () => {
983-
scriptClient
984-
.delete(script.uuid)
985-
.then(() => {
986-
setScriptList((prev) => prev.filter((s) => s.uuid !== script.uuid));
987-
handleDeleteEditor(script.uuid);
988-
if (selectSciptButtonAndTab === script.uuid) {
989-
setSelectSciptButtonAndTab("");
990-
}
991-
Message.success(t("delete_success"));
992-
})
993-
.catch((err) => {
994-
LoggerCore.logger(Logger.E(err)).debug("delete script error");
995-
Message.error(`${t("delete_failed")}: ${err}`);
996-
});
997-
},
998-
});
999-
}}
1000-
/>
1001-
</div>
1002-
))}
1003-
</div>
1004-
</Col>
1005-
<Col span={20} className="flex! flex-col h-full">
1013+
}}
1014+
/>
1015+
</div>
1016+
))}
1017+
</div>
1018+
</Col>
1019+
)}
1020+
<Col span={hiddenScriptList ? 24 : 20} className="flex! flex-col h-full">
10061021
<Tabs
10071022
editable
10081023
activeTab={activeTab}

0 commit comments

Comments
 (0)