const inputVal = ref(''); const isFocused = ref(false); let textareaContext = null; // 获取 textarea 上下文 const getTextareaContext = () => { // #ifdef MP-WEIXIN return new Promise((resolve) => { const query = uni.createSelectorQuery(); query .select('#textarea') .context((res) => { textareaContext = res.context; resolve(res.context); }) .exec(); }); // #endif }; // 焦点事件处理 const onFocus = () => { isFocused.value = true; getTextareaContext(); }; const onBlur = () => { isFocused.value = false; }; // 处理编号逻辑 const handleNumbering = (type, cursorPos) => { // 获取当前行的内容 const lines = inputVal.value.split('\n'); let currentLineIndex = 0; let currentPos = 0; let orderNumber = 1; // 用于有序列表的序号计数 // 找到光标所在行 for (let i = 0; i cursorPos) { currentLineIndex = i; break; } } // 处理编号 const newLines = lines.map((line) => { // 如果是空行，直接返回，不增加序号计数 if (!line.trim()) return line; // 移除已有的编号 line = line.replace(/^(\d+\.|[\*\-])\s*/, '').trim(); if (type === 'ol') { // 有序列表 const numberedLine = `${orderNumber}. ${line}`; orderNumber++; // 只在非空行时增加序号 return numberedLine; } else { // 无序列表 return `* ${line}`; } }); // 更新文本内容 inputVal.value = newLines.join('\n'); // 更新文本内容后的光标处理 nextTick(async () => { const newCursorPos = newLines.slice(0, currentLineIndex + 1).join('\n').length; // #ifdef H5 const textarea = document.querySelector('.respon-textarea'); if (textarea) { textarea.focus(); textarea.setSelectionRange && textarea.setSelectionRange(newCursorPos, newCursorPos); } // #endif // #ifdef MP-WEIXIN try { if (!textareaContext) { await getTextareaContext(); } textareaContext.focus({ success: () => { setTimeout(() => { textareaContext.setSelection({ start: newCursorPos, end: newCursorPos, }); }, 100); }, }); } catch (error) { console.error('设置光标位置失败:', error); } // #endif }); }; 效果图 "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FvafVXF3LLFtX03jZvJt9GywWOtG.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FvafVXF3LLFtX03jZvJt9GywWOtG.png) "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FlMMAq-sZL1SdsTdqt1okL9sFaGm.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FlMMAq-sZL1SdsTdqt1okL9sFaGm.png)

语法错误；请使用ref创建响应式数据，或者直接访问formState.offset

"https://wmprod.oss-cn-shanghai.aliyuncs.com/community/Fpx2sBFuWtfzsUQOog1JiZuJfxyW.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/Fpx2sBFuWtfzsUQOog1JiZuJfxyW.png)

