为各小组件配置界面添加预设样式选项，优化用户体验

src/views/ConfigView.vue

@@ -8,19 +8,23 @@
       </div>
       
       <div class="config-container">
-        <div class="config-panel">
-          <component :is="currentConfigComponent" v-if="currentConfigComponent" @update:config="updateWidgetConfig" :config="currentWidgetConfig" />
-        </div>
-        
         <div class="url-generator">
           <h3>生成的URL链接</h3>
-          <el-input v-model="generatedUrl" readonly size="large">
+          <div class="url-input-group">
-            <template #append>
+            <el-input v-model="generatedUrl" readonly size="large" />
-              <el-button @click="copyUrl">
+            <div class="button-group">
+              <el-button @click="copyUrl" size="large">
                 <el-icon><CopyDocument /></el-icon> 复制
               </el-button>
-            </template>
+              <el-button @click="openPreview" size="large">
-          </el-input>
+                <el-icon><View /></el-icon> 打开
+              </el-button>
+            </div>
+          </div>
+        </div>
+        
+        <div class="config-panel">
+          <component :is="currentConfigComponent" v-if="currentConfigComponent" @update:config="updateWidgetConfig" :config="currentWidgetConfig" />
         </div>
       </div>
     </div>
@@ -37,7 +41,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
-import { CopyDocument } from '@element-plus/icons-vue';
+import { CopyDocument, View } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { encodeConfig, decodeConfig } from '../utils/configUtils';
 
@@ -91,6 +95,15 @@ const copyUrl = () => {
   });
 };
 
