Spaces:

duqing2026
/

chat-mockup-studio

Sleeping

@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>社交对话生成工坊 - Chat Mockup Studio</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
@@ -58,6 +58,7 @@
     </style>
 </head>
 <body class="bg-gray-100 h-screen flex overflow-hidden">
     <div id="app" class="flex w-full h-full">
         <!-- Sidebar Controls -->
         <div class="w-96 bg-white border-r border-gray-200 flex flex-col h-full overflow-y-auto p-4 shadow-lg z-10">
@@ -112,6 +113,7 @@
                     <div class="flex gap-2">
                         <button @click="addMessage('text', 'left')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加左侧消息"><i class="fas fa-arrow-left"></i></button>
                         <button @click="addMessage('time')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加时间"><i class="fas fa-clock"></i></button>
                         <button @click="addMessage('text', 'right')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加右侧消息"><i class="fas fa-arrow-right"></i></button>
                     </div>
                 </h2>
@@ -119,7 +121,7 @@
                 <div class="space-y-3">
                     <div v-for="(msg, index) in messages" :key="msg.id" class="bg-gray-50 p-3 rounded-lg border border-gray-200 group relative hover:border-green-400 transition-colors">
                         <!-- Tools -->
-                        <div class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 flex gap-1 transition-opacity">
                             <button @click="moveUp(index)" class="text-gray-400 hover:text-blue-500"><i class="fas fa-chevron-up"></i></button>
                             <button @click="moveDown(index)" class="text-gray-400 hover:text-blue-500"><i class="fas fa-chevron-down"></i></button>
                             <button @click="removeMessage(index)" class="text-gray-400 hover:text-red-500"><i class="fas fa-trash"></i></button>
@@ -130,6 +132,11 @@
                             <input v-model="msg.content" class="text-xs text-center bg-transparent border-b border-gray-300 focus:border-green-500 outline-none w-20" placeholder="时间">
                         </div>
                         <div v-else class="flex gap-2 items-start">
                             <div class="flex flex-col items-center gap-1">
                                 <span class="text-xs font-bold text-gray-500">{{ msg.side === 'left' ? '对方' : '我' }}</span>
@@ -221,7 +228,7 @@
                 <div class="h-11 px-4 flex items-center justify-between z-10 text-black dark:text-white border-b border-gray-300/50 dark:border-white/10 bg-[#ededed]/90 dark:bg-[#111111]/90 backdrop-blur-sm">
                     <div class="w-16 flex items-center gap-1 cursor-pointer">
                         <i class="fas fa-chevron-left text-lg"></i>
-                        <span class="text-base">微信</span> <!-- Or count (12) -->
                     </div>
                     <div class="flex-1 text-center font-medium text-lg truncate px-2">
                         {{ settings.title }}
@@ -241,7 +248,10 @@
                             <span class="text-xs text-white/90 bg-gray-300/60 dark:bg-white/10 px-2 py-0.5 rounded text-shadow-sm">{{ msg.content }}</span>
                         </div>
-                        <!-- System Notice (Not implemented in editor yet, but logic is here) -->
                         <!-- Message Bubble -->
                         <div v-else class="flex gap-2.5" :class="{ 'flex-row-reverse': msg.side === 'right' }">
@@ -252,9 +262,6 @@
                             <!-- Content -->
                             <div class="max-w-[70%]">
-                                <!-- Name (Optional, usually hidden in P2P chat) -->
-                                <!-- <div v-if="msg.side === 'left'" class="text-xs text-gray-500 mb-1 ml-1">{{ msg.name }}</div> -->
                                 <!-- Bubble -->
                                 <div class="relative px-3 py-2.5 rounded-md text-base leading-relaxed break-words shadow-sm min-h-[40px] flex items-center"
                                      :class="[
@@ -377,6 +384,11 @@
                         contentType: 'redpacket',
                         content: '辛苦了！买杯咖啡喝',
                         avatar: ''
                     }
                 ])
@@ -384,6 +396,8 @@
                     const id = Date.now()
                     if (type === 'time') {
                         messages.value.push({ id, type: 'time', content: '12:00' })
                     } else {
                         messages.value.push({
                             id,
@@ -495,5 +509,6 @@
             }
         }).mount('#app')
     </script>
 </body>
-</html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>社交对话生成工坊 - Chat Mockup Studio</title>
+    <script src="/static/tailwindcss.js"></script>
+    <script src="/static/vue.global.js"></script>
+    <script src="/static/html2canvas.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
     </style>
 </head>
 <body class="bg-gray-100 h-screen flex overflow-hidden">
