23

2025-12-20 23:16:23 +08:00
parent 2d2bd98c47
commit f858f69daa
43 changed files with 476 additions and 99 deletions
--- a/draggable-panels/src/fauto/materials/TestWidget1/index.vue
+++ b/draggable-panels/src/fauto/materials/TestWidget1/index.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import config from './index.json'
+
+const props = defineProps<{
+  materialProps?: Record<string, any>
+}>()
+
+const mergedProps = { ...config.props, ...props.materialProps }
+</script>
+
+<template>
+  <div class="test-widget">
+    <div class="widget-header" :style="{ borderLeftColor: mergedProps.color }">
+      <span class="title">{{ mergedProps.title }}</span>
+    </div>
+    <div class="widget-body">
+      <p class="content">{{ mergedProps.content }}</p>
+      <div class="badge" :style="{ background: mergedProps.color }">
+        {{ config.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.test-widget {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #1e1e1e;
+}
+
+.widget-header {
+  padding: 12px 16px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #3c3c3c;
+  border-left: 3px solid;
+}
+
+.title {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.widget-body {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  color: #cccccc;
+  font-size: 14px;
+  line-height: 1.6;
+  text-align: center;
+  white-space: pre-line;
+  margin-bottom: 20px;
+}
+
+.badge {
+  padding: 6px 16px;
+  border-radius: 20px;
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+}
+</style>