Mininglamp-OSS · Candice00711 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
@@ -86,6 +86,16 @@ jobs:
           cache: pnpm
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - name: Octo UI tests
+        run: pnpm --filter @octo/ui test
+      - name: Badge and Dot migration tests
+        run: >-
+          pnpm --filter @octo/base exec vitest run
+          src/Components/ClawHealthCheckItem/ClawHealthCheckItem.test.tsx
+          src/Components/ConversationList/__tests__/layout.test.tsx
+          src/Components/ConversationList/__tests__/onlineBadge.test.tsx
+          src/Components/SidebarTabBar/__tests__/SidebarTabBar.test.tsx
+          src/ui/profileDetail/__tests__/ProfileOnlineStatus.test.tsx
       - name: Agent Mail tests
         run: pnpm --filter @octo/mail test
       - name: Agent Mail typecheck

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import '@octo/base/src/theme/tokens.css';
+import '@octo/ui/styles.css';
 import './style.css';
 import {
   BaseModule,

@@ -5,12 +5,19 @@
   "version": "0.0.0.1",
   "type": "module",
   "scripts": {
+    "predev": "pnpm --filter @octo/ui build",
     "dev": "wxt --port 5678",
+    "predev:firefox": "pnpm --filter @octo/ui build",
     "dev:firefox": "wxt -b firefox",
+    "prebuild": "pnpm --filter @octo/ui build",
     "build": "wxt build",
+    "prebuild:firefox": "pnpm --filter @octo/ui build",
     "build:firefox": "wxt build -b firefox",
+    "prezip": "pnpm --filter @octo/ui build",
     "zip": "wxt zip",
+    "prezip:firefox": "pnpm --filter @octo/ui build",
     "zip:firefox": "wxt zip -b firefox",
+    "precompile": "pnpm --filter @octo/ui build",
     "compile": "tsc --noEmit",
     "postinstall": "wxt prepare"
   },
@@ -20,6 +27,7 @@
     "@octo/contacts": "workspace:*",
     "@octo/datasource": "workspace:*",
     "@octo/login": "workspace:*",
+    "@octo/ui": "workspace:*",
     "@douyinfe/semi-icons": "^2.93.0",
     "@douyinfe/semi-ui": "^2.93.0",
     "lucide-react": "^0.577.0",

@@ -86,6 +86,11 @@ const config: StorybookConfig = {
           '@octo/base': path.resolve(__dirname, '../../../packages/dmworkbase'),
           '@octo/contacts': path.resolve(__dirname, '../../../packages/dmworkcontacts'),
           '@octo/login': path.resolve(__dirname, '../../../packages/dmworklogin'),
+          '@octo/ui/styles.css': path.resolve(
+            __dirname,
+            '../../../packages/octo-ui/src/styles/index.css',
+          ),
+          '@octo/ui': path.resolve(__dirname, '../../../packages/octo-ui/src/index.ts'),
         },
         dedupe: ['react', 'react-dom'],
       },

@@ -1,8 +1,11 @@
 import type { Preview } from '@storybook/react-vite'
+import { OctoUIProvider } from '@octo/ui'
+import React from 'react'
 
 // 分层 CSS — 直接 import，不走 @import 链，避免 Vite 跨包路径问题
 import '../../../packages/dmworkbase/src/theme/primitive.css'
 import '../../../packages/dmworkbase/src/theme/semantic.css'
