Add development page and enhance widget preview functionality

rtugeek · rtugeek · commit 40604ba8be49 · 2026-03-10T21:55:59.000+08:00
diff --git a/.eslintcache b/.eslintcache
diff --git a/README.md b/README.md
@@ -7,7 +7,6 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/github/license/widget-js/widgets" alt="">
   <img src="https://img.shields.io/badge/Q%E7%BE%A4-701784679-EB1923?logo=tencentqq&logoColor=white&sanitize=true" alt="Chat">
   <a href="https://space.bilibili.com/207395767"><img src="https://img.shields.io/badge/-Bilibili-00A1D6?logo=bilibili&logoColor=white" alt="bilibili"></a>
   <a href="https://faq.widgetjs.cn"><img src="https://img.shields.io/badge/-功能建议-2378ff?logo=vowpalwabbit&logoColor=white&sanitize=true" alt="Feedback"></a>
@@ -19,7 +18,7 @@
 
 ## 🔗预览所有组件
 
-https://widget-js.github.io/widgets/#/  
+https://widget-js.github.io/widgets/#/
 
 ![png](screenshot/react.png)
 
@@ -32,26 +31,6 @@ Windows 10/11 客户端下载地址：
 1️⃣ https://www.microsoft.com/store/productId/9NPR50GQ7T53
 2️⃣ https://widgetjs.cn
 
-## 🗂️项目目录结构
-
-```
-widgets
-├── src
-│   ├── components                // 常用Vue组件
-│   ├── views                     // 页面文件
-│   ├── widgets                   // 桌面组件文件
-│   │   ├── countdown             // 每个桌面组件一个文件夹
-│   │   │   ├── XXWidget.vue      // 桌面小组件
-│   │   │   ├── XXConfig.vue      // 小组件配置页面
-│   │   │   └── XXView.vue        // 小组件页面
-│   │   └── ...
-│   └── index.ts
-├── .gitignore
-├── package.json
-├── README.md
-└── tsconfig.json
-```
-
 ## ▶️运行项目
 
 1. 下载并运行桌面组件客户端