+{% raw %}
     <div id="app" class="flex w-full h-full">
         <!-- Sidebar Controls -->
         <div class="w-96 bg-white border-r border-gray-200 flex flex-col h-full overflow-y-auto p-4 shadow-lg z-10">
                     <div class="flex gap-2">
                         <button @click="addMessage('text', 'left')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加左侧消息"><i class="fas fa-arrow-left"></i></button>
                         <button @click="addMessage('time')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加时间"><i class="fas fa-clock"></i></button>
+                        <button @click="addMessage('notice')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加系统提示"><i class="fas fa-info-circle"></i></button>
                         <button @click="addMessage('text', 'right')" class="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded" title="添加右侧消息"><i class="fas fa-arrow-right"></i></button>
                     </div>
                 </h2>
                 <div class="space-y-3">
                     <div v-for="(msg, index) in messages" :key="msg.id" class="bg-gray-50 p-3 rounded-lg border border-gray-200 group relative hover:border-green-400 transition-colors">
                         <!-- Tools -->
+                        <div class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 flex gap-1 transition-opacity z-10">
                             <button @click="moveUp(index)" class="text-gray-400 hover:text-blue-500"><i class="fas fa-chevron-up"></i></button>
                             <button @click="moveDown(index)" class="text-gray-400 hover:text-blue-500"><i class="fas fa-chevron-down"></i></button>
                             <button @click="removeMessage(index)" class="text-gray-400 hover:text-red-500"><i class="fas fa-trash"></i></button>
                             <input v-model="msg.content" class="text-xs text-center bg-transparent border-b border-gray-300 focus:border-green-500 outline-none w-20" placeholder="时间">
                         </div>
+                        <div v-else-if="msg.type === 'notice'" class="text-center">
+                            <span class="text-xs font-bold text-gray-500 block mb-1">系统提示</span>
+                            <textarea v-model="msg.content" rows="2" class="w-full text-xs text-center bg-transparent border rounded p-1 focus:border-green-500 outline-none resize-none" placeholder="系统提示内容"></textarea>
+                        </div>
                         <div v-else class="flex gap-2 items-start">
                             <div class="flex flex-col items-center gap-1">
                                 <span class="text-xs font-bold text-gray-500">{{ msg.side === 'left' ? '对方' : '我' }}</span>
                 <div class="h-11 px-4 flex items-center justify-between z-10 text-black dark:text-white border-b border-gray-300/50 dark:border-white/10 bg-[#ededed]/90 dark:bg-[#111111]/90 backdrop-blur-sm">
                     <div class="w-16 flex items-center gap-1 cursor-pointer">
                         <i class="fas fa-chevron-left text-lg"></i>
+                        <span class="text-base">微信</span>
                     </div>
                     <div class="flex-1 text-center font-medium text-lg truncate px-2">
                         {{ settings.title }}
                             <span class="text-xs text-white/90 bg-gray-300/60 dark:bg-white/10 px-2 py-0.5 rounded text-shadow-sm">{{ msg.content }}</span>
                         </div>
+                        <!-- System Notice -->
+                        <div v-else-if="msg.type === 'notice'" class="flex justify-center mb-2 px-8 text-center">
+                            <span class="text-xs text-gray-400 dark:text-gray-500 leading-tight">{{ msg.content }}</span>
+                        </div>
                         <!-- Message Bubble -->
                         <div v-else class="flex gap-2.5" :class="{ 'flex-row-reverse': msg.side === 'right' }">
                             <!-- Content -->
                             <div class="max-w-[70%]">
                                 <!-- Bubble -->
                                 <div class="relative px-3 py-2.5 rounded-md text-base leading-relaxed break-words shadow-sm min-h-[40px] flex items-center"
                                      :class="[
                         contentType: 'redpacket',
                         content: '辛苦了！买杯咖啡喝',
                         avatar: ''
+                    },
+                    {
+                        id: 6,
+                        type: 'notice',
+                        content: '你已添加了对方为好友，现在可以开始聊天了'
                     }
                 ])
                     const id = Date.now()
                     if (type === 'time') {
                         messages.value.push({ id, type: 'time', content: '12:00' })
+                    } else if (type === 'notice') {
+                        messages.value.push({ id, type: 'notice', content: '你已添加了对方为好友，现在可以开始聊天了' })
                     } else {
                         messages.value.push({
                             id,
             }
         }).mount('#app')
     </script>
+{% endraw %}
 </body>
+</html>