vxui-react 1.1.1 → 1.1.3

package/README.en.md

@@ -0,0 +1,205 @@
+# VXUI React · v1.1.1
+
+**Website**: [ui.vx.link](https://ui.vx.link)  |  **GitHub**: [tmplink/vxui_react](https://github.com/tmplink/vxui_react)  |  [中文](README.md)
+
+VXUI React is a general-purpose React UI component library designed for admin panels, ops dashboards, internal tools, and data-heavy interfaces.
+
+The documentation follows the conventions of popular UI frameworks: installation first, then a minimal working example, then scenario-specific component code.
+
+## Installation
+
+Install from npm:
+
+```bash
+npm install vxui-react
+```
+
+`react` and `react-dom` must be provided by the host application.
+
+## Import Styles
+
+```tsx
+import 'vxui-react/styles.css';
+```
+
+## Basic Setup
+
+```tsx
+// src/main.tsx
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider, ToastProvider, themePresets } from 'vxui-react';
+import App from './App';
+import 'vxui-react/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ThemeProvider themes={themePresets} defaultTheme="light">
+    <ToastProvider>
+      <App />
+    </ToastProvider>
+  </ThemeProvider>,
+);
+```
+
+## First Page
+
+```tsx
+import {
+  AppShell,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+} from 'vxui-react';
+
+const navSections = [
+  {
+    title: 'Workspace',
+    items: [{ key: 'overview', label: 'Overview', active: true }],
+  },
+];
+
+export function App() {
+  return (
+    <AppShell
+      brand="Acme Ops"
+      title="Overview"
+      description="Build internal tools with a single shell."
+      navSections={navSections}
+      headerActions={<Button size="sm">Create order</Button>}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Queue health</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Input label="Search orders" placeholder="PO-1024" />
+        </CardContent>
+      </Card>
+    </AppShell>
+  );
+}
+```
+
+## Form Example
+
+```tsx
+import { Button, Checkbox, Input, Select, Textarea } from 'vxui-react';
+
+export function ProjectForm() {
+  return (
+    <form style={{ display: 'grid', gap: 16 }}>
+      <Input label="Project name" placeholder="Northwind migration" />
+
+      <Select label="Release track" defaultValue="stable">
+        <option value="stable">Stable</option>
+        <option value="preview">Preview</option>
+        <option value="internal">Internal</option>
+      </Select>
+
+      <Textarea
+        label="Summary"
+        rows={4}
+        placeholder="Describe what changed in this release."
+      />
+
+      <Checkbox label="Notify operators after publish" defaultChecked />
+
+      <Button type="submit">Save changes</Button>
+    </form>
+  );
+}
+```
+
+## Feedback Example
+
+```tsx
+import { Alert, Button, Progress, useToast } from 'vxui-react';
+
+export function PublishActions() {
+  const { push } = useToast();
+
+  return (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <Alert variant="info" title="Ready to publish">
+        Confirm the release notes before you notify customers.
+      </Alert>
+
+      <Progress label="Rollout progress" value={72} showLabel />
+
+      <Button
+        onClick={() =>
+          push({
+            tone: 'success',
+            title: 'Release published',
+            description: 'Customers can see the new version now.',
+          })
+        }
+      >
+        Publish release
+      </Button>
+    </div>
+  );
+}
+```
+
+## Custom Theme
+
+```tsx
+import { ThemeProvider, createTheme, themePresets } from 'vxui-react';
+
+const themes = {
+  ...themePresets,
+  ocean: createTheme('dark', {
+    label: 'Ocean',
+    tokens: {
+      '--vx-primary': '#38bdf8',
+      '--vx-primary-strong': '#0ea5e9',
+      '--vx-primary-soft': 'rgba(56, 189, 248, 0.16)',
+      '--vx-bg': '#06131f',
+      '--vx-surface': '#0d2236',
+    },
+  }),
+};
+
+export function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={themes} defaultTheme="ocean">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+Use `useTheme()` at runtime to read the current theme or call `setTheme('ocean')` to switch to any registered theme.
+
+## What's Included
+
+- **Layout**: AppShell, Card, Separator, Breadcrumb, Pagination, Resizable, ScrollArea
+- **Forms**: Input, Select, Checkbox, Radio, Textarea, Slider, Switch, NumberInput, TagInput, ColorPicker, DatePicker, FileUpload, Form, Rating, Combobox
+- **Feedback**: Alert, AlertDialog, Toast, Progress, Skeleton, Spinner, Stepper, Timeline, EmptyState
+- **Overlay**: Dialog, Sheet, Popover, DropdownMenu, ContextMenu, Tooltip, HoverCard, CommandPalette, Menubar, NavigationMenu
+- **Data Display**: Avatar, Table, Badge, Tabs, Accordion, TreeView, Carousel, Calendar
+- **Typography**: Heading, Text, Label, CodeBlock
+- **Mobile**: MobileShell, BottomNav, ActionSheet, MobileDrawer, MobileList
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Validation & Build
+
+```bash
+# TypeScript type check
+npm run typecheck
+
+# Build component library (for npm publish)
+npm run build
+
+# Build demo site (for Pages deployment, output to dist-demo/)
+npm run build:demo
+```

package/README.md

@@ -1,6 +1,8 @@
-# VXUI React
+# VXUI React · v1.1.3
 
-VXUI React 是对原始 VXUI Foundation 的 React 重写版本，目标是提供一套适合后台、运营台、仪表盘和内部工具的通用 UI 组件库。
+**官网**：[ui.vx.link](https://ui.vx.link)  |  **GitHub**：[tmplink/vxui_react](https://github.com/tmplink/vxui_react)  |  [English](README.en.md)
+
+VXUI React 是一套适合后台、运营台、仪表盘和内部工具的通用 UI 组件库。
 
 文档内容现在按流行 UI 框架的写法组织：先给安装方式，再给最小可运行示例，最后给分场景的组件代码。
 
@@ -176,12 +178,13 @@ export function Root({ children }: { children: React.ReactNode }) {
 
 ## 当前包含
 
-- Layout: AppShell、Card、Separator、Breadcrumb、Pagination
-- Forms: Input、Select、Checkbox、Radio、Textarea、Slider、Switch
-- Feedback: Alert、Toast、Progress、Skeleton、Spinner
-- Overlay: Dialog、Popover、DropdownMenu、Tooltip
-- Data Display: Avatar、Table、Badge
-- Mobile: MobileShell、BottomNav、ActionSheet、MobileDrawer
+- **Layout**: AppShell、Card、Separator、Breadcrumb、Pagination、Resizable、ScrollArea
+- **Forms**: Input、Select、Checkbox、Radio、Textarea、Slider、Switch、NumberInput、TagInput、ColorPicker、DatePicker、FileUpload、Form、Rating、Combobox
+- **Feedback**: Alert、AlertDialog、Toast、Progress、Skeleton、Spinner、Stepper、Timeline、EmptyState
+- **Overlay**: Dialog、Sheet、Popover、DropdownMenu、ContextMenu、Tooltip、HoverCard、CommandPalette、Menubar、NavigationMenu
+- **Data Display**: Avatar、Table、Badge、Tabs、Accordion、TreeView、Carousel、Calendar
+- **Typography**: Heading、Text、Label、CodeBlock
+- **Mobile**: MobileShell、BottomNav、ActionSheet、MobileDrawer、MobileList
 
 ## 本地开发
 
@@ -193,6 +196,12 @@ npm run dev
 ## 验证与构建
 
 ```bash
+# TypeScript 类型检查
 npm run typecheck
+
+# 构建组件库（用于 npm publish）
 npm run build
+
+# 构建演示站（用于 Pages 部署，输出至 dist-demo/）
+npm run build:demo
 ```

package/dist/404.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>VXUI React</title>
+  <script>
+    // GitHub Pages SPA redirect hack.
+    // Redirects all 404s back to index.html, preserving the full path as a
+    // query-string so the SPA router can restore it client-side.
+    var l = window.location;
+    l.replace(
+      l.protocol + '//' + l.host + '/?p=' +
+      encodeURIComponent(l.pathname + l.search) + l.hash
+    );
+  </script>
+</head>
+<body></body>
+</html>

package/dist/_redirects

@@ -0,0 +1 @@
+/*  /index.html  200

package/dist/colorful_flat_icon.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="层_1" data-name="层 1" viewBox="0 0 192 192">
+  <defs>
+    <!-- 日落橙金渐变背景 -->
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%"   stop-color="#C0392B"/>
+      <stop offset="30%"  stop-color="#E8541A"/>
+      <stop offset="65%"  stop-color="#F39C12"/>
+      <stop offset="100%" stop-color="#F1C40F"/>
+    </linearGradient>
+    <!-- 左侧形状：白色微暖 -->
+    <linearGradient id="shapeGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%"   stop-color="#FFFFFF" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#FFF5E0" stop-opacity="0.93"/>
+    </linearGradient>
+    <!-- 右侧形状：白色微暖 -->
+    <linearGradient id="shapeGrad2" x1="100%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%"   stop-color="#FFFFFF" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#FFF8E7" stop-opacity="0.93"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 圆角矩形背景：炫彩渐变 -->
+  <rect width="192" height="192" rx="22.88" fill="url(#bgGradient)"/>
+
+  <!-- 左侧 X 字形 -->
+  <polygon
+    points="45 36.75 28.5 36.75 61.5 90.75 26.25 144 42.75 144 79.5 91.5 45 36.75"
+    fill="url(#shapeGrad1)"/>
+
+  <!-- 右侧 XX 字形 -->
+  <polygon
+    points="162.75 36.75 141 36.75 115.5 81 91.5 37.5 68.25 37.5 102.75 91.5 66 144 88.5 144 114 102.75 138.75 144.75 161.25 144.75 126.75 90.75 162.75 36.75"
+    fill="url(#shapeGrad2)"/>
+
+  <!-- 底部装饰：暖色圆点 -->
+  <circle cx="31.5"   cy="170.63" r="3.75" fill="#FF4D4D"/>
+  <circle cx="42.75"  cy="170.63" r="3.75" fill="#FF8C00"/>
+  <circle cx="54"     cy="170.63" r="3.75" fill="#FFC300"/>
+  <circle cx="131.25" cy="170.63" r="3.75" fill="#FF6B35"/>
+  <circle cx="142.5"  cy="170.63" r="3.75" fill="#FFD700"/>
+
+  <!-- 底部装饰：短横条（暖色） -->
+  <rect x="60.75"  y="166.88" width="18.75" height="7.5" rx="3.75" fill="#E74C3C"/>
+  <rect x="105"    y="166.88" width="18.75" height="7.5" rx="3.75" fill="#F39C12"/>
+  <rect x="149.25" y="166.88" width="18.75" height="7.5" rx="3.75" fill="#FFEAA7"/>
+</svg>