voice-page-agent 2.7.3 → 2.7.4

package/README.md

@@ -51,7 +51,18 @@ Use this shape:
   commandMaxWindowMs: 22000,           // max command listening window
   recognitionLang: "zh-CN",            // SpeechRecognition language
   showAgentWhenWake: true,             // auto-open panel when wake hit
-  autoStart: false                     // start wake on init
+  autoStart: false,                    // start wake on init
+  buttonText: {
+    startText: "开始唤醒",
+    wakeOnText: "语音唤醒中",
+    openText: "打开助手",
+  },
+  buttonStyle: {
+    wakeButtonBackground: "linear-gradient(135deg, #22c1ff, #3366ff)",
+    wakeButtonTextColor: "#ffffff",
+    openButtonBackground: "linear-gradient(135deg, #ffa84a, #ff5f6d)",
+    openButtonTextColor: "#ffffff",
+  }
 }
 ```
 
@@ -72,6 +83,15 @@ app.use(VoicePageAgentPlugin, {
   },
   wakeWord: "布丁布丁",
   enableHomophoneMatch: true,
+  buttonText: {
+    startText: "开始语音",
+    wakeOnText: "语音进行中",
+    openText: "网页助手",
+  },
+  buttonStyle: {
+    wakeButtonBackground: "linear-gradient(135deg, #38bdf8, #2563eb)",
+    openButtonBackground: "linear-gradient(135deg, #f59e0b, #ef4444)",
+  },
 });
 app.mount("#app");
 ```
@@ -101,6 +121,15 @@ Vue.use(VoicePageAgentPlugin, {
     language: "zh-CN",
   },
   wakeWord: "布丁布丁",
+  buttonText: {
+    startText: "开始语音",
+    wakeOnText: "语音进行中",
+    openText: "网页助手",
+  },
+  buttonStyle: {
+    wakeButtonBackground: "linear-gradient(135deg, #38bdf8, #2563eb)",
+    openButtonBackground: "linear-gradient(135deg, #f59e0b, #ef4444)",
+  },
 });
 ```
 
@@ -120,6 +149,15 @@ Vue.use(VoicePageAgentPlugin, {
     language: "zh-CN",
   },
   wakeWord: "布丁布丁",
+  buttonText: {
+    startText: "开始语音",
+    wakeOnText: "语音进行中",
+    openText: "网页助手",
+  },
+  buttonStyle: {
+    wakeButtonBackground: "linear-gradient(135deg, #38bdf8, #2563eb)",
+    openButtonBackground: "linear-gradient(135deg, #f59e0b, #ef4444)",
+  },
 });
 ```
 
