timi-tdesign-mobile/docs/demos/scenarios/notify.vue

<template>
	<div class="demo">
		<div class="tabs">
			<button
				type="button"
				class="tab"
				:class="{ active: tab === 'edit' }"
				@click="tab = 'edit'"
				v-text="'编辑'"
			/>
			<button
				type="button"
				class="tab"
				:class="{ active: tab === 'view' }"
				@click="tab = 'view'"
				v-text="'预览'"
			/>
		</div>

		<div class="status-bar">
			<button
				type="button"
				class="chip"
				@click="switchStatus"
				v-text="'切换状态'"
			/>
			<span class="tag" v-text="detail.status" />
		</div>

		<section v-show="tab === 'edit'" class="pane">
			<input v-model="detail.subject" class="field" placeholder="通知主题" />
			<notify-editor
				ref="editorRef"
				:model-value="detail"
				:upload-image="uploadMedia"
				:upload-video="uploadMedia"
				@change="onChange"
				@update:model-value="onChange"
			/>
			<div class="footer">
				<button type="button" class="btn primary" @click="submit" v-text="'提交通知'" />
				<span class="status" v-text="status" />
			</div>
		</section>

		<section v-show="tab === 'view'" class="pane">
			<notify-view :detail="detail" />
		</section>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { NotifyEditor, NotifyView } from "timi-tdesign-mobile";
import type { NotifyDetail, NotifyEditorExpose, UploadResult } from "timi-tdesign-mobile";

/** 本场景验证通知复用文章编辑能力，同时保留自己的元数据字段。 */
const RICH_CONTENT = `<h2>系统维护通知</h2>
<p>本周六 02:00 - 04:00 进行数据库升级，期间服务不可用。</p>
<ul><li>请提前保存工作内容</li><li>升级完成后会同步通知</li></ul>`;

const statusList = ["WAITING", "SENT", "FAILED"];

const tab = ref("edit");
const detail = ref<NotifyDetail>({
	subject: "编辑器通知演示",
	contentType: "TIP_TAP",
	content: RICH_CONTENT,
	status: "WAITING",
	attachmentList: []
});

const status = ref("等待提交");
const editorRef = ref<NotifyEditorExpose>();

function switchStatus() {
	const index = statusList.indexOf(detail.value.status);
	const next = statusList[(index + 1) % statusList.length];
	detail.value = {
		...detail.value,
		status: next
	};
}

function onChange(value: NotifyDetail) {
	detail.value = value;
}

async function submit() {
	const value = await editorRef.value?.submit();
	if (value) {
		detail.value = value;
		status.value = `已提交，正文 ${value.content?.length || 0} 个字符`;
	}
}

async function uploadMedia(file: File): Promise<UploadResult> {
	return {
		id: `demo-${Date.now()}-${file.name}`,
		name: file.name,
		url: URL.createObjectURL(file)
	};
}
</script>

<style lang="less" scoped>
.demo {
	.tabs {
		display: flex;
		gap: .25rem;
		padding: .25rem;
		margin-bottom: .75rem;
		border-radius: .5rem;
		background: var(--vp-c-bg-soft);
	}

	.tab {
		flex: 1;
		padding: .375rem;
		font-size: .75rem;
		cursor: pointer;
		border: none;
		border-radius: .375rem;
		color: var(--vp-c-text-2);
		background: transparent;

		&.active {
			color: var(--vp-c-brand-1);
			background: var(--vp-c-bg);
		}
	}

	.status-bar {
		display: flex;
		gap: .5rem;
		align-items: center;
		margin-bottom: .75rem;
	}

	.chip {
		padding: .25rem .625rem;
		font-size: .75rem;
		cursor: pointer;
		border: 1px solid var(--vp-c-divider);
		border-radius: 1rem;
		color: var(--vp-c-text-1);
		background: var(--vp-c-bg-soft);
	}

	.tag {
		padding: .125rem .5rem;
		font-size: .6875rem;
		border-radius: .25rem;
		color: var(--vp-c-brand-1);
		background: var(--vp-c-default-soft);
	}

	.field {
		width: 100%;
		padding: .375rem .5rem;
		margin-bottom: .75rem;
		box-sizing: border-box;
		font-size: .8125rem;
		border: 1px solid var(--vp-c-divider);
		border-radius: .375rem;
		color: var(--vp-c-text-1);
		background: var(--vp-c-bg);
	}

	.footer {
		display: flex;
		gap: .75rem;
		align-items: center;
		margin-top: .75rem;
	}

	.btn {
		padding: .25rem .75rem;
		font-size: .75rem;
		cursor: pointer;
		border: 1px solid var(--vp-c-divider);
		border-radius: .375rem;
		color: var(--vp-c-text-1);
		background: var(--vp-c-bg-soft);

		&.primary {
			color: #fff;
			border-color: var(--vp-c-brand-1);
			background: var(--vp-c-brand-1);
		}
	}

	.status {
		font-size: .75rem;
		color: var(--vp-c-text-2);
	}
}
</style>