@vite-plugin-opencode-assistant/components 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/open-code-widget/composables/use-inspector.js +34 -4
- package/es/open-code-widget/composables/use-widget.d.ts +4 -0
- package/es/open-code-widget/composables/use-widget.js +40 -3
- package/es/open-code-widget/src/components/Frame.vue.js +52 -2
- package/es/open-code-widget/src/components/Header-sfc.css +1 -1
- package/es/open-code-widget/src/components/Header.vue.d.ts +4 -2
- package/es/open-code-widget/src/components/Header.vue.js +87 -13
- package/es/open-code-widget/src/components/SelectHint-sfc.css +1 -1
- package/es/open-code-widget/src/components/SessionList-sfc.css +1 -1
- package/es/open-code-widget/src/context.d.ts +2 -0
- package/es/open-code-widget/src/index-sfc.css +1 -1
- package/es/open-code-widget/src/index.vue.d.ts +5 -1
- package/es/open-code-widget/src/index.vue.js +12 -4
- package/es/open-code-widget/src/types.d.ts +2 -0
- package/lib/@vite-plugin-opencode-assistant/components.cjs.js +239 -57
- package/lib/@vite-plugin-opencode-assistant/components.es.js +240 -58
- package/lib/components.css +4 -4
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/open-code-widget/composables/use-inspector.js +34 -4
- package/lib/open-code-widget/composables/use-widget.d.ts +4 -0
- package/lib/open-code-widget/composables/use-widget.js +39 -2
- package/lib/open-code-widget/src/components/Frame.vue.js +69 -21
- package/lib/open-code-widget/src/components/Header-sfc.css +1 -1
- package/lib/open-code-widget/src/components/Header.vue.d.ts +4 -2
- package/lib/open-code-widget/src/components/Header.vue.js +102 -28
- package/lib/open-code-widget/src/components/SelectHint-sfc.css +1 -1
- package/lib/open-code-widget/src/components/SessionList-sfc.css +1 -1
- package/lib/open-code-widget/src/context.d.ts +2 -0
- package/lib/open-code-widget/src/index-sfc.css +1 -1
- package/lib/open-code-widget/src/index.vue.d.ts +5 -1
- package/lib/open-code-widget/src/index.vue.js +12 -4
- package/lib/open-code-widget/src/types.d.ts +2 -0
- package/lib/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type Ref } from "vue";
|
|
2
|
+
import type { OpenCodeWidgetTheme } from "../src/types";
|
|
2
3
|
export interface UseWidgetOptions {
|
|
3
4
|
position: Ref<string>;
|
|
4
5
|
theme: Ref<string>;
|
|
@@ -11,14 +12,17 @@ export interface UseWidgetOptions {
|
|
|
11
12
|
onClose: () => void;
|
|
12
13
|
onToggleSessionList: (collapsed: boolean) => void;
|
|
13
14
|
onEmptyAction: () => void;
|
|
15
|
+
onToggleTheme?: (theme: OpenCodeWidgetTheme) => void;
|
|
14
16
|
}
|
|
15
17
|
export declare function useWidget(options: UseWidgetOptions): {
|
|
16
18
|
buttonActive: import("vue").ComputedRef<boolean>;
|
|
17
19
|
containerClasses: import("vue").ComputedRef<string[]>;
|
|
18
20
|
iframeSource: import("vue").ComputedRef<string>;
|
|
19
21
|
sessionListTitle: import("vue").ComputedRef<"展开会话列表" | "折叠会话列表">;
|
|
22
|
+
resolvedTheme: import("vue").ComputedRef<"light" | "dark">;
|
|
20
23
|
handleClose: () => void;
|
|
21
24
|
handleEmptyAction: () => void;
|
|
22
25
|
handleToggle: () => void;
|
|
23
26
|
handleToggleSessionList: () => void;
|
|
27
|
+
handleToggleTheme: () => void;
|
|
24
28
|
};
|
|
@@ -21,11 +21,39 @@ __export(use_widget_exports, {
|
|
|
21
21
|
});
|
|
22
22
|
module.exports = __toCommonJS(use_widget_exports);
|
|
23
23
|
var import_vue = require("vue");
|
|
24
|
+
const THEME_CYCLE = ["auto", "light", "dark"];
|
|
24
25
|
function useWidget(options) {
|
|
26
|
+
const systemTheme = (0, import_vue.ref)("light");
|
|
27
|
+
function getSystemTheme() {
|
|
28
|
+
if (typeof window === "undefined") return "light";
|
|
29
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
30
|
+
}
|
|
31
|
+
let mediaQuery = null;
|
|
32
|
+
let handleChange = null;
|
|
33
|
+
(0, import_vue.onMounted)(() => {
|
|
34
|
+
if (typeof window === "undefined") return;
|
|
35
|
+
systemTheme.value = getSystemTheme();
|
|
36
|
+
mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
37
|
+
handleChange = (e) => {
|
|
38
|
+
systemTheme.value = e.matches ? "dark" : "light";
|
|
39
|
+
};
|
|
40
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
41
|
+
});
|
|
42
|
+
(0, import_vue.onUnmounted)(() => {
|
|
43
|
+
if (mediaQuery && handleChange) {
|
|
44
|
+
mediaQuery.removeEventListener("change", handleChange);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
const resolvedTheme = (0, import_vue.computed)(() => {
|
|
48
|
+
if (options.theme.value === "auto") {
|
|
49
|
+
return systemTheme.value;
|
|
50
|
+
}
|
|
51
|
+
return options.theme.value;
|
|
52
|
+
});
|
|
25
53
|
const containerClasses = (0, import_vue.computed)(() => [
|
|
26
54
|
"opencode-widget",
|
|
27
55
|
options.position.value,
|
|
28
|
-
`opencode-theme-${
|
|
56
|
+
`opencode-theme-${resolvedTheme.value}`
|
|
29
57
|
]);
|
|
30
58
|
const buttonActive = (0, import_vue.computed)(() => !!(options.open.value || options.selectMode.value));
|
|
31
59
|
const iframeSource = (0, import_vue.computed)(() => options.iframeSrc.value || "about:blank");
|
|
@@ -50,14 +78,23 @@ function useWidget(options) {
|
|
|
50
78
|
function handleEmptyAction() {
|
|
51
79
|
options.onEmptyAction();
|
|
52
80
|
}
|
|
81
|
+
function handleToggleTheme() {
|
|
82
|
+
var _a;
|
|
83
|
+
const currentIndex = THEME_CYCLE.indexOf(options.theme.value);
|
|
84
|
+
const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
|
|
85
|
+
const nextTheme = THEME_CYCLE[nextIndex];
|
|
86
|
+
(_a = options.onToggleTheme) == null ? void 0 : _a.call(options, nextTheme);
|
|
87
|
+
}
|
|
53
88
|
return {
|
|
54
89
|
buttonActive,
|
|
55
90
|
containerClasses,
|
|
56
91
|
iframeSource,
|
|
57
92
|
sessionListTitle,
|
|
93
|
+
resolvedTheme,
|
|
58
94
|
handleClose,
|
|
59
95
|
handleEmptyAction,
|
|
60
96
|
handleToggle,
|
|
61
|
-
handleToggleSessionList
|
|
97
|
+
handleToggleSessionList,
|
|
98
|
+
handleToggleTheme
|
|
62
99
|
};
|
|
63
100
|
}
|
|
@@ -1,7 +1,21 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
5
19
|
var __export = (target, all) => {
|
|
6
20
|
for (var name in all)
|
|
7
21
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -22,21 +36,54 @@ __export(Frame_vue_exports, {
|
|
|
22
36
|
module.exports = __toCommonJS(Frame_vue_exports);
|
|
23
37
|
var import_Frame_sfc = require("./Frame-sfc.css");
|
|
24
38
|
var import_vue = require("vue");
|
|
25
|
-
var import_context = require("../context");
|
|
26
39
|
var import_vue2 = require("vue");
|
|
40
|
+
var import_context = require("../context");
|
|
41
|
+
var import_vue3 = require("vue");
|
|
27
42
|
const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
|
|
28
43
|
__name: "Frame",
|
|
29
44
|
setup(__props, { expose: __expose }) {
|
|
30
45
|
__expose();
|
|
46
|
+
const iframeRef = (0, import_vue2.ref)(null);
|
|
31
47
|
const {
|
|
32
48
|
loading,
|
|
33
49
|
showEmptyState,
|
|
34
50
|
iframeSource: iframeSrc,
|
|
35
51
|
emptyStateText,
|
|
36
52
|
emptyStateActionText,
|
|
37
|
-
handleEmptyAction
|
|
53
|
+
handleEmptyAction,
|
|
54
|
+
theme,
|
|
55
|
+
resolvedTheme
|
|
38
56
|
} = (0, import_context.useOpenCodeWidgetContext)();
|
|
39
|
-
const
|
|
57
|
+
const iframeReady = (0, import_vue2.ref)(false);
|
|
58
|
+
function sendMessageToIframe(type, data) {
|
|
59
|
+
var _a;
|
|
60
|
+
if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
|
|
61
|
+
iframeRef.value.contentWindow.postMessage(__spreadValues({ type }, data), "*");
|
|
62
|
+
}
|
|
63
|
+
function syncIframeTheme() {
|
|
64
|
+
sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
|
|
65
|
+
}
|
|
66
|
+
function handleIframeMessage(event) {
|
|
67
|
+
var _a;
|
|
68
|
+
if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
|
|
69
|
+
syncIframeTheme();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
(0, import_vue2.watch)([theme, resolvedTheme], () => {
|
|
73
|
+
syncIframeTheme();
|
|
74
|
+
});
|
|
75
|
+
(0, import_vue2.onMounted)(() => {
|
|
76
|
+
if (iframeRef.value) {
|
|
77
|
+
iframeRef.value.addEventListener("load", () => {
|
|
78
|
+
iframeReady.value = true;
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
window.addEventListener("message", handleIframeMessage);
|
|
82
|
+
});
|
|
83
|
+
(0, import_vue2.onUnmounted)(() => {
|
|
84
|
+
window.removeEventListener("message", handleIframeMessage);
|
|
85
|
+
});
|
|
86
|
+
const __returned__ = { iframeRef, loading, showEmptyState, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
|
|
40
87
|
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
|
|
41
88
|
return __returned__;
|
|
42
89
|
}
|
|
@@ -45,19 +92,19 @@ const _hoisted_1 = { class: "opencode-iframe-container" };
|
|
|
45
92
|
const _hoisted_2 = { class: "opencode-empty-state-text" };
|
|
46
93
|
const _hoisted_3 = ["src"];
|
|
47
94
|
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
48
|
-
return (0,
|
|
49
|
-
(0,
|
|
95
|
+
return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_1, [
|
|
96
|
+
(0, import_vue3.createElementVNode)(
|
|
50
97
|
"div",
|
|
51
98
|
{
|
|
52
|
-
class: (0,
|
|
99
|
+
class: (0, import_vue3.normalizeClass)(["opencode-empty-state-overlay", { visible: $setup.showEmptyState }])
|
|
53
100
|
},
|
|
54
101
|
[
|
|
55
|
-
(0,
|
|
56
|
-
_cache[1] || (_cache[1] = (0,
|
|
102
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "empty-state", {}, () => [
|
|
103
|
+
_cache[1] || (_cache[1] = (0, import_vue3.createElementVNode)(
|
|
57
104
|
"div",
|
|
58
105
|
{ class: "opencode-empty-state-icon" },
|
|
59
106
|
[
|
|
60
|
-
(0,
|
|
107
|
+
(0, import_vue3.createElementVNode)("svg", {
|
|
61
108
|
viewBox: "0 0 24 24",
|
|
62
109
|
width: "48",
|
|
63
110
|
height: "48",
|
|
@@ -66,7 +113,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
66
113
|
"stroke-width": "1.5",
|
|
67
114
|
"aria-hidden": "true"
|
|
68
115
|
}, [
|
|
69
|
-
(0,
|
|
116
|
+
(0, import_vue3.createElementVNode)("path", {
|
|
70
117
|
"stroke-linecap": "round",
|
|
71
118
|
"stroke-linejoin": "round",
|
|
72
119
|
d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
@@ -76,21 +123,21 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
76
123
|
-1
|
|
77
124
|
/* CACHED */
|
|
78
125
|
)),
|
|
79
|
-
(0,
|
|
126
|
+
(0, import_vue3.createElementVNode)(
|
|
80
127
|
"div",
|
|
81
128
|
_hoisted_2,
|
|
82
|
-
(0,
|
|
129
|
+
(0, import_vue3.toDisplayString)($setup.emptyStateText),
|
|
83
130
|
1
|
|
84
131
|
/* TEXT */
|
|
85
132
|
),
|
|
86
|
-
(0,
|
|
133
|
+
(0, import_vue3.createElementVNode)(
|
|
87
134
|
"button",
|
|
88
135
|
{
|
|
89
136
|
class: "opencode-empty-state-btn",
|
|
90
137
|
type: "button",
|
|
91
138
|
onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleEmptyAction && $setup.handleEmptyAction(...args))
|
|
92
139
|
},
|
|
93
|
-
(0,
|
|
140
|
+
(0, import_vue3.toDisplayString)($setup.emptyStateActionText),
|
|
94
141
|
1
|
|
95
142
|
/* TEXT */
|
|
96
143
|
)
|
|
@@ -99,21 +146,21 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
99
146
|
2
|
|
100
147
|
/* CLASS */
|
|
101
148
|
),
|
|
102
|
-
(0,
|
|
149
|
+
(0, import_vue3.createElementVNode)(
|
|
103
150
|
"div",
|
|
104
151
|
{
|
|
105
|
-
class: (0,
|
|
152
|
+
class: (0, import_vue3.normalizeClass)(["opencode-loading-overlay", { visible: $setup.loading }])
|
|
106
153
|
},
|
|
107
154
|
[
|
|
108
|
-
(0,
|
|
109
|
-
_cache[2] || (_cache[2] = (0,
|
|
155
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "loading", {}, () => [
|
|
156
|
+
_cache[2] || (_cache[2] = (0, import_vue3.createElementVNode)(
|
|
110
157
|
"div",
|
|
111
158
|
{ class: "opencode-loading-spinner" },
|
|
112
159
|
null,
|
|
113
160
|
-1
|
|
114
161
|
/* CACHED */
|
|
115
162
|
)),
|
|
116
|
-
_cache[3] || (_cache[3] = (0,
|
|
163
|
+
_cache[3] || (_cache[3] = (0, import_vue3.createElementVNode)(
|
|
117
164
|
"div",
|
|
118
165
|
{ class: "opencode-loading-text" },
|
|
119
166
|
"\u52A0\u8F7D\u4E2D...",
|
|
@@ -125,8 +172,9 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
125
172
|
2
|
|
126
173
|
/* CLASS */
|
|
127
174
|
),
|
|
128
|
-
(0,
|
|
129
|
-
(0,
|
|
175
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "content", {}, () => [
|
|
176
|
+
(0, import_vue3.createElementVNode)("iframe", {
|
|
177
|
+
ref: "iframeRef",
|
|
130
178
|
class: "opencode-iframe",
|
|
131
179
|
src: $setup.iframeSrc,
|
|
132
180
|
allow: "clipboard-write; clipboard-read",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active{background:var(--oc-primary);color:#fff}
|
|
1
|
+
.opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active,.opencode-header-btn.session-toggle.active{background:var(--oc-primary);color:#fff}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
|
|
1
|
+
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
|
|
2
2
|
type __VLS_Slots = {} & {
|
|
3
3
|
'session-toggle-icon'?: (props: typeof __VLS_1) => any;
|
|
4
4
|
} & {
|
|
5
5
|
'select-icon'?: (props: typeof __VLS_3) => any;
|
|
6
6
|
} & {
|
|
7
|
-
'
|
|
7
|
+
'theme-icon'?: (props: typeof __VLS_5) => any;
|
|
8
|
+
} & {
|
|
9
|
+
'close-icon'?: (props: typeof __VLS_7) => any;
|
|
8
10
|
};
|
|
9
11
|
declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
12
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -22,8 +22,9 @@ __export(Header_vue_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(Header_vue_exports);
|
|
23
23
|
var import_Header_sfc = require("./Header-sfc.css");
|
|
24
24
|
var import_vue = require("vue");
|
|
25
|
-
var import_context = require("../context");
|
|
26
25
|
var import_vue2 = require("vue");
|
|
26
|
+
var import_context = require("../context");
|
|
27
|
+
var import_vue3 = require("vue");
|
|
27
28
|
const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
|
|
28
29
|
__name: "Header",
|
|
29
30
|
setup(__props, { expose: __expose }) {
|
|
@@ -34,11 +35,30 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
|
|
|
34
35
|
sessionListCollapsed,
|
|
35
36
|
selectMode,
|
|
36
37
|
selectEnabled,
|
|
38
|
+
theme,
|
|
39
|
+
resolvedTheme,
|
|
37
40
|
handleToggleSessionList,
|
|
38
41
|
handleToggleSelectMode,
|
|
42
|
+
handleToggleTheme,
|
|
39
43
|
handleClose
|
|
40
44
|
} = (0, import_context.useOpenCodeWidgetContext)();
|
|
41
|
-
const
|
|
45
|
+
const themeIconTitle = (0, import_vue2.computed)(() => {
|
|
46
|
+
const themeLabels = {
|
|
47
|
+
auto: "\u81EA\u52A8",
|
|
48
|
+
light: "\u4EAE\u8272",
|
|
49
|
+
dark: "\u6697\u8272"
|
|
50
|
+
};
|
|
51
|
+
return `\u4E3B\u9898: ${themeLabels[theme.value]} (${resolvedTheme.value})`;
|
|
52
|
+
});
|
|
53
|
+
const themeIconLabel = (0, import_vue2.computed)(() => {
|
|
54
|
+
const themeLabels = {
|
|
55
|
+
auto: "\u81EA\u52A8\u8DDF\u968F\u7CFB\u7EDF",
|
|
56
|
+
light: "\u4EAE\u8272\u4E3B\u9898",
|
|
57
|
+
dark: "\u6697\u8272\u4E3B\u9898"
|
|
58
|
+
};
|
|
59
|
+
return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
|
|
60
|
+
});
|
|
61
|
+
const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleClose, themeIconTitle, themeIconLabel };
|
|
42
62
|
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
|
|
43
63
|
return __returned__;
|
|
44
64
|
}
|
|
@@ -47,21 +67,52 @@ const _hoisted_1 = { class: "opencode-chat-header" };
|
|
|
47
67
|
const _hoisted_2 = { class: "opencode-chat-header-left" };
|
|
48
68
|
const _hoisted_3 = ["title", "aria-label", "aria-expanded"];
|
|
49
69
|
const _hoisted_4 = ["aria-pressed", "disabled"];
|
|
50
|
-
const _hoisted_5 =
|
|
51
|
-
const _hoisted_6 = {
|
|
70
|
+
const _hoisted_5 = ["title", "aria-label"];
|
|
71
|
+
const _hoisted_6 = {
|
|
72
|
+
key: 0,
|
|
73
|
+
viewBox: "0 0 24 24",
|
|
74
|
+
width: "16",
|
|
75
|
+
height: "16",
|
|
76
|
+
fill: "none",
|
|
77
|
+
stroke: "currentColor",
|
|
78
|
+
"stroke-width": "2",
|
|
79
|
+
"aria-hidden": "true"
|
|
80
|
+
};
|
|
81
|
+
const _hoisted_7 = {
|
|
82
|
+
key: 1,
|
|
83
|
+
viewBox: "0 0 24 24",
|
|
84
|
+
width: "16",
|
|
85
|
+
height: "16",
|
|
86
|
+
fill: "none",
|
|
87
|
+
stroke: "currentColor",
|
|
88
|
+
"stroke-width": "2",
|
|
89
|
+
"aria-hidden": "true"
|
|
90
|
+
};
|
|
91
|
+
const _hoisted_8 = {
|
|
92
|
+
key: 2,
|
|
93
|
+
viewBox: "0 0 24 24",
|
|
94
|
+
width: "16",
|
|
95
|
+
height: "16",
|
|
96
|
+
fill: "none",
|
|
97
|
+
stroke: "currentColor",
|
|
98
|
+
"stroke-width": "2",
|
|
99
|
+
"aria-hidden": "true"
|
|
100
|
+
};
|
|
101
|
+
const _hoisted_9 = { class: "opencode-chat-header-title" };
|
|
102
|
+
const _hoisted_10 = { class: "opencode-chat-header-actions" };
|
|
52
103
|
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
53
|
-
return (0,
|
|
54
|
-
(0,
|
|
55
|
-
(0,
|
|
56
|
-
class: "opencode-header-btn session-toggle",
|
|
104
|
+
return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_1, [
|
|
105
|
+
(0, import_vue3.createElementVNode)("div", _hoisted_2, [
|
|
106
|
+
(0, import_vue3.createElementVNode)("button", {
|
|
107
|
+
class: (0, import_vue3.normalizeClass)(["opencode-header-btn session-toggle", { active: !$setup.sessionListCollapsed }]),
|
|
57
108
|
type: "button",
|
|
58
109
|
title: $setup.sessionListTitle,
|
|
59
110
|
"aria-label": $setup.sessionListTitle,
|
|
60
111
|
"aria-expanded": !$setup.sessionListCollapsed,
|
|
61
112
|
onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggleSessionList && $setup.handleToggleSessionList(...args))
|
|
62
113
|
}, [
|
|
63
|
-
(0,
|
|
64
|
-
_cache[
|
|
114
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "session-toggle-icon", {}, () => [
|
|
115
|
+
_cache[4] || (_cache[4] = (0, import_vue3.createElementVNode)(
|
|
65
116
|
"svg",
|
|
66
117
|
{
|
|
67
118
|
viewBox: "0 0 24 24",
|
|
@@ -73,7 +124,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
73
124
|
"aria-hidden": "true"
|
|
74
125
|
},
|
|
75
126
|
[
|
|
76
|
-
(0,
|
|
127
|
+
(0, import_vue3.createElementVNode)("path", {
|
|
77
128
|
d: "M4 6h16M4 12h16M4 18h16",
|
|
78
129
|
"stroke-linecap": "round"
|
|
79
130
|
})
|
|
@@ -82,9 +133,9 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
82
133
|
/* CACHED */
|
|
83
134
|
))
|
|
84
135
|
])
|
|
85
|
-
],
|
|
86
|
-
(0,
|
|
87
|
-
class: (0,
|
|
136
|
+
], 10, _hoisted_3),
|
|
137
|
+
(0, import_vue3.createElementVNode)("button", {
|
|
138
|
+
class: (0, import_vue3.normalizeClass)(["opencode-header-btn select-btn", { active: $setup.selectMode }]),
|
|
88
139
|
type: "button",
|
|
89
140
|
title: "\u9009\u62E9\u9875\u9762\u5143\u7D20 (Ctrl+P)",
|
|
90
141
|
"aria-label": "\u9009\u62E9\u9875\u9762\u5143\u7D20",
|
|
@@ -92,8 +143,8 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
92
143
|
disabled: !$setup.selectEnabled,
|
|
93
144
|
onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleToggleSelectMode && $setup.handleToggleSelectMode(...args))
|
|
94
145
|
}, [
|
|
95
|
-
(0,
|
|
96
|
-
_cache[
|
|
146
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "select-icon", {}, () => [
|
|
147
|
+
_cache[5] || (_cache[5] = (0, import_vue3.createElementVNode)(
|
|
97
148
|
"svg",
|
|
98
149
|
{
|
|
99
150
|
viewBox: "0 0 1024 1024",
|
|
@@ -102,11 +153,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
102
153
|
"aria-hidden": "true"
|
|
103
154
|
},
|
|
104
155
|
[
|
|
105
|
-
(0,
|
|
156
|
+
(0, import_vue3.createElementVNode)("path", {
|
|
106
157
|
fill: "currentColor",
|
|
107
158
|
d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
|
|
108
159
|
}),
|
|
109
|
-
(0,
|
|
160
|
+
(0, import_vue3.createElementVNode)("path", {
|
|
110
161
|
fill: "currentColor",
|
|
111
162
|
d: "M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"
|
|
112
163
|
})
|
|
@@ -115,25 +166,48 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
115
166
|
/* CACHED */
|
|
116
167
|
))
|
|
117
168
|
])
|
|
118
|
-
], 10, _hoisted_4)
|
|
169
|
+
], 10, _hoisted_4),
|
|
170
|
+
(0, import_vue3.createElementVNode)("button", {
|
|
171
|
+
class: "opencode-header-btn theme-btn",
|
|
172
|
+
type: "button",
|
|
173
|
+
title: $setup.themeIconTitle,
|
|
174
|
+
"aria-label": $setup.themeIconLabel,
|
|
175
|
+
onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleToggleTheme && $setup.handleToggleTheme(...args))
|
|
176
|
+
}, [
|
|
177
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "theme-icon", {}, () => [
|
|
178
|
+
$setup.theme === "light" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_6, [..._cache[6] || (_cache[6] = [
|
|
179
|
+
(0, import_vue3.createStaticVNode)('<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>', 9)
|
|
180
|
+
])])) : $setup.theme === "dark" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_7, [..._cache[7] || (_cache[7] = [
|
|
181
|
+
(0, import_vue3.createElementVNode)(
|
|
182
|
+
"path",
|
|
183
|
+
{ d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" },
|
|
184
|
+
null,
|
|
185
|
+
-1
|
|
186
|
+
/* CACHED */
|
|
187
|
+
)
|
|
188
|
+
])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_8, [..._cache[8] || (_cache[8] = [
|
|
189
|
+
(0, import_vue3.createStaticVNode)('<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line><circle cx="12" cy="10" r="3"></circle><path d="M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2"></path>', 5)
|
|
190
|
+
])]))
|
|
191
|
+
])
|
|
192
|
+
], 8, _hoisted_5)
|
|
119
193
|
]),
|
|
120
|
-
(0,
|
|
194
|
+
(0, import_vue3.createElementVNode)(
|
|
121
195
|
"span",
|
|
122
|
-
|
|
123
|
-
(0,
|
|
196
|
+
_hoisted_9,
|
|
197
|
+
(0, import_vue3.toDisplayString)($setup.title),
|
|
124
198
|
1
|
|
125
199
|
/* TEXT */
|
|
126
200
|
),
|
|
127
|
-
(0,
|
|
128
|
-
(0,
|
|
201
|
+
(0, import_vue3.createElementVNode)("div", _hoisted_10, [
|
|
202
|
+
(0, import_vue3.createElementVNode)("button", {
|
|
129
203
|
class: "opencode-header-btn close",
|
|
130
204
|
type: "button",
|
|
131
205
|
title: "\u5173\u95ED",
|
|
132
206
|
"aria-label": "\u5173\u95ED\u9762\u677F",
|
|
133
|
-
onClick: _cache[
|
|
207
|
+
onClick: _cache[3] || (_cache[3] = (...args) => $setup.handleClose && $setup.handleClose(...args))
|
|
134
208
|
}, [
|
|
135
|
-
(0,
|
|
136
|
-
_cache[
|
|
209
|
+
(0, import_vue3.renderSlot)(_ctx.$slots, "close-icon", {}, () => [
|
|
210
|
+
_cache[9] || (_cache[9] = (0, import_vue3.createElementVNode)(
|
|
137
211
|
"svg",
|
|
138
212
|
{
|
|
139
213
|
viewBox: "0 0 24 24",
|
|
@@ -145,7 +219,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
145
219
|
"aria-hidden": "true"
|
|
146
220
|
},
|
|
147
221
|
[
|
|
148
|
-
(0,
|
|
222
|
+
(0, import_vue3.createElementVNode)("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
149
223
|
],
|
|
150
224
|
-1
|
|
151
225
|
/* CACHED */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:
|
|
1
|
+
.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:14px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:15px;font-weight:500;box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3);z-index:9999999;display:none;align-items:center;gap:12px;border:2px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:rgba(255,255,255,.25);border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3)}50%{box-shadow:0 6px 20px rgba(239,68,68,.6),0 0 0 6px rgba(239,68,68,.4)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:
|
|
1
|
+
.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:rgba(255,255,255,.7)}.opencode-session-item.active .opencode-session-delete-btn:hover{background:rgba(255,255,255,.2);color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
|
|
@@ -2,6 +2,7 @@ import { type Ref } from "vue";
|
|
|
2
2
|
import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload } from "./types";
|
|
3
3
|
export interface OpenCodeWidgetContext {
|
|
4
4
|
theme: Ref<string>;
|
|
5
|
+
resolvedTheme: Ref<"light" | "dark">;
|
|
5
6
|
title: Ref<string>;
|
|
6
7
|
hotkeyLabel: Ref<string>;
|
|
7
8
|
selectShortcutLabel: Ref<string>;
|
|
@@ -26,6 +27,7 @@ export interface OpenCodeWidgetContext {
|
|
|
26
27
|
handleToggle: () => void;
|
|
27
28
|
handleClose: () => void;
|
|
28
29
|
handleToggleSessionList: () => void;
|
|
30
|
+
handleToggleTheme: () => void;
|
|
29
31
|
handleEmptyAction: () => void;
|
|
30
32
|
handleCreateSession: () => void;
|
|
31
33
|
handleSelectSession: (item: OpenCodeWidgetSessionItem) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px
|
|
1
|
+
.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
|
|
@@ -26,10 +26,12 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
|
|
|
26
26
|
"update:sessionListCollapsed": (value: boolean) => any;
|
|
27
27
|
"update:currentSessionId": (value: string | null) => any;
|
|
28
28
|
"update:selectedElements": (value: import("./types").OpenCodeSelectedElement[]) => any;
|
|
29
|
+
"update:theme": (value: import("./types").OpenCodeWidgetTheme) => any;
|
|
29
30
|
toggle: (value: boolean) => any;
|
|
30
31
|
close: () => any;
|
|
31
32
|
"toggle-session-list": (value: boolean) => any;
|
|
32
33
|
"toggle-select-mode": (value: boolean) => any;
|
|
34
|
+
"toggle-theme": (value: import("./types").OpenCodeWidgetTheme) => any;
|
|
33
35
|
"create-session": () => any;
|
|
34
36
|
"select-session": (session: import("./types").OpenCodeWidgetSession) => any;
|
|
35
37
|
"delete-session": (session: import("./types").OpenCodeWidgetSession) => any;
|
|
@@ -43,10 +45,12 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
|
|
|
43
45
|
"onUpdate:sessionListCollapsed"?: ((value: boolean) => any) | undefined;
|
|
44
46
|
"onUpdate:currentSessionId"?: ((value: string | null) => any) | undefined;
|
|
45
47
|
"onUpdate:selectedElements"?: ((value: import("./types").OpenCodeSelectedElement[]) => any) | undefined;
|
|
48
|
+
"onUpdate:theme"?: ((value: import("./types").OpenCodeWidgetTheme) => any) | undefined;
|
|
46
49
|
onToggle?: ((value: boolean) => any) | undefined;
|
|
47
50
|
onClose?: (() => any) | undefined;
|
|
48
51
|
"onToggle-session-list"?: ((value: boolean) => any) | undefined;
|
|
49
52
|
"onToggle-select-mode"?: ((value: boolean) => any) | undefined;
|
|
53
|
+
"onToggle-theme"?: ((value: import("./types").OpenCodeWidgetTheme) => any) | undefined;
|
|
50
54
|
"onCreate-session"?: (() => any) | undefined;
|
|
51
55
|
"onSelect-session"?: ((session: import("./types").OpenCodeWidgetSession) => any) | undefined;
|
|
52
56
|
"onDelete-session"?: ((session: import("./types").OpenCodeWidgetSession) => any) | undefined;
|
|
@@ -60,6 +64,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
|
|
|
60
64
|
showEmptyState: boolean;
|
|
61
65
|
emptyStateText: string;
|
|
62
66
|
emptyStateActionText: string;
|
|
67
|
+
theme: import("./types").OpenCodeWidgetTheme;
|
|
63
68
|
iframeSrc: string;
|
|
64
69
|
sessionListCollapsed: boolean;
|
|
65
70
|
selectMode: boolean;
|
|
@@ -71,7 +76,6 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
|
|
|
71
76
|
open: boolean;
|
|
72
77
|
hotkeyLabel: string;
|
|
73
78
|
position: import("./types").OpenCodeWidgetPosition;
|
|
74
|
-
theme: import("./types").OpenCodeWidgetTheme;
|
|
75
79
|
currentSessionId: string | null;
|
|
76
80
|
selectedElements: import("./types").OpenCodeSelectedElement[];
|
|
77
81
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|