Mention ​

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, Mention, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'

const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
  components: {
    FormItem,
    Mention,
  },
})

const teammateOptions = [
  { value: 'Jasmine', label: 'Jasmine · 产品负责人' },
  { value: 'Leo', label: 'Leo · 交互设计' },
  { value: 'Mia', label: 'Mia · 前端开发' },
  { value: 'Oscar', label: 'Oscar · 测试同学' },
]

const topicOptions = [
  { value: '体验优化', label: '#体验优化' },
  { value: '周版本', label: '#周版本' },
  { value: '性能调优', label: '#性能调优' },
  { value: '风险提示', label: '#风险提示' },
]

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField
        name="status"
        title="团队动态"
        x-decorator="FormItem"
        x-component="Mention"
        default="今天和 @Jasmine 对齐了交互稿，准备同步 @Mia 进入联调。"
        :x-component-props="{
          rows: 3,
          placeholder: '输入 @ 召唤同事',
          options: teammateOptions,
        }"
      />
      <SchemaStringField
        name="timeline"
        title="带话题的更新"
        x-decorator="FormItem"
        x-component="Mention"
        :x-component-props="{
          rows: 3,
          prefix: ['@', '#'],
          split: ' ',
          placeholder: '支持同时输入 @ 同事或 # 话题',
          options: [...teammateOptions, ...topicOptions],
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      提交
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, Mention, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ref } from 'vue'

const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
  components: {
    FormItem,
    Mention,
  },
})

const reviewerPool = [
  { value: 'Elena', label: 'Elena · 设计评审' },
  { value: 'Kingsley', label: 'Kingsley · 开发评审' },
  { value: 'Doris', label: 'Doris · QA' },
  { value: 'Nico', label: 'Nico · 产品' },
]

const reviewerOptions = ref([...reviewerPool])
const mentionLoading = ref(false)

const aliasOptions = [
  { id: 'u1001', nickname: 'Alex (后端)', inactive: false },
  { id: 'u1002', nickname: 'Becca (客户端)', inactive: true },
  { id: 'u1003', nickname: 'Chloe (视觉)', inactive: false },
]

function handleSearch(pattern: string) {
  mentionLoading.value = true
  const keyword = pattern.trim().toLowerCase()
  setTimeout(() => {
    reviewerOptions.value = keyword ? reviewerPool.filter(option => option.value.toLowerCase().includes(keyword)) : [...reviewerPool]
    mentionLoading.value = false
  }, 400)
}

function checkReviewer(pattern: string) {
  return reviewerPool.some(option => option.value === pattern)
}

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField
        name="review"
        title="评审记录"
        x-decorator="FormItem"
        x-component="Mention"
        default="@Elena 帮忙看下交互动效，@Kingsley 关注一下性能回归。"
        :x-component-props="{
          rows: 3,
          placeholder: '输入 @ 选择评审人，支持 Backspace 整体删除',
          options: reviewerOptions,
          loading: mentionLoading,
          whole: true,
          checkIsWhole: checkReviewer,
          onSearch: handleSearch,
        }"
      />
      <SchemaStringField
        name="alias"
        title="别名配置"
        x-decorator="FormItem"
        x-component="Mention"
        :x-component-props="{
          rows: 2,
          placeholder: '通过 props 映射任意字段，自定义禁用规则',
          options: aliasOptions,
          props: { value: 'id', label: 'nickname', disabled: 'inactive' },
          showArrow: true,
        }"
      />
    </SchemaField>
    <Submit style="margin-top: 12px" @submit="log">
      保存
    </Submit>
  </FormProvider>
</template>

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormItem, Mention, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm()

const mentionOptions = [
  { value: 'UI指南', label: 'UI 指南更新', owner: 'Jasmine' },
  { value: '性能调研', label: '性能调研', owner: 'Kingsley', disabled: true },
  { value: '发布 checklist', label: '发布 checklist', owner: 'Mia' },
]

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="post"
      title="更新内容"
      :decorator="[FormItem]"
      :component="[Mention, { rows: 3, placeholder: '在此输入 @ 信息并自定义下拉内容', options: mentionOptions }]"
      initial-value="@UI指南 已补充视觉规范，@发布 checklist 请补全 QA 入口。"
    >
      <template #prefix>
        <span class="mention-prefix">更新</span>
      </template>
      <template #suffix>
        <span class="mention-suffix">⌘ + Enter 发布</span>
      </template>
      <template #header="{ field }">
        <div class="mention-panel-header">
          当前字段：{{ field?.title }}
        </div>
      </template>
      <template #label="{ item, index, field }">
        <div class="mention-option">
          <span class="mention-option__index">{{ index + 1 }}</span>
          <div class="mention-option__body">
            <strong>{{ item.label }}</strong>
            <small>Owner: {{ item.owner }}</small>
            <small v-if="field?.value">源字段值：{{ field?.value.length }}</small>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="mention-panel-footer">
          可以通过 slots 访问 field，并渲染富文本内容
        </div>
      </template>
    </Field>
    <Submit style="margin-top: 12px" @submit="log">
      保存
    </Submit>
  </FormProvider>
</template>

<style scoped>
.mention-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.mention-suffix {
  font-size: 12px;
  color: var(--vp-c-text-3);
}

.mention-panel-header,
.mention-panel-footer {
  font-size: 12px;
  padding: 4px 8px;
  color: var(--vp-c-text-2);
}

.mention-option {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mention-option__index {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--vp-c-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.mention-option__body {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.mention-option__body strong {
  color: var(--vp-c-text-1);
}

.mention-option__body small {
  font-size: 11px;
}
</style>