+// 打开预览页面
+const openPreview = () => {
+  if (generatedUrl.value) {
+    window.open(generatedUrl.value, '_blank');
+  } else {
+    ElMessage.warning('请先配置小组件');
+  }
+};
+
 // 加载时检查查询参数（用于直接链接）
 onMounted(() => {
   const queryParams = new URLSearchParams(window.location.search);
@@ -161,17 +174,16 @@ watch([selectedWidget, currentWidgetConfig], () => {
 }
 
 .config-panel {
-  /* 配置面板可以滚动，但不挤压URL生成器 */
+  /* 配置面板可以滚动 */
   overflow-y: auto;
   flex: 1;
-  margin-bottom: 20px;
 }
 
 .url-generator {
-  /* URL生成器固定在底部 */
+  /* URL生成器固定在顶部 */
-  margin-top: auto;
+  margin-bottom: 20px;
   padding: 10px 0;
-  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
 }
 
 .url-generator h3 {
@@ -181,6 +193,17 @@ watch([selectedWidget, currentWidgetConfig], () => {
   color: #606266;
 }
 
+.url-input-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.button-group {
+  display: flex;
+  gap: 8px;
+}
+
 .preview-container {
   width: 100%;
   height: 100%;

src/widgets/clock/Config.vue

@@ -3,6 +3,19 @@
     <h2>时钟小组件设置</h2>
     
     <el-form label-position="top">
+      <el-divider>预设样式</el-divider>
+      
+      <el-form-item>
+        <el-button-group>
+          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
+          <el-button type="success" @click="applyPreset('neon')">霓虹风格</el-button>
+          <el-button type="warning" @click="applyPreset('elegant')">优雅风格</el-button>
+          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
+        </el-button-group>
+      </el-form-item>
+
+      <el-divider>基本设置</el-divider>
+
       <el-form-item label="时间格式">
         <el-select v-model="localConfig.format" placeholder="选择格式">
           <el-option label="HH:mm:ss (24小时制)" value="HH:mm:ss" />
@@ -99,16 +112,6 @@
         </el-form-item>
       </template>
       
-      <el-divider>预设样式</el-divider>
-      
-      <el-form-item>
-        <el-button-group>
-          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
-          <el-button type="success" @click="applyPreset('neon')">霓虹风格</el-button>
-          <el-button type="warning" @click="applyPreset('elegant')">优雅风格</el-button>
-          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
-        </el-button-group>
-      </el-form-item>
     </el-form>
   </div>
 </template>

src/widgets/date/Config.vue

@@ -3,6 +3,19 @@
     <h2>日期小组件设置</h2>
     
     <el-form label-position="top">
+      <el-divider>预设样式</el-divider>
+      
+      <el-form-item>
+        <el-button-group>
+          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
+          <el-button type="success" @click="applyPreset('elegant')">优雅风格</el-button>
+          <el-button type="warning" @click="applyPreset('casual')">休闲风格</el-button>
+          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
+        </el-button-group>
+      </el-form-item>
+
+      <el-divider>基本设置</el-divider>
+
       <el-form-item label="日期格式">
         <el-select v-model="localConfig.format" placeholder="选择格式">
           <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
@@ -81,14 +94,6 @@
         </el-form-item>
       </template>
       
-      <el-form-item>
-        <el-button-group>
-          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
-          <el-button type="success" @click="applyPreset('elegant')">优雅风格</el-button>
-          <el-button type="warning" @click="applyPreset('casual')">休闲风格</el-button>
-          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
-        </el-button-group>
-      </el-form-item>
     </el-form>
   </div>
 </template>

src/widgets/image/Config.vue

@@ -3,6 +3,19 @@
     <h2>图片小组件设置</h2>
     
     <el-form label-position="top">
+      <el-divider>预设样式</el-divider>
+      
+      <el-form-item>
+        <el-button-group>
+          <el-button type="primary" @click="applyPreset('normal')">正常</el-button>
+          <el-button type="success" @click="applyPreset('rounded')">圆角</el-button>
+          <el-button type="warning" @click="applyPreset('shadow')">阴影</el-button>
+          <el-button type="danger" @click="applyPreset('circular')">圆形</el-button>
+        </el-button-group>
+      </el-form-item>
+
+      <el-divider>基本设置</el-divider>
+
       <el-form-item label="图片URL">
         <el-input v-model="localConfig.imageUrl" placeholder="输入图片URL" />
       </el-form-item>
@@ -45,14 +58,6 @@
         </el-form-item>
       </template>
       
-      <el-form-item>
-        <el-button-group>
-          <el-button type="primary" @click="applyPreset('normal')">正常</el-button>
-          <el-button type="success" @click="applyPreset('rounded')">圆角</el-button>
-          <el-button type="warning" @click="applyPreset('shadow')">阴影</el-button>
-          <el-button type="danger" @click="applyPreset('circular')">圆形</el-button>
-        </el-button-group>
-      </el-form-item>
     </el-form>
   </div>
 </template>

src/widgets/text/Config.vue

@@ -3,6 +3,19 @@
     <h2>文本小组件设置</h2>
     
     <el-form label-position="top">
+      <el-divider>预设样式</el-divider>
+      
+      <el-form-item>
+        <el-button-group>
+          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
+          <el-button type="success" @click="applyPreset('neon')">霓虹风格</el-button>
+          <el-button type="warning" @click="applyPreset('retro')">复古风格</el-button>
+          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
+        </el-button-group>
+      </el-form-item>
+
+      <el-divider>基本设置</el-divider>
+
       <el-form-item label="文本内容">
         <el-input v-model="localConfig.text" type="textarea" :rows="3" placeholder="输入要显示的文本" />
       </el-form-item>
@@ -71,14 +84,6 @@
         </el-form-item>
       </template>
       
-      <el-form-item>
-        <el-button-group>
-          <el-button type="primary" @click="applyPreset('modern')">现代风格</el-button>
-          <el-button type="success" @click="applyPreset('neon')">霓虹风格</el-button>
-          <el-button type="warning" @click="applyPreset('retro')">复古风格</el-button>
-          <el-button type="danger" @click="applyPreset('minimal')">简约风格</el-button>
-        </el-button-group>
-      </el-form-item>
     </el-form>
   </div>
 </template>