feat(widget): Widget 配置、loader 与右下角悬浮入口

生成可嵌入站点的 loader 与悬浮按钮，支持展开收起和移动端；附独立宿主测试页。

frontend/src/composables/useWidgetStyles.ts

@@ -0,0 +1,77 @@
+/*
+Copyright 2024-2026 ReplyPier
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { computed } from 'vue'
+import type { AgentCustomization } from '../types/widget'
+import { isColorDark } from '../types/widget'
+import { resolveWidgetUploadUrl } from '../webclient/widget-env'
+
+// Themed colours now come from the shared design tokens (widget-theme.ts →
+// `--rp-*` vars set on `.chat-container`). These computeds return `var(--rp-*)`
+// references so the widget's existing inline styles resolve to the token values,
+// while user overrides are folded into the vars by `themeCssVars()`.
+export function useWidgetStyles(customization: { value: AgentCustomization }) {
+    const chatStyles = computed(() => ({
+        backgroundColor: 'var(--rp-card)',
+        color: 'var(--rp-text)'
+    }))
+
+    // Launcher icon still follows the dedicated chat_bubble_color.
+    const chatIconStyles = computed(() => ({
+        backgroundColor: customization.value.chat_bubble_color || '#C9F24E',
+        color: isColorDark(customization.value.chat_bubble_color || '#C9F24E') ? '#FFFFFF' : '#000000'
+    }))
+
+    const agentBubbleStyles = computed(() => ({
+        backgroundColor: 'var(--rp-agent-bg)',
+        color: 'var(--rp-text)'
+    }))
+
+    const userBubbleStyles = computed(() => ({
+        backgroundColor: 'var(--rp-accent)',
+        color: 'var(--rp-on-accent)'
+    }))
+
+    const messageNameStyles = computed(() => ({
+        color: 'var(--rp-text)'
+    }))
+
+    const headerBorderStyles = computed(() => ({
+        borderBottom: '1px solid var(--rp-hairline)'
+    }))
+
+    // Signed S3/CDN URLs pass through; local paths are resolved against the
+    // runtime API origin (photo_url already carries the /api/v1 prefix).
+    const photoUrl = computed(() => resolveWidgetUploadUrl(customization.value.photo_url))
+
+    const shadowStyle = computed(() => {
+        const bgColor = customization.value.chat_background_color || '#ffffff'
+        return {
+            boxShadow: `0 8px 5px ${isColorDark(bgColor) ? 'rgba(0, 0, 0, 0.24)' : 'rgba(0, 0, 0, 0.12)'}`
+        }
+    })
+
+    return {
+        chatStyles,
+        chatIconStyles,
+        agentBubbleStyles,
+        userBubbleStyles,
+        messageNameStyles,
+        headerBorderStyles,
+        photoUrl,
+        shadowStyle
+    }
+}