@@ -74,9 +53,6 @@ pnpm run dev
 ```
 ## 📋组件列表
 
-
-> 🔗全部组件预览地址：https://widget-js.github.io/widgets/#/add
-
 ### AI组件包
 
 https://github.com/rtugeek/ai
diff --git a/eslint.config.js b/eslint.config.js
@@ -24,6 +24,7 @@ export default antfu({
     'unused-imports/no-unused-vars': ['error', {
       caughtErrors: 'none',
       argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
     }],
     'ts/explicit-function-return-type': 'off',
     'style/max-statements-per-line': ['error', {
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@tailwindcss/vite": "^4.2.0",
     "@uiw/react-color": "^2.9.5",
     "@widget-js/core": "latest",
+    "@widget-js/react": "workspace:^",
     "@widget-js/web-api": "24.1.1-beta.70",
     "axios": "^1.13.5",
     "baseline-browser-mapping": "^2.10.0",
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { RouterProvider } from 'react-router-dom'
 import { useAppLanguage } from './hooks/use-app-language'
 import { router } from './router'
+import '@widget-js/react/style.css'
 import './app.css'
 
 function App() {
diff --git a/src/components/dashboard-layout.tsx b/src/components/dashboard-layout.tsx
@@ -1,3 +1,4 @@
+import { WindowControls } from '@widget-js/react'
 import { useTranslation } from 'react-i18next'
 import { Outlet, useMatches } from 'react-router-dom'
 import { AppSidebar } from '@/components/app-sidebar'
@@ -11,7 +12,6 @@ import {
   SidebarInset,
   SidebarProvider,
 } from '@/components/ui/sidebar'
-import { WindowControls } from '@/components/window-controls'
 
 export function DashboardLayout() {
   const { t } = useTranslation()
diff --git a/src/components/window-controls.tsx b/src/components/window-controls.tsx
diff --git a/src/index.css b/src/index.css
@@ -144,3 +144,7 @@
 .draggable-region a {
   -webkit-app-region: no-drag;
 }
+
+[data-rmiz-modal-overlay="visible"] {
+  background-color: rgba(0, 0, 0, 0.7) !important;
+}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -35,7 +35,12 @@
     "widgetManagement": "Widget Management",
     "settings": "Settings",
     "loading": "Loading...",
-    "widgetHub": "Widget Hub"
+    "widgetHub": "Widget Hub",
+    "dev": "Widget Dev"
+  },
+  "dev": {
+    "emptyTitle": "Develop Your Own Desktop Widget",
+    "viewDocs": "View Documentation"
   },
   "general": {
     "title": "General Settings",
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
@@ -35,7 +35,12 @@
     "widgetManagement": "组件管理",
     "settings": "设置",
     "loading": "加载中...",
-    "widgetHub": "桌面组件"
+    "widgetHub": "桌面组件",
+    "dev": "开发组件"
+  },
+  "dev": {
+    "emptyTitle": "开发属于自己的桌面组件",
+    "viewDocs": "查看文档"
   },
   "general": {
     "title": "常用设置",
diff --git a/src/pages/add/components/search-item.tsx b/src/pages/add/components/search-item.tsx
@@ -29,9 +29,6 @@ export function SearchItem({ widget }: SearchItemProps) {
   const [isWidgetHosted, setIsWidgetHosted] = useState(false)
   const [adding, setAdding] = useState(false)
 
-  // Assuming useBroadcastChannel is not critical for now or can be replaced later
-  // const { post } = useBroadcastChannel({ name: 'CHANNEL_MAIN' })
-
   const updateWidgetAdd = useCallback(async () => {
     if (widget.isSupportBackground()) {
       const widgets = await DeployedWidgetApi.getDeployedWidgets(widget.name)
diff --git a/src/pages/add/components/widget-container.tsx b/src/pages/add/components/widget-container.tsx
@@ -2,9 +2,8 @@ import type { WebWidget } from '@widget-js/web-api'
 import { WidgetApi } from '@widget-js/core'
 import { Image as ImageIcon, ImageOff } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import Zoom from 'react-medium-image-zoom'
 import { cn } from '@/lib/utils'
-import 'react-medium-image-zoom/dist/styles.css'
+import { ZoomImage } from './zoom-image'
 
 interface WidgetContainerProps {
   widget: WebWidget
@@ -59,15 +58,13 @@ export default function WidgetContainer({ widget, className }: WidgetContainerPr
     >
       {previewImage
         ? (
-            <Zoom>
-              <img
-                src={previewImage}
-                alt="Widget Preview"
-                className="w-full h-auto max-h-[128px] object-contain drop-shadow-md cursor-pointer hover:opacity-90 transition-opacity"
-                onError={() => setError(true)}
-                style={{ display: error ? 'none' : 'block' }}
-              />
-            </Zoom>
+            <ZoomImage
+              src={previewImage}
+              alt="Widget Preview"
+              className="w-full h-auto max-h-[128px] object-contain drop-shadow-md cursor-pointer hover:opacity-90 transition-opacity"
+              onError={() => setError(true)}
+              style={{ display: error ? 'none' : 'block' }}
+            />
           )
         : null}
 
diff --git a/src/pages/add/components/zoom-image.tsx b/src/pages/add/components/zoom-image.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useState } from 'react'
+import { Controlled as ControlledZoom } from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
+interface ZoomImageProps {
+  src: string
+  alt?: string
+  className?: string
+  onError?: () => void
+  style?: React.CSSProperties
+}
+
+export function ZoomImage({ src, alt, className, onError, style }: ZoomImageProps) {
+  const [isZoomed, setIsZoomed] = useState(false)
+
+  const handleZoomChange = useCallback((shouldZoom: boolean) => {
+    setIsZoomed(shouldZoom)
+  }, [])
+
+  return (
+    <>
+      <style>
+        {`
+          [data-rmiz-btn-unzoom] {
+            top: 80px !important;
+            right: 40px !important;
+          }
+        `}
+      </style>
+      <ControlledZoom
+        isZoomed={isZoomed}
+        onZoomChange={handleZoomChange}
+      >
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          onError={onError}
+          style={style}
+        />
+      </ControlledZoom>
+    </>
+  )
+}
diff --git a/src/pages/dev/dev-page.tsx b/src/pages/dev/dev-page.tsx
@@ -0,0 +1,91 @@
+import { BrowserWindowApi, WidgetApi, WidgetPackageApi } from '@widget-js/core'
+import { WebWidget } from '@widget-js/web-api'
+import { Hammer } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
+import { Spinner } from '@/components/ui/spinner'
+import { SearchItem } from '@/pages/add/components/search-item'
+
+export default function DevPage() {
+  const { t } = useTranslation()
+  const [widgets, setWidgets] = useState<WebWidget[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const openDocs = () => {
+    BrowserWindowApi.openUrl('https://widgetjs.cn/guide/', { external: true })
+  }
+
+  useEffect(() => {
+    document.title = t('sidebar.dev')
+  }, [t])
+
+  useEffect(() => {
+    const loadWidgets = async () => {
+      try {
+        const widgetPackages = await WidgetPackageApi.getPackages()
+        const devPackages = widgetPackages.filter(it => it.development)
+        const localWidgets = await WidgetApi.getWidgets()
+        const devWidgets: WebWidget[] = []
+
+        for (const widgetPackage of devPackages) {
+          const matchingWidgets = localWidgets
+            .map(it => WebWidget.fromObject(it))
+            .filter(it => it.packageName === widgetPackage.name)
+          devWidgets.push(...matchingWidgets)
+        }
+        setWidgets(devWidgets)
+      }
+      catch (e) {
+        console.error('Failed to load widgets', e)
+      }
+      finally {
+        setLoading(false)
+      }
+    }
+    loadWidgets()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner className="size-8 text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (widgets.length > 0) {
+    return (
+      <div className="h-full w-full overflow-y-auto bg-background p-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {widgets.map(widget => (
+            <SearchItem key={widget.name} widget={widget} />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center p-4">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Hammer />
+          </EmptyMedia>
+          <EmptyTitle>{t('dev.emptyTitle')}</EmptyTitle>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button onClick={openDocs}>{t('dev.viewDocs')}</Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  )
+}
diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -1,6 +1,7 @@
 import type { RouteObject } from 'react-router-dom'
 import {
   Bot,
+  Code2,
   Globe,
   Package,
   Palette,
@@ -11,6 +12,7 @@ import { createHashRouter, Navigate } from 'react-router-dom'
 import { DashboardLayout } from '@/components/dashboard-layout'
 import AddWidgetPage from '@/pages/add/add-widget-page'
 import AiPage from '@/pages/ai/ai-page'
+import DevPage from '@/pages/dev/dev-page'
 import ErrorPage from '@/pages/error-page'
 import WidgetPackageManagerPage from '@/pages/packages/widget-package-manager-page'
 import AppInfoPage from '@/pages/settings/app-info-page'
@@ -56,6 +58,15 @@ export const routes: RouteObject[] = [
               sidebarMenu: true,
             },
           },
+          {
+            path: 'dev',
+            element: <DevPage />,
+            handle: {
+              title: 'sidebar.dev',
+              icon: Code2,
+              sidebarMenu: true,
+            },
+          },
         ],
       },
       {

Original file line number	Diff line number	Diff line change
`@@ -144,3 +144,7 @@`
`144`	`144`	`.draggable-region a {`
`145`	`145`	`-webkit-app-region: no-drag;`
`146`	`146`	`}`
	`147`	`+`
	`148`	`+[data-rmiz-modal-overlay="visible"] {`
	`149`	`+ background-color: rgba(0, 0, 0, 0.7) !important;`
	`150`	`+}`