+import '@octo/ui/styles.css'
 import './preview.css'
 
 const preview: Preview = {
@@ -28,7 +31,7 @@ const preview: Preview = {
       } else {
         document.body.removeAttribute('theme-mode')
       }
-      return Story()
+      return React.createElement(OctoUIProvider, null, Story())
     },
   ],
   parameters: {

@@ -51,9 +51,19 @@
     "eject": "react-app-rewired eject",
     "clean": "rimraf node_modules dist-ele build dist-ele .turbo",
     "tauri": "tauri",
+    "prestorybook": "pnpm --filter @octo/ui build",
     "storybook": "storybook dev -p 16006",
+    "prebuild-storybook": "pnpm --filter @octo/ui build",
     "build-storybook": "storybook build",
-    "test:storybook": "vitest run --config vitest.storybook.config.ts"
+    "pretest:storybook": "pnpm --filter @octo/ui build",
+    "test:storybook": "vitest run --config vitest.storybook.config.ts",
+    "prestart": "pnpm --filter @octo/ui build",
+    "predev": "pnpm --filter @octo/ui build",
+    "predev-ele": "pnpm --filter @octo/ui build",
+    "prebuild": "pnpm --filter @octo/ui build",
+    "prebuild:electron": "pnpm --filter @octo/ui build",
+    "prebuild:analyzer": "pnpm --filter @octo/ui build",
+    "prebuild:e2e": "pnpm --filter @octo/ui build"
   },
   "dependencies": {
     "electron-log": "^5.1.2",
@@ -76,6 +86,7 @@
     "@octo/datasource": "workspace:*",
     "@octo/login": "workspace:*",
     "@octo/mail": "workspace:*",
+    "@octo/ui": "workspace:*",
     "@react-pdf-viewer/core": "^3.12.0",
     "@react-pdf-viewer/page-navigation": "^3.12.0",
     "@react-pdf-viewer/thumbnail": "^3.12.0",

@@ -41,18 +41,6 @@
     margin: 0 0 32px;
 }
 
