|
@@ -12,7 +12,17 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <p>{{ guide.title }}</p>
|
|
|
+ <p v-show="!isEditTitle">{{ guide.title }}</p>
|
|
|
+ <ui-input
|
|
|
+ class="view-title-input"
|
|
|
+ type="text"
|
|
|
+ :modelValue="guide.title"
|
|
|
+ :maxlength="15"
|
|
|
+ @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
|
|
|
+ v-show="isEditTitle"
|
|
|
+ ref="inputRef"
|
|
|
+ height="28px"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="actions" v-if="edit">
|
|
@@ -29,27 +39,42 @@
|
|
|
import { Guide, getGuidePaths } from "@/store";
|
|
|
import { getFileUrl, saveAs } from "@/utils";
|
|
|
import { getResource } from "@/env";
|
|
|
-import { computed, watchEffect, nextTick } from "vue";
|
|
|
+import { computed, watchEffect, nextTick, ref } from "vue";
|
|
|
import { playSceneGuide, isScenePlayIng, pauseSceneGuide } from "@/sdk";
|
|
|
import { VideoRecorder } from "simaqcore";
|
|
|
+import useFocus from "bill/hook/useFocus";
|
|
|
+import { Message } from "bill/expose-common";
|
|
|
|
|
|
const props = withDefaults(defineProps<{ guide: Guide; edit?: boolean }>(), {
|
|
|
edit: true,
|
|
|
});
|
|
|
|
|
|
+const inputRef = ref();
|
|
|
+const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root));
|
|
|
+watchEffect(() => {
|
|
|
+ if (!isEditTitle.value && !props.guide.title.length) {
|
|
|
+ isEditTitle.value = true;
|
|
|
+ Message.warning("测量名称不可为空");
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
const emit = defineEmits<{
|
|
|
+ (e: "updateTitle", t: string): void;
|
|
|
(e: "delete"): void;
|
|
|
(e: "play"): void;
|
|
|
(e: "edit"): void;
|
|
|
}>();
|
|
|
|
|
|
const menus = [
|
|
|
+ { label: "重命名", value: "editTitle" },
|
|
|
{ label: "编辑", value: "edit" },
|
|
|
- // { label: "下载", value: "download" },
|
|
|
{ label: "删除", value: "delete" },
|
|
|
];
|
|
|
const actions = {
|
|
|
edit: () => emit("edit"),
|
|
|
+ editTitle: () => {
|
|
|
+ isEditTitle.value = true;
|
|
|
+ },
|
|
|
delete: () => emit("delete"),
|
|
|
download: () => {
|
|
|
const config: any = {
|
|
@@ -150,7 +175,7 @@ const paths = computed(() => getGuidePaths(props.guide));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- div {
|
|
|
+ div:not(.view-title-input) {
|
|
|
margin-left: 10px;
|
|
|
|
|
|
p {
|
|
@@ -166,3 +191,9 @@ const paths = computed(() => getGuidePaths(props.guide));
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.view-title-input.ui-input .text.suffix input {
|
|
|
+ padding-right: 50px;
|
|
|
+}
|
|
|
+</style>
|