|
@@ -1,223 +1,198 @@
|
|
-import {
|
|
|
|
- NButton,
|
|
|
|
- NCard,
|
|
|
|
- NIcon,
|
|
|
|
- NLayout,
|
|
|
|
- NLayoutContent,
|
|
|
|
- NLayoutSider,
|
|
|
|
- NModal,
|
|
|
|
- NRadio,
|
|
|
|
- NRadioGroup,
|
|
|
|
- NScrollbar,
|
|
|
|
- NSpace,
|
|
|
|
- NTabPane,
|
|
|
|
- NTable,
|
|
|
|
- NTabs,
|
|
|
|
- useMessage,
|
|
|
|
-} from "naive-ui";
|
|
|
|
|
|
+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 { defineComponent, reactive, watch } from "vue";
|
|
import { Close } from "@vicons/ionicons5";
|
|
import { Close } from "@vicons/ionicons5";
|
|
import styles from "./index.module.less";
|
|
import styles from "./index.module.less";
|
|
import { getImage } from "../../images";
|
|
import { getImage } from "../../images";
|
|
import { settings } from "../../runtime";
|
|
import { settings } from "../../runtime";
|
|
export default defineComponent({
|
|
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;
|
|
|
|
- }
|
|
|
|
- );
|
|
|
|
|
|
+ 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",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "休止符",
|
|
|
|
- value: "0",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "三十二分音符",
|
|
|
|
- value: "1",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "十六分音符",
|
|
|
|
- value: "2",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "八分音符",
|
|
|
|
- value: "3",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "四分音符",
|
|
|
|
- value: "4",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "二分音符",
|
|
|
|
- value: "5",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "全音符",
|
|
|
|
- value: "6",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "还原记号",
|
|
|
|
- value: "7",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "升记号",
|
|
|
|
- value: "8",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "降记号",
|
|
|
|
- value: "9",
|
|
|
|
- },
|
|
|
|
- ];
|
|
|
|
- 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>
|
|
|
|
- );
|
|
|
|
- },
|
|
|
|
|
|
+ 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",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "休止符",
|
|
|
|
+ value: "0",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "三十二分音符",
|
|
|
|
+ value: "1",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "十六分音符",
|
|
|
|
+ value: "2",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "八分音符",
|
|
|
|
+ value: "3",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "四分音符",
|
|
|
|
+ value: "4",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "二分音符",
|
|
|
|
+ value: "5",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "全音符",
|
|
|
|
+ value: "6",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "还原记号",
|
|
|
|
+ value: "7",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "升记号",
|
|
|
|
+ value: "8",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "降记号",
|
|
|
|
+ value: "9",
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ return () => (
|
|
|
|
+ <NModal maskClosable={false} 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>
|
|
|
|
+ );
|
|
|
|
+ },
|
|
});
|
|
});
|