1. Supabase 简介：Supabase 是一个开源的 Firebase 替代品，基于 PostgreSQL 构建。它支持通过 SQL 进行灵活的数据查询，并提供了图形化界面，便于快速集成。 特点： 支持复杂的 SQL 查询（包括 JOIN、WHERE 等条件）。 提供了强大的 REST API 和 GraphQL API，可以通过这些 API 与前端进行数据交互。 通过自定义视图和 SQL 查询，可以轻松配置预设的数据集。 自动化的认证和授权机制。 内置的导出功能（可以导出查询结果到 CSV 等格式）。 适用场景：适用于快速开发和小型的查询工具，支持自定义查询条件和输出字段的选择。 使用步骤： 配置好数据集（通过 SQL 视图或查询）； 在前端使用 Supabase 提供的 API 进行数据查询； 允许用户选择查询条件和输出字段（通过动态生成的表单）。 官网：https://supabase.com 2. Hasura 简介：Hasura 是一个开源的 GraphQL 引擎，可以直接基于 PostgreSQL 或其他数据库自动生成 GraphQL API。它支持复杂的查询、关联、以及权限控制。 特点： 自动生成 GraphQL API：通过 Hasura，可以无需手动编写 API 代码，自动生成 GraphQL 查询接口。 实时查询：支持实时订阅和变更监听，非常适合对实时数据更新敏感的应用。 灵活的权限控制：可以对每个查询和字段进行细粒度的权限控制。 导出功能：可以通过 Hasura 提供的 GraphQL 查询获取数据，导出功能可通过自定义实现。 适用场景：适用于需要在数据库基础上构建可自定义查询的应用，尤其是在需要复杂查询和关联的场景中。 使用步骤： 配置好数据库和关联查询（通过 GraphQL 直接操作数据库）； 在前端构建动态表单，使用 GraphQL 查询数据并导出结果。 官网：https://hasura.io 3. Metabase 简介：Metabase 是一款开源的商业智能（BI）工具，提供了丰富的数据查询和展示功能，可以快速构建数据仪表盘和报告。 特点： 无代码查询：Metabase 提供了一个图形化的界面，用户可以通过简单的拖拽和选择来设置查询条件和输出字段，无需编写 SQL 代码。 灵活的查询条件：支持动态设置查询条件，用户可以选择过滤字段，甚至支持多个条件组合。 支持导出：可以导出查询结果为 CSV、Excel 等格式。 支持多种数据源：可以连接到多种数据库，包括 PostgreSQL、MySQL、MongoDB 等。 适用场景：适合快速构建基于数据库的查询工具，提供了非常直观的界面来帮助用户设置查询条件和字段输出。 使用步骤： 配置好数据库连接，创建预设的数据集； 在 Metabase 中创建自定义查询、设置查询条件和输出字段； 通过图形化界面生成报表或导出数据。 官网：https://www.metabase.com 4. Redash 简介：Redash 是一个开源的数据可视化工具，可以连接多种数据源，并支持 SQL 查询、可视化分析和报告导出。 特点： 支持 SQL 查询和可视化：用户可以使用 SQL 查询工具，灵活地构建查询。 动态查询条件：支持通过参数化的查询，让用户可以输入查询条件。 报表和导出：可以将查询结果保存为报表，并导出为 Excel 或 CSV 文件。 多数据源支持：支持连接多种常见的数据库，如 PostgreSQL、MySQL、Google BigQuery 等。 适用场景：适用于需要简单、快速的数据查询工具，尤其适合有 SQL 查询经验的用户。 使用步骤： 配置数据库连接和数据源； 创建查询模板，并允许用户输入查询条件； 导出查询结果并提供可视化报表。 官网：https://redash.io 5. Directus 简介：Directus 是一个开源的内容管理和数据平台，提供了强大的 API 和图形化管理界面，可以快速构建查询工具。 特点： 灵活的数据管理：通过图形化界面，用户可以轻松地管理数据并设置查询条件。 动态查询：支持通过 API 动态传递查询参数，可以允许前端设置查询条件。 权限管理：可以设置不同级别的权限，控制谁能查看或编辑数据。 导出功能：支持导出数据为 CSV 或其他格式。 适用场景：适用于需要灵活配置查询条件和数据管理的应用，尤其适合内容管理或简单的数据查询应用。 使用步骤： 配置好数据集和字段； 在前端构建动态查询表单，允许用户设置查询条件； 使用 Directus 提供的 API 获取结果，并支持导出。 官网：https://directus.io

"https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FrMUWxHT5PONNOz5eEiYhRP618eW.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FrMUWxHT5PONNOz5eEiYhRP618eW.png)

保存并分享 onShareAppMessage(){...}

奋笔疾书

好不好找不知道，猫挺悠闲的

gggggg: gggggggg：

1、单页应用js体积大，加载时间长（网络差的用户体验差）； 2、对性能要求偏高（用老电脑老手机的用户体验差） 3、对老浏览器支持不好（越是大公司照顾的浏览器越老，同学在阿里巴巴（是阿里巴巴集团的阿里巴巴部门），他们前端的兼容性要求是IE5） 4、网页通常是新功能上的最快的地方，你把他照app的模式开发不利于快速迭代 5、很多用户不喜欢用返回键（比如google以前都是默认搜索页面跳转到结果的，现在似乎也变成默认新页面打开了） 所以你想大公司广泛应用单页应用完全是缘木求鱼，单页应用更适用于小公司新项目（一个创业公司的项目使用单页应用会给人一种很先锋的感觉），或者像你说的，后台管理