fuse-code/src/views/view/sign.vue

<template>
  <ui-group-option class="sign" :class="{active}">
    <div class="content">
      <span class="cover" @click="fly">
        <img :src="getResource(getFileUrl(view.cover))" alt="">
      </span>
      <ui-input 
        class="view-title-input"
        type="text" 
        :modelValue="view.title" 
        :maxlength="15"
        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
        v-show="isEditTitle" 
        ref="inputRef" 
        height="28px" 
      />
      <div class="title" v-show="!isEditTitle" @click="fly">
        <p>{{ view.title }}</p>
        <span>  {{ getModelDesc(modelType as ModelType) }}</span>
      </div>
    </div>
    <div class="action" v-if="edit">
      <ui-icon type="order" ctrl />
      <ui-more 
        :options="menus" 
        style="margin-left: 20px" 
        @click="(action: keyof typeof actions) => actions[action]()" 
      />
    </div>
  </ui-group-option>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect } from 'vue'
import { useFocus } from 'bill/hook/useFocus'
import { custom, getResource } from '@/env'
import { deepIsRevise, getFileUrl } from '@/utils'
import { loadModel, getModelDesc, ModelType, currentModel } from '@/model'
import { viewToModelType } from '@/store'

import type { View } from '@/store'
import { Message } from 'bill/expose-common'
import { ui18n } from '@/lang'

const props = withDefaults(
  defineProps<{ view: View, edit?: boolean }>(),
  { edit: true }
)
const emit = defineEmits<{
    (e: 'updateCover', cover: string): void,
    (e: 'updateTitle', title: string): void,
    (e: 'delete'): void,
}>()

const menus = [
  { label: ui18n.t('sys.rename'), value: 'rename' },
  { label: ui18n.t('sys.del'), value: 'delete' },
]

const inputRef = ref()
const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))

watchEffect(() => {
  if (!isEditTitle.value && !props.view.title.length) {
    isEditTitle.value = true
    Message.warning(ui18n.t('view.nameErr'))
  }
})

const actions = {
  delete: () => emit('delete'),
  rename: () => isEditTitle.value = true
}
const modelType = viewToModelType(props.view)
const fly = async () => {
  const sdk = await loadModel(modelType)
  custom.currentView = props.view
  sdk.setView(props.view.flyData)
}
const active = computed(() => {
  return custom.currentView === props.view && !deepIsRevise(currentModel.value, modelType)
})

</script>


<style lang="scss" src="./style.scss" scoped>
</style>

<style>
  .view-title-input.ui-input .text.suffix input {
    padding-right: 50px;
  }
</style>