@@ -137,7 +175,19 @@ You can use `VoicePageAgentButton` globally after plugin install:
 <VoicePageAgentButton />
 ```
 
-The component injects default styles automatically. You can override these classes in your app:
+The component injects a built-in gradient style (same visual direction across Vue2 / Vue2.7 / Vue3).
+
+You can override by props:
+
+- `startText`
+- `wakeOnText`
+- `openText`
+- `wakeButtonBackground`
+- `wakeButtonTextColor`
+- `openButtonBackground`
+- `openButtonTextColor`
+
+You can also override these classes in your app:
 
 - `.voice-page-agent-root`
 - `.voice-page-agent-actions`

package/dist/index.cjs

@@ -20243,41 +20243,106 @@ var VOICE_PAGE_AGENT_KEY = "VOICE_PAGE_AGENT_INSTANCE";
 var VOICE_PAGE_AGENT_STYLE_ID = "voice-page-agent-style";
 var VOICE_PAGE_AGENT_STYLE_TEXT = `
 .voice-page-agent-root {
+  --voice-page-agent-wake-bg: linear-gradient(135deg, #22c1ff, #3366ff);
+  --voice-page-agent-wake-color: #ffffff;
+  --voice-page-agent-open-bg: linear-gradient(135deg, #ffa84a, #ff5f6d);
+  --voice-page-agent-open-color: #ffffff;
+  --voice-page-agent-status-color: #e2e8f0;
+  --voice-page-agent-surface-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
+  --voice-page-agent-surface-border: rgba(148, 163, 184, 0.3);
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   margin-top: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--voice-page-agent-surface-border);
+  background: var(--voice-page-agent-surface-bg);
+  box-shadow:
+    0 16px 34px -26px rgba(15, 23, 42, 0.9),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+}
+
+.voice-page-agent-root::before {
+  content: "";
+  position: absolute;
+  inset: -35% -10% auto;
+  height: 58%;
+  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0));
+  pointer-events: none;
 }
 
 .voice-page-agent-actions {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
 }
 
 .voice-page-agent-btn {
-  border: 1px solid #d6d6d6;
-  background: #ffffff;
-  color: #1f2937;
+  border: 0;
   border-radius: 999px;
-  padding: 8px 14px;
+  padding: 9px 16px;
   font-size: 13px;
-  line-height: 1.2;
+  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: 0.1px;
   cursor: pointer;
+  box-shadow:
+    0 10px 20px -14px rgba(15, 23, 42, 1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
+}
+
+.voice-page-agent-btn--wake {
+  background: var(--voice-page-agent-wake-bg);
+  color: var(--voice-page-agent-wake-color);
+}
+
+.voice-page-agent-btn--open {
+  background: var(--voice-page-agent-open-bg);
+  color: var(--voice-page-agent-open-color);
 }
 
 .voice-page-agent-btn:hover {
-  border-color: #b9b9b9;
-  background: #f8fafc;
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+  box-shadow:
+    0 14px 24px -14px rgba(15, 23, 42, 0.95),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+.voice-page-agent-btn:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }
 
 .voice-page-agent-status {
   margin: 0;
-  color: #4b5563;
+  position: relative;
+  z-index: 1;
+  color: var(--voice-page-agent-status-color);
   font-size: 13px;
   line-height: 1.4;
+  opacity: 0.95;
 }
 `;
+var DEFAULT_BUTTON_CONFIG = {
+  startText: "\u5F00\u542F\u8BED\u97F3\u5524\u9192",
+  wakeOnText: "\u8BED\u97F3\u5524\u9192\u4E2D",
+  openText: "\u7F51\u9875\u52A9\u624B",
+  wakeButtonBackground: "linear-gradient(135deg, #22c1ff, #3366ff)",
+  wakeButtonTextColor: "#ffffff",
+  openButtonBackground: "linear-gradient(135deg, #ffa84a, #ff5f6d)",
+  openButtonTextColor: "#ffffff"
+};
+var globalButtonConfig = {
+  ...DEFAULT_BUTTON_CONFIG
+};
 var defaultController = null;
 function ensureButtonStyles() {
   if (typeof document === "undefined") return;
@@ -20287,6 +20352,24 @@ function ensureButtonStyles() {
   style.textContent = VOICE_PAGE_AGENT_STYLE_TEXT;
   document.head.appendChild(style);
 }
+function resolveButtonConfig(options) {
+  var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  return {
+    startText: (_b = (_a3 = options == null ? void 0 : options.buttonText) == null ? void 0 : _a3.startText) != null ? _b : DEFAULT_BUTTON_CONFIG.startText,
+    wakeOnText: (_d = (_c = options == null ? void 0 : options.buttonText) == null ? void 0 : _c.wakeOnText) != null ? _d : DEFAULT_BUTTON_CONFIG.wakeOnText,
+    openText: (_f = (_e = options == null ? void 0 : options.buttonText) == null ? void 0 : _e.openText) != null ? _f : DEFAULT_BUTTON_CONFIG.openText,
+    wakeButtonBackground: (_h = (_g = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _g.wakeButtonBackground) != null ? _h : DEFAULT_BUTTON_CONFIG.wakeButtonBackground,
+    wakeButtonTextColor: (_j = (_i = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _i.wakeButtonTextColor) != null ? _j : DEFAULT_BUTTON_CONFIG.wakeButtonTextColor,
+    openButtonBackground: (_l = (_k = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _k.openButtonBackground) != null ? _l : DEFAULT_BUTTON_CONFIG.openButtonBackground,
+    openButtonTextColor: (_n = (_m = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _m.openButtonTextColor) != null ? _n : DEFAULT_BUTTON_CONFIG.openButtonTextColor
+  };
+}
+function applyGlobalButtonConfig(options) {
+  globalButtonConfig = resolveButtonConfig({
+    buttonText: options == null ? void 0 : options.buttonText,
+    buttonStyle: options == null ? void 0 : options.buttonStyle
+  });
+}
 function attachToApp(target, controller) {
   var _a3, _b, _c, _d, _e;
   ensureButtonStyles();
@@ -20325,15 +20408,31 @@ var VoicePageAgentButton = vueDemi.defineComponent({
     },
     startText: {
       type: String,
-      default: "\u5F00\u542F\u8BED\u97F3\u5524\u9192"
+      default: void 0
     },
     wakeOnText: {
       type: String,
-      default: "\u8BED\u97F3\u5524\u9192\u4E2D"
+      default: void 0
     },
     openText: {
       type: String,
-      default: "\u7F51\u9875\u52A9\u624B"
+      default: void 0
+    },
+    wakeButtonBackground: {
+      type: String,
+      default: void 0
+    },
+    wakeButtonTextColor: {
+      type: String,
+      default: void 0
+    },
+    openButtonBackground: {
+      type: String,
+      default: void 0
+    },
+    openButtonTextColor: {
+      type: String,
+      default: void 0
     }
   },
   setup(props) {
@@ -20360,32 +20459,49 @@ var VoicePageAgentButton = vueDemi.defineComponent({
     const handleOpenClick = () => {
       void controller.openAgent();
     };
-    return () => vueDemi.h("div", { class: "voice-page-agent-root" }, [
-      vueDemi.h("div", { class: "voice-page-agent-actions" }, [
-        state.value.supported && !state.value.micPermissionGranted ? vueDemi.h(
-          "button",
-          {
-            type: "button",
-            class: "voice-page-agent-btn",
-            onClick: handleWakeClick
-          },
-          state.value.enabled ? props.wakeOnText : props.startText
-        ) : null,
-        vueDemi.h(
-          "button",
-          {
-            type: "button",
-            class: "voice-page-agent-btn",
-            onClick: handleOpenClick
-          },
-          props.openText
-        )
-      ]),
-      props.showStatus ? vueDemi.h("p", { class: "voice-page-agent-status" }, state.value.message) : null
-    ]);
+    return () => {
+      var _a3, _b, _c, _d, _e, _f, _g;
+      const resolvedStartText = (_a3 = props.startText) != null ? _a3 : globalButtonConfig.startText;
+      const resolvedWakeOnText = (_b = props.wakeOnText) != null ? _b : globalButtonConfig.wakeOnText;
+      const resolvedOpenText = (_c = props.openText) != null ? _c : globalButtonConfig.openText;
+      const resolvedWakeButtonBackground = (_d = props.wakeButtonBackground) != null ? _d : globalButtonConfig.wakeButtonBackground;
+      const resolvedWakeButtonTextColor = (_e = props.wakeButtonTextColor) != null ? _e : globalButtonConfig.wakeButtonTextColor;
+      const resolvedOpenButtonBackground = (_f = props.openButtonBackground) != null ? _f : globalButtonConfig.openButtonBackground;
+      const resolvedOpenButtonTextColor = (_g = props.openButtonTextColor) != null ? _g : globalButtonConfig.openButtonTextColor;
+      const rootStyle = {
+        "--voice-page-agent-wake-bg": resolvedWakeButtonBackground,
+        "--voice-page-agent-wake-color": resolvedWakeButtonTextColor,
+        "--voice-page-agent-open-bg": resolvedOpenButtonBackground,
+        "--voice-page-agent-open-color": resolvedOpenButtonTextColor
+      };
+      return vueDemi.h("div", { class: "voice-page-agent-root", style: rootStyle }, [
+        vueDemi.h("div", { class: "voice-page-agent-actions" }, [
+          state.value.supported && !state.value.micPermissionGranted ? vueDemi.h(
+            "button",
+            {
+              type: "button",
+              class: "voice-page-agent-btn voice-page-agent-btn--wake",
+              onClick: handleWakeClick
+            },
+            state.value.enabled ? resolvedWakeOnText : resolvedStartText
+          ) : null,
+          vueDemi.h(
+            "button",
+            {
+              type: "button",
+              class: "voice-page-agent-btn voice-page-agent-btn--open",
+              onClick: handleOpenClick
+            },
+            resolvedOpenText
+          )
+        ]),
+        props.showStatus ? vueDemi.h("p", { class: "voice-page-agent-status" }, state.value.message) : null
+      ]);
+    };
   }
 });
 function createVoicePageAgentPlugin(options) {
+  applyGlobalButtonConfig(options);
   const controller = createVoicePageAgent(options);
   defaultController = controller;
   return {
@@ -20400,6 +20516,7 @@ var VoicePageAgentVuePlugin = {
     if (!options) {
       throw new Error("voice-page-agent: install options is required.");
     }
+    applyGlobalButtonConfig(options);
     const plugin = createVoicePageAgentPlugin(options);
     VoicePageAgentVuePlugin.controller = plugin.controller;
     attachToApp(app, plugin.controller);

package/dist/index.d.cts

@@ -16,6 +16,17 @@ type RuntimePageAgent = {
     execute: (task: string) => Promise<unknown>;
     status?: "idle" | "running" | "completed" | "error" | string;
 };
+type VoicePageAgentButtonTextOptions = {
+    startText?: string;
+    wakeOnText?: string;
+    openText?: string;
+};
+type VoicePageAgentButtonStyleOptions = {
+    wakeButtonBackground?: string;
+    wakeButtonTextColor?: string;
+    openButtonBackground?: string;
+    openButtonTextColor?: string;
+};
 type VoicePageAgentOptions = {
     pageAgent: Record<string, unknown>;
     wakeWord?: string | string[];
@@ -27,6 +38,8 @@ type VoicePageAgentOptions = {
     recognitionLang?: string;
     showAgentWhenWake?: boolean;
     autoStart?: boolean;
+    buttonText?: VoicePageAgentButtonTextOptions;
+    buttonStyle?: VoicePageAgentButtonStyleOptions;
 };
 type ResolvedVoicePageAgentOptions = {
     pageAgent: Record<string, unknown>;
@@ -39,6 +52,8 @@ type ResolvedVoicePageAgentOptions = {
     recognitionLang: string;
     showAgentWhenWake: boolean;
     autoStart: boolean;
+    buttonText?: VoicePageAgentButtonTextOptions;
+    buttonStyle?: VoicePageAgentButtonStyleOptions;
 };
 type VoiceStateListener = (state: VoicePageAgentState) => void;
 
@@ -106,15 +121,31 @@ declare const VoicePageAgentButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     startText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     wakeOnText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     openText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    wakeButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    wakeButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -125,21 +156,41 @@ declare const VoicePageAgentButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     startText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     wakeOnText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     openText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    wakeButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    wakeButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
     showStatus: boolean;
     startText: string;
     wakeOnText: string;
     openText: string;
+    wakeButtonBackground: string;
+    wakeButtonTextColor: string;
+    openButtonBackground: string;
+    openButtonTextColor: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type VoicePageAgentPlugin = {
     install: (app: unknown, options?: VoicePageAgentOptions) => void;
@@ -148,4 +199,4 @@ type VoicePageAgentPlugin = {
 declare function createVoicePageAgentPlugin(options: VoicePageAgentOptions): VoicePageAgentPlugin;
 declare const VoicePageAgentVuePlugin: VoicePageAgentPlugin;
 
-export { type ResolvedVoicePageAgentOptions, type RuntimePageAgent, VoicePageAgentButton, VoicePageAgentController, type VoicePageAgentOptions, VoicePageAgentVuePlugin as VoicePageAgentPlugin, type VoicePageAgentState, type VoiceStateListener, type VoiceStateStatus, createVoicePageAgent, createVoicePageAgentPlugin, VoicePageAgentVuePlugin as default, useVoicePageAgent };
+export { type ResolvedVoicePageAgentOptions, type RuntimePageAgent, VoicePageAgentButton, type VoicePageAgentButtonStyleOptions, type VoicePageAgentButtonTextOptions, VoicePageAgentController, type VoicePageAgentOptions, VoicePageAgentVuePlugin as VoicePageAgentPlugin, type VoicePageAgentState, type VoiceStateListener, type VoiceStateStatus, createVoicePageAgent, createVoicePageAgentPlugin, VoicePageAgentVuePlugin as default, useVoicePageAgent };

package/dist/index.d.ts

@@ -16,6 +16,17 @@ type RuntimePageAgent = {
     execute: (task: string) => Promise<unknown>;
     status?: "idle" | "running" | "completed" | "error" | string;
 };
+type VoicePageAgentButtonTextOptions = {
+    startText?: string;
+    wakeOnText?: string;
+    openText?: string;
+};
+type VoicePageAgentButtonStyleOptions = {
+    wakeButtonBackground?: string;
+    wakeButtonTextColor?: string;
+    openButtonBackground?: string;
+    openButtonTextColor?: string;
+};
 type VoicePageAgentOptions = {
     pageAgent: Record<string, unknown>;
     wakeWord?: string | string[];
@@ -27,6 +38,8 @@ type VoicePageAgentOptions = {
     recognitionLang?: string;
     showAgentWhenWake?: boolean;
     autoStart?: boolean;
+    buttonText?: VoicePageAgentButtonTextOptions;
+    buttonStyle?: VoicePageAgentButtonStyleOptions;
 };
 type ResolvedVoicePageAgentOptions = {
     pageAgent: Record<string, unknown>;
@@ -39,6 +52,8 @@ type ResolvedVoicePageAgentOptions = {
     recognitionLang: string;
     showAgentWhenWake: boolean;
     autoStart: boolean;
+    buttonText?: VoicePageAgentButtonTextOptions;
+    buttonStyle?: VoicePageAgentButtonStyleOptions;
 };
 type VoiceStateListener = (state: VoicePageAgentState) => void;
 
@@ -106,15 +121,31 @@ declare const VoicePageAgentButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     startText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     wakeOnText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     openText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    wakeButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    wakeButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -125,21 +156,41 @@ declare const VoicePageAgentButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     startText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     wakeOnText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     openText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    wakeButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    wakeButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonBackground: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    openButtonTextColor: {
+        type: StringConstructor;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
     showStatus: boolean;
     startText: string;
     wakeOnText: string;
     openText: string;
+    wakeButtonBackground: string;
+    wakeButtonTextColor: string;
+    openButtonBackground: string;
+    openButtonTextColor: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type VoicePageAgentPlugin = {
     install: (app: unknown, options?: VoicePageAgentOptions) => void;
@@ -148,4 +199,4 @@ type VoicePageAgentPlugin = {
 declare function createVoicePageAgentPlugin(options: VoicePageAgentOptions): VoicePageAgentPlugin;
 declare const VoicePageAgentVuePlugin: VoicePageAgentPlugin;
 
-export { type ResolvedVoicePageAgentOptions, type RuntimePageAgent, VoicePageAgentButton, VoicePageAgentController, type VoicePageAgentOptions, VoicePageAgentVuePlugin as VoicePageAgentPlugin, type VoicePageAgentState, type VoiceStateListener, type VoiceStateStatus, createVoicePageAgent, createVoicePageAgentPlugin, VoicePageAgentVuePlugin as default, useVoicePageAgent };
+export { type ResolvedVoicePageAgentOptions, type RuntimePageAgent, VoicePageAgentButton, type VoicePageAgentButtonStyleOptions, type VoicePageAgentButtonTextOptions, VoicePageAgentController, type VoicePageAgentOptions, VoicePageAgentVuePlugin as VoicePageAgentPlugin, type VoicePageAgentState, type VoiceStateListener, type VoiceStateStatus, createVoicePageAgent, createVoicePageAgentPlugin, VoicePageAgentVuePlugin as default, useVoicePageAgent };

package/dist/index.js

@@ -478,41 +478,106 @@ var VOICE_PAGE_AGENT_KEY = "VOICE_PAGE_AGENT_INSTANCE";
 var VOICE_PAGE_AGENT_STYLE_ID = "voice-page-agent-style";
 var VOICE_PAGE_AGENT_STYLE_TEXT = `
 .voice-page-agent-root {
+  --voice-page-agent-wake-bg: linear-gradient(135deg, #22c1ff, #3366ff);
+  --voice-page-agent-wake-color: #ffffff;
+  --voice-page-agent-open-bg: linear-gradient(135deg, #ffa84a, #ff5f6d);
+  --voice-page-agent-open-color: #ffffff;
+  --voice-page-agent-status-color: #e2e8f0;
+  --voice-page-agent-surface-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
+  --voice-page-agent-surface-border: rgba(148, 163, 184, 0.3);
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   margin-top: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--voice-page-agent-surface-border);
+  background: var(--voice-page-agent-surface-bg);
+  box-shadow:
+    0 16px 34px -26px rgba(15, 23, 42, 0.9),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+}
+
+.voice-page-agent-root::before {
+  content: "";
+  position: absolute;
+  inset: -35% -10% auto;
+  height: 58%;
+  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0));
+  pointer-events: none;
 }
 
 .voice-page-agent-actions {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
 }
 
 .voice-page-agent-btn {
-  border: 1px solid #d6d6d6;
-  background: #ffffff;
-  color: #1f2937;
+  border: 0;
   border-radius: 999px;
-  padding: 8px 14px;
+  padding: 9px 16px;
   font-size: 13px;
-  line-height: 1.2;
+  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: 0.1px;
   cursor: pointer;
+  box-shadow:
+    0 10px 20px -14px rgba(15, 23, 42, 1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
+}
+
+.voice-page-agent-btn--wake {
+  background: var(--voice-page-agent-wake-bg);
+  color: var(--voice-page-agent-wake-color);
+}
+
+.voice-page-agent-btn--open {
+  background: var(--voice-page-agent-open-bg);
+  color: var(--voice-page-agent-open-color);
 }
 
 .voice-page-agent-btn:hover {
-  border-color: #b9b9b9;
-  background: #f8fafc;
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+  box-shadow:
+    0 14px 24px -14px rgba(15, 23, 42, 0.95),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+.voice-page-agent-btn:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
 }
 
 .voice-page-agent-status {
   margin: 0;
-  color: #4b5563;
+  position: relative;
+  z-index: 1;
+  color: var(--voice-page-agent-status-color);
   font-size: 13px;
   line-height: 1.4;
+  opacity: 0.95;
 }
 `;
+var DEFAULT_BUTTON_CONFIG = {
+  startText: "\u5F00\u542F\u8BED\u97F3\u5524\u9192",
+  wakeOnText: "\u8BED\u97F3\u5524\u9192\u4E2D",
+  openText: "\u7F51\u9875\u52A9\u624B",
+  wakeButtonBackground: "linear-gradient(135deg, #22c1ff, #3366ff)",
+  wakeButtonTextColor: "#ffffff",
+  openButtonBackground: "linear-gradient(135deg, #ffa84a, #ff5f6d)",
+  openButtonTextColor: "#ffffff"
+};
+var globalButtonConfig = {
+  ...DEFAULT_BUTTON_CONFIG
+};
 var defaultController = null;
 function ensureButtonStyles() {
   if (typeof document === "undefined") return;
@@ -522,6 +587,24 @@ function ensureButtonStyles() {
   style.textContent = VOICE_PAGE_AGENT_STYLE_TEXT;
   document.head.appendChild(style);
 }
+function resolveButtonConfig(options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  return {
+    startText: (_b = (_a = options == null ? void 0 : options.buttonText) == null ? void 0 : _a.startText) != null ? _b : DEFAULT_BUTTON_CONFIG.startText,
+    wakeOnText: (_d = (_c = options == null ? void 0 : options.buttonText) == null ? void 0 : _c.wakeOnText) != null ? _d : DEFAULT_BUTTON_CONFIG.wakeOnText,
+    openText: (_f = (_e = options == null ? void 0 : options.buttonText) == null ? void 0 : _e.openText) != null ? _f : DEFAULT_BUTTON_CONFIG.openText,
+    wakeButtonBackground: (_h = (_g = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _g.wakeButtonBackground) != null ? _h : DEFAULT_BUTTON_CONFIG.wakeButtonBackground,
+    wakeButtonTextColor: (_j = (_i = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _i.wakeButtonTextColor) != null ? _j : DEFAULT_BUTTON_CONFIG.wakeButtonTextColor,
+    openButtonBackground: (_l = (_k = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _k.openButtonBackground) != null ? _l : DEFAULT_BUTTON_CONFIG.openButtonBackground,
+    openButtonTextColor: (_n = (_m = options == null ? void 0 : options.buttonStyle) == null ? void 0 : _m.openButtonTextColor) != null ? _n : DEFAULT_BUTTON_CONFIG.openButtonTextColor
+  };
+}
+function applyGlobalButtonConfig(options) {
+  globalButtonConfig = resolveButtonConfig({
+    buttonText: options == null ? void 0 : options.buttonText,
+    buttonStyle: options == null ? void 0 : options.buttonStyle
+  });
+}
 function attachToApp(target, controller) {
   var _a, _b, _c, _d, _e;
   ensureButtonStyles();
@@ -560,15 +643,31 @@ var VoicePageAgentButton = defineComponent({
     },
     startText: {
       type: String,
-      default: "\u5F00\u542F\u8BED\u97F3\u5524\u9192"
+      default: void 0
     },
     wakeOnText: {
       type: String,
-      default: "\u8BED\u97F3\u5524\u9192\u4E2D"
+      default: void 0
     },
     openText: {
       type: String,
-      default: "\u7F51\u9875\u52A9\u624B"
+      default: void 0
+    },
+    wakeButtonBackground: {
+      type: String,
+      default: void 0
+    },
+    wakeButtonTextColor: {
+      type: String,
+      default: void 0
+    },
+    openButtonBackground: {
+      type: String,
+      default: void 0
+    },
+    openButtonTextColor: {
+      type: String,
+      default: void 0
     }
   },
   setup(props) {
@@ -595,32 +694,49 @@ var VoicePageAgentButton = defineComponent({
     const handleOpenClick = () => {
       void controller.openAgent();
     };
-    return () => h("div", { class: "voice-page-agent-root" }, [
-      h("div", { class: "voice-page-agent-actions" }, [
-        state.value.supported && !state.value.micPermissionGranted ? h(
-          "button",
-          {
-            type: "button",
-            class: "voice-page-agent-btn",
-            onClick: handleWakeClick
-          },
-          state.value.enabled ? props.wakeOnText : props.startText
-        ) : null,
-        h(
-          "button",
-          {
-            type: "button",
-            class: "voice-page-agent-btn",
-            onClick: handleOpenClick
-          },
-          props.openText
-        )
-      ]),
-      props.showStatus ? h("p", { class: "voice-page-agent-status" }, state.value.message) : null
-    ]);
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const resolvedStartText = (_a = props.startText) != null ? _a : globalButtonConfig.startText;
+      const resolvedWakeOnText = (_b = props.wakeOnText) != null ? _b : globalButtonConfig.wakeOnText;
+      const resolvedOpenText = (_c = props.openText) != null ? _c : globalButtonConfig.openText;
+      const resolvedWakeButtonBackground = (_d = props.wakeButtonBackground) != null ? _d : globalButtonConfig.wakeButtonBackground;
+      const resolvedWakeButtonTextColor = (_e = props.wakeButtonTextColor) != null ? _e : globalButtonConfig.wakeButtonTextColor;
+      const resolvedOpenButtonBackground = (_f = props.openButtonBackground) != null ? _f : globalButtonConfig.openButtonBackground;
+      const resolvedOpenButtonTextColor = (_g = props.openButtonTextColor) != null ? _g : globalButtonConfig.openButtonTextColor;
+      const rootStyle = {
+        "--voice-page-agent-wake-bg": resolvedWakeButtonBackground,
+        "--voice-page-agent-wake-color": resolvedWakeButtonTextColor,
+        "--voice-page-agent-open-bg": resolvedOpenButtonBackground,
+        "--voice-page-agent-open-color": resolvedOpenButtonTextColor
+      };
+      return h("div", { class: "voice-page-agent-root", style: rootStyle }, [
+        h("div", { class: "voice-page-agent-actions" }, [
+          state.value.supported && !state.value.micPermissionGranted ? h(
+            "button",
+            {
+              type: "button",
+              class: "voice-page-agent-btn voice-page-agent-btn--wake",
+              onClick: handleWakeClick
+            },
+            state.value.enabled ? resolvedWakeOnText : resolvedStartText
+          ) : null,
+          h(
+            "button",
+            {
+              type: "button",
+              class: "voice-page-agent-btn voice-page-agent-btn--open",
+              onClick: handleOpenClick
+            },
+            resolvedOpenText
+          )
+        ]),
+        props.showStatus ? h("p", { class: "voice-page-agent-status" }, state.value.message) : null
+      ]);
+    };
   }
 });
 function createVoicePageAgentPlugin(options) {
+  applyGlobalButtonConfig(options);
   const controller = createVoicePageAgent(options);
   defaultController = controller;
   return {
@@ -635,6 +751,7 @@ var VoicePageAgentVuePlugin = {
     if (!options) {
       throw new Error("voice-page-agent: install options is required.");
     }
+    applyGlobalButtonConfig(options);
     const plugin = createVoicePageAgentPlugin(options);
     VoicePageAgentVuePlugin.controller = plugin.controller;
     attachToApp(app, plugin.controller);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voice-page-agent",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "Voice wake plugin for page-agent with Vue2/Vue3 compatibility.",
   "license": "MIT",
   "type": "module",
@@ -49,5 +49,6 @@
     "@types/node": "^22.10.1",
     "tsup": "^8.4.0",
     "typescript": "^5.7.2"
-  }
+  },
+  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264"
 }