23

draggable-panels/src/views/HelloWorld.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const msg = ref('欢迎使用拖拽设计器')
+</script>
+
+<template>
+  <div class="hello-world">
+    <h1>{{ msg }}</h1>
+    <div class="card">
+      <p>这是一个基于 Vue3 + TypeScript 的可拖拽子窗口设计器项目</p>
+      <p class="hint">访问 <router-link to="/draggable">/draggable</router-link> 进入设计器</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hello-world {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 3rem;
+  margin-bottom: 2rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem 3rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.card p {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  margin: 1rem 0;
+}
+
+.hint {
+  margin-top: 2rem;
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+.hint a {
+  color: #ffd700;
+  text-decoration: none;
+  font-weight: bold;
+  border-bottom: 2px solid #ffd700;
+  transition: all 0.3s;
+}
+
+.hint a:hover {
+  color: #ffed4e;
+  border-color: #ffed4e;
+}
+</style>