notation/src/pc/home/component/the-setting/index.tsx

import {
	NButton,
	NCard,
	NIcon,
	NLayout,
	NLayoutContent,
	NLayoutSider,
	NModal,
	NRadio,
	NRadioGroup,
	NScrollbar,
	NSpace,
	NTabPane,
	NTable,
	NTabs,
	useMessage,
} from "naive-ui";
import { defineComponent, reactive, watch } from "vue";
import { Close } from "@vicons/ionicons5";
import styles from "./index.module.less";
import { getImage } from "../../images";
import { settings } from "../../runtime";
export default defineComponent({
	name: "TheSetting",
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	emits: ["update:show"],
	setup(props, { emit }) {
		const message = useMessage();
		const data = reactive({
			show: false,
			btns: [
				{
					label: "播放设置",
					key: "1",
					icon: getImage("icon_28_1.png"),
				},
				{
					label: "快捷键",
					key: "3",
					icon: getImage("icon_28_3.png"),
				},
			],
			active: "3",
		});
		watch(
			() => props.show,
			() => {
				data.show = props.show;
			}
		);

		const keys = [
			{
				label: "音符向上",
				value: "↑",
			},
			{
				label: "音符向下",
				value: "↓",
			},
			{
				label: "音符C",
				value: "C",
			},
			{
				label: "音符D",
				value: "D",
			},
			{
				label: "音符E",
				value: "E",
			},
			{
				label: "音符F",
				value: "F",
			},
			{
				label: "音符G",
				value: "G",
			},
			{
				label: "音符A",
				value: "A",
			},
			{
				label: "音符B",
				value: "B",
			},
			{
				label: "删除音符",
				value: "BackSpace",
			},
			{
				label: "撤回",
				value: "Ctrl + z",
			},
			{
				label: "多选",
				value: "Shift",
			},
		];
		return () => (
			<NModal autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
				<div class={styles.setbox}>
					<div class={styles.head}>
						<div>设置</div>
						<NButton
							class={styles.close}
							quaternary
							circle
							size="small"
							onClick={() => emit("update:show", false)}
						>
							<NIcon component={Close} size={18} />
						</NButton>
					</div>
					<div class={styles.content}>
						<div class={styles.slide}>
							<NSpace vertical align="center" wrapItem={false}>
								{data.btns.map((item) => (
									<NButton
										quaternary
										block
										class={[styles.btn, data.active === item.key && styles.activeBtn]}
										onClick={() => (data.active = item.key)}
									>
										{{
											icon: () => <img class={styles.btnIcon} src={item.icon} />,
											default: () => item.label,
										}}
									</NButton>
								))}
							</NSpace>
						</div>
						<div class={styles.box}>
							<NTabs v-model:value={data.active}>
								<NTabPane name="1" tab="1">
									<div class={styles.keyBox}>
										<NCard title="光标设置" bordered={false}>
											<NRadioGroup v-model:value={settings.cursorType}>
												<NSpace>
													<NRadio value="beat" disabled>光标跟随节拍</NRadio>
													<NRadio value="note">光标跟随音符</NRadio>
												</NSpace>
											</NRadioGroup>
										</NCard>
									</div>
								</NTabPane>
								<NTabPane name="3" tab="3">
									<NScrollbar>
										<div class={styles.keyBox}>
											<NTable class={styles.table} striped>
												<thead>
													<tr>
														<th>命令</th>
														<th>快捷键</th>
													</tr>
												</thead>
												<tbody>
													{keys.map((item) => (
														<tr>
															<td>{item.label}</td>
															<td>{item.value}</td>
														</tr>
													))}
												</tbody>
											</NTable>
										</div>
									</NScrollbar>
								</NTabPane>
							</NTabs>
						</div>
					</div>
				</div>
			</NModal>
		);
	},
});