YiLin/phone-app------test1-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
YiLin
2026-06-02 10:42:33 +08:00
commit dd4975fd2c
1084 changed files with 442416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
pages/text/text.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<view>
<view v-html="sanitizeContent(formHtml)"></view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const formHtml = ref('')
const sanitizeContent = (str) => {
return str.replace(/<\/?script>/gi, (match) => {
// 将匹配到的标签转换为十六进制 Unicode
let result = '';
for (let i = 0; i < match.length; i++) {
result += '\\u' + match.charCodeAt(i).toString(16).padStart(4, '0');
}
return result;
});
}
onMounted(() => {
// 直接设置 HTML
formHtml.value = `
明白了！您希望在我的回复中直接嵌入可编辑的表单卡片。让我试试：
---
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 28px; color: white; font-family: 'Microsoft YaHei', sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,0.25); margin: 20px 0;">
<h2 style="margin: 0 0 20px 0; font-size: 20px; display: flex; align-items: center; gap: 12px;">
<span style="font-size: 26px;">✏️</span> 直接在下方编辑任务
</h2>
<form id="inlineTaskForm" style="background: rgba(255,255,255,0.1); border-radius: 16px; padding: 24px;">
<div style="margin-bottom: 18px;">
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">任务名称</label>
<input type="text" id="inlineTitle" placeholder="输入任务名称..." style="width: 100%; padding: 14px 16px; background: #1e1e2e; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; font-size: 15px;">
</div>
<div style="margin-bottom: 18px;">
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">任务描述</label>
<textarea id="inlineDesc" placeholder="输入详细描述..." style="width: 100%; padding: 14px 16px; background: #1e1e2e; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; font-size: 14px; resize: vertical; min-height: 60px;"></textarea>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 18px;">
<div>
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">开始日期</label>
<input type="date" id="inlineStart" style="width: 100%; padding: 14px 16px; background: #1e1e2e; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; font-size: 15px;">
</div>
<div>
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">截止日期</label>
<input type="date" id="inlineEnd" style="width: 100%; padding: 14px 16px; background: #1e1e2e; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; font-size: 15px;">
</div>
</div>
<div style="margin-bottom: 18px;">
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">时间</label>
<input type="time" id="inlineTime" value="09:00" style="width: 100%; padding: 14px 16px; background: #1e1e2e; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; font-size: 15px;">
</div>
<div style="margin-bottom: 18px;">
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;">优先级</label>
<div style="display: flex; gap: 10px;">
<label style="flex: 1; text-align: center; padding: 12px; background: rgba(254, 215, 215, 0.2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.3s;" onclick="selectPriority(this, 'high')">
🔴 高
<input type="radio" name="priority" value="high" checked style="display: none;">
</label>
<label style="flex: 1; text-align: center; padding: 12px; background: rgba(254, 235, 200, 0.2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.3s;" onclick="selectPriority(this, 'medium')">
🟡 中
<input type="radio" name="priority" value="medium" style="display: none;">
</label>
<label style="flex: 1; text-align: center; padding: 12px; background: rgba(198, 246, 213, 0.2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.3s;" onclick="selectPriority(this, 'low')">
🟢 低
<input type="radio" name="priority" value="low" style="display: none;">
</label>
</div>
</div>
<div style="margin-bottom: 20px;">
<label style="display: block; font-size: 12px; opacity: 0.8; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;">分类</label>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<label style="padding: 10px 16px; background: rgba(233, 216, 253, 0.2); border: 2px solid #667eea; border-radius: 20px; cursor: pointer; font-size: 13px;" onclick="selectCategory(this, 'work')">
💼 工作
<input type="radio" name="category" value="work" checked style="display: none;">
</label>
<label style="padding: 10px 16px; background: rgba(190, 227, 248, 0.2); border: 2px solid transparent; border-radius: 20px; cursor: pointer; font-size: 13px;" onclick="selectCategory(this, 'life')">
🏠 生活
<input type="radio" name="category" value="life" style="display: none;">
</label>
<label style="padding: 10px 16px; background: rgba(254, 215, 226, 0.2); border: 2px solid transparent; border-radius: 20px; cursor: pointer; font-size: 13px;" onclick="selectCategory(this, 'study')">
📚 学习
<input type="radio" name="category" value="study" style="display: none;">
</label>
<label style="padding: 10px 16px; background: rgba(198, 246, 213, 0.2); border: 2px solid transparent; border-radius: 20px; cursor: pointer; font-size: 13px;" onclick="selectCategory(this, 'health')">
💪 健康
<input type="radio" name="category" value="health" style="display: none;">
</label>
</div>
</div>
<div style="display: flex; gap: 12px;">
<button type="button" onclick="clearInlineForm()" style="flex: 1; padding: 14px; background: rgba(255,255,255,0.2); border: none; border-radius: 12px; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
清空
</button>
<button type="button" onclick="submitInlineForm()" style="flex: 2; padding: 14px; background: white; border: none; border-radius: 12px; color: #667eea; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
✅ 添加任务
</button>
</div>
</form>
</div>
---
**✅ 您现在可以直接在上方的卡片中填写任务信息，点击"添加任务"即可！**
填写完成后告诉我"已填好"或"添加"，我会帮您确认是否成功！
`
// 初始化事件
// initForm()
})
const initForm = () => {
setTimeout(() => {
const today = new Date().toISOString().split('T')[0]
const startInput = document.getElementById('inlineStart')
const endInput = document.getElementById('inlineEnd')
if (startInput) startInput.value = today
if (endInput) endInput.value = today
const clearBtn = document.getElementById('clearBtn')
const submitBtn = document.getElementById('submitBtn')
if (clearBtn) {
clearBtn.onclick = () => {
const titleInput = document.getElementById('inlineTitle')
const descInput = document.getElementById('inlineDesc')
if (titleInput) titleInput.value = ''
if (descInput) descInput.value = ''
}
}
if (submitBtn) {
submitBtn.onclick = () => {
const titleInput = document.getElementById('inlineTitle')
const title = titleInput?.value.trim()
if (!title) {
alert('请输入任务名称')
return
}
alert(`任务已添加：${title}`)
if (titleInput) titleInput.value = ''
if (document.getElementById('inlineDesc')) document.getElementById('inlineDesc').value = ''
}
}
}, 100)
}
</script>