diff --git a/noname/ui/create/menu/index.js b/noname/ui/create/menu/index.js
index f443dbe219..beccac2676 100644
--- a/noname/ui/create/menu/index.js
+++ b/noname/ui/create/menu/index.js
@@ -1,4 +1,6 @@
 import { ui, game, get, lib, _status } from "../../../../noname.js";
+import { createApp } from "../../../../game/vue.esm-browser.js";
+import Menu from "./views/menu.vue";
 
 export function openMenu(node, e, onclose) {
 	popupContainer.innerHTML = "";
@@ -534,3 +536,39 @@ export function menu(connectMenu) {
 		localStorage.removeItem(lib.configprefix + "disable_extension", true);
 	}
 }
+
+/**
+ * @param { boolean } [connectMenu]
+ */
+export function newMenu(connectMenu) {
+	const cacheMenuContainer = (menuContainer = ui.create.div(".menu-container.hidden", ui.window, () => {
+		clickContainer.call(cacheMenuContainer, connectMenu);
+	}));
+	const cachePopupContainer = (popupContainer = ui.create.div(
+		".popup-container.hidden",
+		ui.window,
+		function closeMenu() {
+			// @ts-ignore
+			if (cachePopupContainer.noclose) {
+				// @ts-ignore
+				cachePopupContainer.noclose = false;
+				return;
+			}
+			cachePopupContainer.classList.add("hidden");
+			if (typeof cachePopupContainer.onclose == "function") {
+				// @ts-ignore
+				cachePopupContainer.onclose();
+			}
+		}
+	));
+	// 使用vue的createApp来创建
+	const app = createApp(Menu, {
+		connectMenu
+	});
+
+	app.mount(cacheMenuContainer);
+	cacheMenuContainer.firstElementChild.listen(e => {
+		e.stopPropagation();
+	})
+	cacheMenuContainer.show();
+}
\ No newline at end of file
diff --git a/noname/ui/create/menu/views/menu.vue b/noname/ui/create/menu/views/menu.vue
new file mode 100644
index 0000000000..b9f57056c9
--- /dev/null
+++ b/noname/ui/create/menu/views/menu.vue
@@ -0,0 +1,214 @@
+<template>
+	<div class="new-menu main dialog popped static center">
+		<menu-tabs :data="dataMap" @toggleTabName="toggleTabName"></menu-tabs>
+		<menu-tab-bar :style="menuTabBarStyle"></menu-tab-bar>
+		<menu-content :data="showData" :connectMenu="connectMenu || false" @togglePane="togglePane"></menu-content>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import menuTabs from "./menuTabs.vue";
+import menuTabBar from "./menuTabBar.vue";
+import menuContent from "./menuContent.vue";
+import { lib } from "../../../../../noname.js";
+import { ref } from "vue";
+
+const props = defineProps<{
+	connectMenu: boolean,
+}>();
+
+const connectMenu = props.connectMenu;
+
+const dataMap = new Map([
+	[
+		"开始",
+		{
+			active: null,
+			menuButtonData() {
+				const modeorder: string[] = lib.config.modeorder || [];
+				for (const i in lib.mode) {
+					modeorder.add(i);
+				}
+				const leftPaneNames = modeorder.filter(mode => {
+					if (connectMenu) {
+						if (!lib.mode[mode].connect) return;
+						if (!lib.config["connect_" + mode + "_banned"]) {
+							lib.config["connect_" + mode + "_banned"] = [];
+						}
+						if (!lib.config["connect_" + mode + "_bannedcards"]) {
+							lib.config["connect_" + mode + "_bannedcards"] = [];
+						}
+					}
+					if (lib.config.all.mode.includes(mode)) {
+						// createModeConfig(modeorder[i], start.firstChild);
+						return true;
+					}
+				});
+				return leftPaneNames.map(mode => {
+					return {
+						name: (lib.mode[mode]?.name || mode) as string,
+						mode,
+					};
+				});
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+	[
+		"选项",
+		{
+			active: null,
+			menuButtonData() {
+				return [] as {
+					name: string;
+					mode: string;
+				}[];
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+	[
+		"武将",
+		{
+			active: null,
+			menuButtonData() {
+				return [] as {
+					name: string;
+					mode: string;
+				}[];
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+	[
+		"卡牌",
+		{
+			active: null,
+			menuButtonData() {
+				return [] as {
+					name: string;
+					mode: string;
+				}[];
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+	[
+		"扩展",
+		{
+			active: null,
+			menuButtonData() {
+				return [] as {
+					name: string;
+					mode: string;
+				}[];
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+	[
+		"其它",
+		{
+			active: null,
+			menuButtonData() {
+				return [] as {
+					name: string;
+					mode: string;
+				}[];
+			},
+			initConfigs(node: HTMLElement, startButton: HTMLElement) {},
+		},
+	],
+]);
+
+const showData = ref(dataMap.get("开始")!);
+
+const menuTabBarStyle = {
+	left: "0px",
+	height: "3px",
+};
+
+const toggleTabName = ({ tabName }: { tabName: string }) => {
+	console.log("toggleTabName", tabName);
+
+	const data = dataMap.get(tabName);
+	if (!data) return;
+
+	// 修改menu-tab-bar样式
+	// menuTabBarStyle.transform =
+	// 		"translateX(" +
+	// 		(this.getBoundingClientRect().left - this.parentNode.firstChild.getBoundingClientRect().left) /
+	// 			get.menuZoom() +
+	// 		"px)";
+
+	// 修改menuContent内容
+	showData.value = data;
+};
+
+const togglePane = ({ tabName, mode }: { tabName: string; mode: string }) => {
+	console.log("togglePane", tabName, mode);
+
+	const paneData = showData.value.menuButtonData().find(data => {
+		if (data.name === tabName && data.mode === mode) {
+			showData.value.active = {
+				name: tabName,
+				mode,
+			};
+			return true;
+		}
+	});
+
+	if (!paneData) return;
+};
+</script>
+
+<style>
+:root {
+    --menu-width: 80%;
+    --menu-height: 60%;
+}
+
+.menu-container > .new-menu.main.center {
+	left: calc(50% - var(--menu-width) / 2);
+	top: calc(50% - var(--menu-height) / 2);
+}
+
+.menu-container > .new-menu.main {
+	left: 15px;
+	top: 52px;
+}
+
+.menu-container > .new-menu.main {
+	transition: all 0.3s;
+	transform-origin: 2px -35px;
+}
+
+.menu-container.hidden > .new-menu.main {
+	transform: scale(0.5);
+	transform-origin: 2px -35px;
+	opacity: 0;
+}
+
+.menu-container.hidden > .new-menu.main.center {
+	transform-origin: center center;
+}
+
+.menu-container > .new-menu.main.center {
+	transform-origin: center center;
+}
+
+.new-menu.main {
+    display: -webkit-flex;
+    display: flex;
+	flex-direction: column;
+	width: var(--menu-width);
+	height: var(--menu-height);
+	position: absolute;
+	overflow: hidden;
+	padding: 0;
+}
+
+.new-menu div {
+    display: block;
+}
+</style>
diff --git a/noname/ui/create/menu/views/menuButton.vue b/noname/ui/create/menu/views/menuButton.vue
new file mode 100644
index 0000000000..ac2d56d0f1
--- /dev/null
+++ b/noname/ui/create/menu/views/menuButton.vue
@@ -0,0 +1,160 @@
+<template>
+	<div :mode="data.mode" @click="togglePane" class="new-menubutton large">{{ data.name }}</div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps<{
+	data: {
+		name: string;
+		mode: string;
+	};
+}>();
+
+const emit = defineEmits<{
+	(e: "togglePane", payload: { tabName: string; mode: string }): void;
+}>();
+
+const togglePane = (e: Event) => {
+	// 修改UI
+	const target = e.target as HTMLElement;
+	if (!target) return console.warn(`target不存在`);
+	if (target.classList.contains("active")) return;
+	Array.from(target.parentElement?.children || []).forEach(node => {
+		node.classList?.remove("active");
+	});
+	target.classList.add("active");
+	// 传递数据
+	emit("togglePane", { tabName: props.data.name, mode: props.data.mode });
+};
+</script>
+
+<style>
+.new-menubutton {
+    text-align: center;
+	display: inline-block;
+	padding: 5px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px;
+	border-radius: 4px;
+	background-image: linear-gradient(rgba(75, 75, 75, 1), rgba(70, 70, 70, 1));
+}
+
+.new-menubutton.off {
+	opacity: 0.5;
+}
+
+.new-menubutton.large {
+	font-size: 30px;
+	line-height: 30px;
+	font-family: "STXinwei", "xinwei";
+}
+
+.new-menubutton.round {
+	width: 40px;
+	height: 40px;
+	border-radius: 100%;
+	font-size: 36px;
+	line-height: 40px;
+	font-family: "xinwei";
+}
+
+.new-menubutton.left {
+	float: left;
+}
+
+.new-menubutton.right {
+	float: right;
+}
+
+.new-menubutton.search {
+	text-align: left;
+}
+
+.new-menubutton.search:not(.focus) {
+	color: rgba(255, 255, 255, 0.5);
+}
+
+.new-menubutton.dim {
+	color: rgba(255, 255, 255, 0.5);
+}
+
+.new-menubutton.large.blue,
+.new-menubutton.large.red {
+	color: white !important;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 10px !important;
+}
+
+.new-menubutton.active,
+.new-menubutton.blue {
+	background-image: linear-gradient(rgba(47, 101, 150, 1), rgba(43, 90, 132, 1));
+}
+
+.new-menubutton.highlight,
+.new-menubutton.red {
+	background-image: linear-gradient(rgba(150, 47, 47, 1), rgba(132, 43, 43, 1));
+}
+
+.new-menubutton.large.active,
+.new-menubutton.large.lighlight {
+	box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 10px;
+}
+
+.new-menubutton.large.dashboard {
+	width: 80px;
+	height: 80px;
+	margin: 6px;
+	position: relative !important;
+}
+
+.new-menubutton.large.dashboard.dashboard2 {
+	width: 60px;
+	height: 60px;
+	margin: 5px;
+	margin-top: 10px;
+}
+
+.new-menubutton.large.dashboard.dashboard2 > div:first-child {
+	font-size: 40px;
+	line-height: 40px;
+}
+
+.new-menubutton.large.dashboard.dashboard2 > div:last-child {
+	font-size: 16px;
+	white-space: nowrap;
+}
+
+.new-menubutton.large.dashboard > div:first-child {
+	font-family: "lishu", "xiaozhuan";
+	font-size: 60px;
+	line-height: 60px;
+	position: absolute;
+	left: 0;
+	top: 7px;
+	width: 100%;
+	height: 60px;
+}
+
+.new-menubutton.large.dashboard > div:last-child {
+	font-size: 18px;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+}
+
+.new-menubutton.large.new_card,
+.new-menubutton.large.new_card_delete {
+	left: 12px;
+	top: 130px;
+	margin-bottom: 20px;
+}
+
+.new-menubutton.large.new_card_delete {
+	left: 155px;
+}
+
+#window:not(.nopointer) .popup-container > .prompt-container > div > div > div > .menubutton {
+	cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/noname/ui/create/menu/views/menuContent.vue b/noname/ui/create/menu/views/menuContent.vue
new file mode 100644
index 0000000000..334401ed19
--- /dev/null
+++ b/noname/ui/create/menu/views/menuContent.vue
@@ -0,0 +1,116 @@
+<template>
+	<div class="new-menu-content">
+		<div>
+			<div class="left pane" ref="leftPane">
+				<menu-button v-for="leftPaneData in leftPaneDatas" :data="leftPaneData" @togglePane="togglePane"></menu-button>
+			</div>
+			<div class="right pane" ref="rightPane"></div>
+			<div class="menubutton round highlight" ref="startButton">启</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { App, computed, createApp, onMounted, onUnmounted, ref, watch } from "vue";
+import menuButton from "./menuButton.vue";
+
+// 应接收左边的配置项和右边内容的生成函数
+// 如有可能，可以做个缓存
+const props = defineProps<{
+	connectMenu: boolean;
+	data: {
+		active: { name: string; mode: string } | null;
+		menuButtonData: () => {
+			name: string;
+			mode: string;
+		}[];
+		initConfigs: (node: HTMLElement, startButton: HTMLElement) => void;
+	};
+}>();
+
+const emit = defineEmits<{
+	(e: "togglePane", payload: { tabName: string; mode: string }): void;
+}>();
+
+const leftPaneDatas = computed(() => props.data.menuButtonData());
+
+const leftPane = ref<HTMLDivElement>();
+const rightPane = ref<HTMLDivElement>();
+
+const togglePane = ({ tabName, mode }: { tabName: string; mode: string }) => {
+	emit("togglePane", { tabName, mode });
+};
+
+const updateUI = () => {
+	Array.from(leftPane.value?.children || []).forEach((node, index) => {
+		if (props.data.active ? props.data.active.name === node.innerHTML && props.data.active.mode === node.getAttribute("mode")! : index === 0) {
+			node.classList.add("active");
+			emit("togglePane", { tabName: node.innerHTML, mode: node.getAttribute("mode")! });
+		} else {
+			node.classList.remove("active");
+		}
+	});
+};
+
+let rightPaneApp: App<Element> | null = null;
+
+const mountRightPaneApp = () => {
+	if (rightPaneApp) {
+		rightPaneApp.unmount();
+	}
+
+	rightPaneApp = createApp(
+		{
+			template: "<div>name: {{data.active?.name}}</div><div>mode: {{data.active?.mode}}</div>",
+			props: {
+				data: {
+					type: Object,
+					required: true,
+				},
+			},
+			setup(props) {
+				return {
+					data: props.data,
+				};
+			},
+		},
+		{
+			data: props.data,
+		}
+	);
+
+	rightPaneApp.mount(rightPane.value!);
+};
+
+onMounted(() => {
+	updateUI();
+	mountRightPaneApp();
+});
+
+const watchStopHandle = watch(leftPaneDatas, () => {
+	updateUI();
+	mountRightPaneApp();
+});
+
+onUnmounted(() => {
+	watchStopHandle();
+});
+</script>
+
+<style>
+.new-menu.main > .new-menu-content {
+	max-height: calc(100% - var(--new-menu-tab-height));
+}
+
+.new-menu.main > .new-menu-content > div {
+	display: flex;
+	flex-direction: row;
+	max-height: 100%;
+}
+
+.new-menu.main > .new-menu-content > div > .left.pane {
+	width: 34%;
+	left: 0;
+	overflow: scroll;
+}
+</style>
diff --git a/noname/ui/create/menu/views/menuTabBar.vue b/noname/ui/create/menu/views/menuTabBar.vue
new file mode 100644
index 0000000000..9576a457f7
--- /dev/null
+++ b/noname/ui/create/menu/views/menuTabBar.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="new-menu-tab-bar" :style="style"></div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, StyleValue } from "vue";
+
+const props = defineProps<{
+	style: {  [key in keyof CSSStyleDeclaration]?: string; };
+}>();
+
+const style = props.style as StyleValue;
+
+</script>
+
+<style>
+.new-menu.main > .new-menu-tab-bar {
+	width: 45px;
+	height: 2px;
+	top: var(--new-menu-tab-height);
+	position: absolute;
+	background-color: rgb(0, 133, 255);
+	transition: transform 0.3s;
+	left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/noname/ui/create/menu/views/menuTabs.vue b/noname/ui/create/menu/views/menuTabs.vue
new file mode 100644
index 0000000000..c5f4f24692
--- /dev/null
+++ b/noname/ui/create/menu/views/menuTabs.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="new-menu-tab">
+		<div v-for="[tabName] in data" @click="toggleTabName($event, tabName)">{{ tabName }}</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps<{
+	data: Map<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(e: "toggleTabName", payload: { tabName: string }): void;
+}>();
+
+const toggleTabName = (e: Event, tabName: string) => {
+    // 修改UI
+    const target = e.target as HTMLElement;
+    if (!target) return console.warn(`target不存在`);
+    if (target.classList.contains("active")) return;
+    Array.from(target.parentElement?.children || []).forEach(node => {
+        node.classList?.remove("active");
+    });
+    target.classList.add("active");
+    // 传递数据
+	emit("toggleTabName", { tabName });
+};
+
+</script>
+
+<style>
+:root {
+	--new-menu-tab-height: 37px;
+}
+
+.new-menu.main > .new-menu-tab {
+	height: var(--new-menu-tab-height);
+	text-align: center;
+	width: calc(100% - 30px);
+	padding-left: 15px;
+	padding-right: 15px;
+	position: relative;
+	text-align: center;
+
+	border-width: 0 0 1px;
+	border-style: solid;
+	border-image: linear-gradient(
+			to right,
+			transparent,
+			rgba(0, 0, 0, 0.2) 10%,
+			rgba(0, 0, 0, 0.2) 90%,
+			transparent
+		)
+		0 1 100%;
+}
+
+.new-menu.main > .new-menu-tab > div {
+	display: inline-block;
+	height: 32px;
+	line-height: 30px;
+	padding-top: 5px;
+	width: 45px;
+	margin-left: 5px;
+	margin-right: 5px;
+	transition: color 0.5s;
+}
+
+.new-menu.main > .new-menu-tab > div:not(.active):not(*:hover),
+.new-menu.main > .new-menu-tab > .disabled {
+	color: rgba(255, 255, 255, 0.6);
+}
+
+.new-menu.main > .new-menu-content > div > .left.pane > div {
+	width: calc(100% - 30px);
+	margin-top: 9px;
+	margin-left: 10px;
+	transition: all 0.3s;
+	height: 23px;
+	font-size: 26px;
+	line-height: 26px;
+	white-space: nowrap;
+}
+</style>
\ No newline at end of file