实现 专注写作 工具

分类：general ｜ 标签：写作、专注、全屏 极简全屏写作框，本地保存

2.1 功能说明

极简全屏写作框，本地保存

2.1.1 使用指南

功能说明

极简写作框，支持全屏、字数统计，内容自动存到本地（localStorage）。

使用场景

随笔、初稿、灵感记录。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• save()
• toggleFs()
• clear()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed, watch, onBeforeUnmount } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const KEY = 'focus-writer-content'
const text = ref(localStorage.getItem(KEY) || '')
const fs = ref(false)
const ta = ref(null)
const count = computed(() => text.value.replace(/\s/g, '').length)

function save() { localStorage.setItem(KEY, text.value) }
watch(text, save)
function toggleFs() {
  const el = ta.value?.$el?.querySelector('textarea') || ta.value?.$el
  if (!document.fullscreenElement) { el?.requestFullscreen?.(); fs.value = true }
  else { document.exitFullscreen?.(); fs.value = false }
}
function clear() { text.value = ''; save() }
onBeforeUnmount(() => { save() })

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/focus-writer