-/* 用更具体的选择器覆盖 Semi Button，替代 !important */
-.wk-join-approval-card .wk-join-approval-btn.semi-button {
+.wk-join-approval-btn {
     width: 100%;
-    height: 44px;
-    font-size: 16px;
-    border-radius: 8px;
-    background-color: var(--wk-brand-primary);
-    border-color: var(--wk-brand-primary);
-    color: var(--wk-text-inverse);
-}
-
-.wk-join-approval-card .wk-join-approval-btn.semi-button:hover {
-    background-color: var(--wk-brand-primary-hover);
-    border-color: var(--wk-brand-primary-hover);
 }
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@douyinfe/semi-ui";
+import { Button } from "@octo/ui";
 import { useI18n, type JoinApprovalStatus } from "@octo/base";
 import "./index.css";
 
@@ -34,8 +34,8 @@ export default function JoinApprovalResult({ status, onDismiss }: JoinApprovalRe
                         : t("app.joinApproval.submittedDesc")}
                 </p>
                 <Button
-                    type="primary"
-                    size="large"
+                    variant="primary"
+                    size="md"
                     className="wk-join-approval-btn"
                     onClick={onDismiss}
                 >

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import '@octo/base/src/theme/tokens.css';
+import '@octo/ui/styles.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

@@ -12,6 +12,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@douyinfe/semi-icons": "^2.93.0",
     "@douyinfe/semi-ui": "^2.93.0",
+    "@octo/ui": "workspace:*",
     "@emotion/react": "^11.14.0",
     "@floating-ui/dom": "^1.7.6",
     "@lottiefiles/lottie-player": "^1.5.5",

@@ -205,7 +205,3 @@ html {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  body[theme-mode=dark] .semi-badge-count {
-    color: white;
-  }
@@ -8,6 +8,8 @@ describe("AiBadge", () => {
         const html = renderToStaticMarkup(<AiBadge />);
         expect(html).toContain(">AI</span>");
         expect(html).toContain("ai-badge-default");
+        expect(html).toContain("wk-ai-tag--xs");
+        expect(html).not.toContain("wk-ai-tag--small");
     });
 
     it("renders a product-specific label and forwards span accessibility attributes", () => {

@@ -1,5 +1,5 @@
 import React from "react";
-import "./index.css";
+import AITag from "../../ui/AITag";
 
 export interface AiBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: "default" | "small";
@@ -11,7 +11,7 @@ const AiBadge: React.FC<AiBadgeProps> = ({ size = "default", className, children
         ? `ai-badge ${sizeClass} ${className}`
         : `ai-badge ${sizeClass}`;
 
-    return <span className={combinedClassName} {...props}>{children}</span>;
+    return <AITag size="xs" className={combinedClassName} {...props}>{children}</AITag>;
 };
 
 export default AiBadge;
@@ -372,3 +372,45 @@
     height: 100%;
     overflow-y: auto;
 }
+.wk-channelsetting-external-group-tag {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--wk-sp-4);
+  margin-left: var(--wk-sp-1-5);
+  padding: 0 var(--wk-sp-1-5);
+  border-radius: var(--wk-r-full);
+  background: rgba(var(--semi-orange-5), 0.15);
+  color: rgba(var(--semi-orange-8), 1);
+  font-size: var(--wk-text-size-tiny);
+  font-weight: var(--wk-font-medium);
+  line-height: var(--wk-sp-4);
+}
+
+.wk-channelsetting-thread-status-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  height: var(--wk-sp-5);
+  padding: var(--wk-sp-0-5) var(--wk-sp-2);
+  border-radius: var(--wk-r-full);
+  font-size: var(--wk-text-size-sm);
+  font-weight: var(--wk-font-medium);
+  line-height: var(--wk-sp-5);
+}
+
+.wk-channelsetting-thread-status-tag--grey {
+  background: rgba(var(--semi-grey-5), 0.15);
+  color: rgba(var(--semi-grey-8), 1);
+}
+
+.wk-channelsetting-thread-status-tag--red {
+  background: rgba(var(--semi-red-5), 0.15);
+  color: rgba(var(--semi-red-8), 1);
+}
+
+.wk-channelsetting-thread-status-tag--green {
+  background: rgba(var(--semi-green-5), 0.15);
+  color: rgba(var(--semi-green-8), 1);
+}
@@ -14,28 +14,6 @@
   min-width: 160px;
 }
 
-.hc-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-/* 状态颜色：绿色 = 正常 */
-.hc-dot--success {
-  background: var(--green, #22c55e);
-}
-
-/* 状态颜色：黄色 = 警告 */
-.hc-dot--warning {
-  background: var(--yellow, #f59e0b);
-}
-
-/* 状态颜色：红色 = 错误 */
-.hc-dot--error {
-  background: var(--red, #ef4444);
-}
-
 .hc-label {
   font-size: 13px;
   color: rgba(0, 0, 0, 0.65);

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import ClawHealthCheckItem from './ClawHealthCheckItem';
 
 const meta = {

@@ -28,7 +28,7 @@ describe('ClawHealthCheckItem', () => {
     );
 
     const dot = screen.getByTestId('claw-health-check-item-dot');
-    expect(dot).toHaveClass('hc-dot--success');
+    expect(dot).toHaveClass('octo-ui-dot--success');
   });
 
   it('renders warning status with yellow dot', () => {
@@ -41,7 +41,7 @@ describe('ClawHealthCheckItem', () => {
     );
 
     const dot = screen.getByTestId('claw-health-check-item-dot');
-    expect(dot).toHaveClass('hc-dot--warning');
+    expect(dot).toHaveClass('octo-ui-dot--warning');
   });
 
   it('renders error status with red dot', () => {
@@ -54,7 +54,7 @@ describe('ClawHealthCheckItem', () => {
     );
 
     const dot = screen.getByTestId('claw-health-check-item-dot');
-    expect(dot).toHaveClass('hc-dot--error');
+    expect(dot).toHaveClass('octo-ui-dot--danger');
   });
 
   it('accepts custom className', () => {
@@ -92,12 +92,12 @@ describe('ClawHealthCheckItem', () => {
     const { rerender } = render(
       <ClawHealthCheckItem status="success" label="Test" value="OK" />
     );
-    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('hc-dot--success');
+    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('octo-ui-dot--success');
 
     rerender(<ClawHealthCheckItem status="warning" label="Test" value="OK" />);
-    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('hc-dot--warning');
+    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('octo-ui-dot--warning');
 
     rerender(<ClawHealthCheckItem status="error" label="Test" value="OK" />);
-    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('hc-dot--error');
+    expect(screen.getByTestId('claw-health-check-item-dot')).toHaveClass('octo-ui-dot--danger');
   });
 });
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Dot } from '@octo/ui';
 import './ClawHealthCheckItem.css';
 
 export type HealthStatus = 'success' | 'warning' | 'error';
@@ -27,13 +28,15 @@ const ClawHealthCheckItem: React.FC<ClawHealthCheckItemProps> = ({
   className = '',
   'data-testid': testId = 'claw-health-check-item',
 }) => {
+  const dotTone = status === 'error' ? 'danger' : status;
+
   return (
     <div
       className={`health-chip ${className}`}
       data-testid={testId}
     >
-      <span
-        className={`hc-dot hc-dot--${status}`}
+      <Dot
+        tone={dotTone}
         data-testid={`${testId}-dot`}
       />
       <span