From b7730f861728a2c13bb2e910daa5935de8d73c9c Mon Sep 17 00:00:00 2001
From: hxuanyu <2252193204@qq.com>
Date: Fri, 27 Jun 2025 10:49:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=90=84=E5=B0=8F=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=95=8C=E9=9D=A2=E6=B7=BB=E5=8A=A0=E9=A2=84?=
 =?UTF-8?q?=E8=AE=BE=E6=A0=B7=E5=BC=8F=E9=80=89=E9=A1=B9=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ConfigView.vue     | 53 ++++++++++++++++++++++++++----------
 src/widgets/clock/Config.vue | 23 +++++++++-------
 src/widgets/date/Config.vue  | 21 ++++++++------
 src/widgets/image/Config.vue | 21 ++++++++------
 src/widgets/text/Config.vue  | 21 ++++++++------
 5 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue
index 8cf46a3..6690fe5 100644
--- a/src/views/ConfigView.vue
+++ b/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">
-            <template #append>
-              <el-button @click="copyUrl">
+          <div class="url-input-group">
+            <el-input v-model="generatedUrl" readonly size="large" />
+            <div class="button-group">
+              <el-button @click="copyUrl" size="large">
                 <el-icon><CopyDocument /></el-icon> 复制
               </el-button>
-            </template>
-          </el-input>
+              <el-button @click="openPreview" size="large">
+                <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生成器固定在底部 */
-  margin-top: auto;
+  /* URL生成器固定在顶部 */
+  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%;
diff --git a/src/widgets/clock/Config.vue b/src/widgets/clock/Config.vue
index acf850f..43eefe3 100644
--- a/src/widgets/clock/Config.vue
+++ b/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>
diff --git a/src/widgets/date/Config.vue b/src/widgets/date/Config.vue
index 93024bc..843e55b 100644
--- a/src/widgets/date/Config.vue
+++ b/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>
diff --git a/src/widgets/image/Config.vue b/src/widgets/image/Config.vue
index 6500901..f5f9930 100644
--- a/src/widgets/image/Config.vue
+++ b/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>
diff --git a/src/widgets/text/Config.vue b/src/widgets/text/Config.vue
index 0980ff7..e1c1d87 100644
--- a/src/widgets/text/Config.vue
+++ b/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>