seven-design-ui 0.0.1

package/packages/core/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'SevenDesignCore',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'esm' : 'cjs'}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})

package/packages/theme/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@seven-design-ui/theme",
+  "version": "0.1.0",
+  "description": "SevenDesign UI 主题样式包",
+  "main": "dist/index.css",
+  "module": "dist/index.css",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/theme/src/index.css

@@ -0,0 +1,138 @@
+/* SevenDesign 主题样式 */
+
+/* ========== CSS Variables ========== */
+:root {
+  /* 品牌色 */
+  --sd-color-primary: #409eff;
+  --sd-color-success: #67c23a;
+  --sd-color-warning: #e6a23c;
+  --sd-color-danger: #f56c6c;
+  --sd-color-info: #909399;
+
+  /* 主色调色板 */
+  --sd-color-primary-light-3: #79bbff;
+  --sd-color-primary-light-5: #a0cfff;
+  --sd-color-primary-light-7: #c6e2ff;
+  --sd-color-primary-light-8: #d9ecff;
+  --sd-color-primary-light-9: #ecf5ff;
+  --sd-color-primary-dark-2: #337ecc;
+
+  /* Success 色调色板 */
+  --sd-color-success-light-5: #b3e19d;
+  --sd-color-success-light-9: #f0f9eb;
+
+  /* Warning 色调色板 */
+  --sd-color-warning-light-5: #f3d19e;
+  --sd-color-warning-light-9: #fdf6ec;
+
+  /* Danger 色调色板 */
+  --sd-color-danger-light-5: #f89898;
+  --sd-color-danger-light-9: #fef0f0;
+
+  /* Info 色调色板 */
+  --sd-color-info-light-5: #c8c9cc;
+  --sd-color-info-light-9: #f4f4f5;
+
+  /* 中性色 */
+  --sd-color-white: #ffffff;
+  --sd-color-black: #000000;
+  --sd-text-color-primary: #303133;
+  --sd-text-color-regular: #606266;
+  --sd-text-color-secondary: #909399;
+  --sd-text-color-placeholder: #a8abb2;
+  --sd-text-color-disabled: #c0c4cc;
+
+  /* 边框颜色 */
+  --sd-border-color: #dcdfe6;
+  --sd-border-color-light: #e4e7ed;
+  --sd-border-color-lighter: #ebeef5;
+  --sd-border-color-extra-light: #f2f6fc;
+  --sd-border-color-dark: #d4d7de;
+  --sd-border-color-darker: #cdd0d6;
+
+  /* 背景色 */
+  --sd-fill-color-blank: #ffffff;
+  --sd-bg-color: #ffffff;
+  --sd-bg-color-page: #f2f3f5;
+  --sd-bg-color-overlay: #ffffff;
+
+  /* 尺寸 */
+  --sd-border-radius-base: 4px;
+  --sd-border-radius-small: 2px;
+  --sd-border-radius-round: 20px;
+  --sd-border-radius-circle: 100%;
+
+  /* 字体大小 */
+  --sd-font-size-extra-large: 20px;
+  --sd-font-size-large: 18px;
+  --sd-font-size-medium: 16px;
+  --sd-font-size-base: 14px;
+  --sd-font-size-small: 13px;
+  --sd-font-size-extra-small: 12px;
+
+  /* 组件尺寸 */
+  --sd-component-size-large: 40px;
+  --sd-component-size-default: 32px;
+  --sd-component-size-small: 24px;
+
+  /* 阴影 */
+  --sd-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --sd-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --sd-box-shadow-lighter: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+  --sd-box-shadow-dark: 0 2px 16px 0 rgba(0, 0, 0, 0.12);
+
+  /* 禁用状态 */
+  --sd-disabled-bg-color: var(--sd-fill-color-blank);
+  --sd-disabled-text-color: var(--sd-text-color-placeholder);
+  --sd-disabled-border-color: var(--sd-border-color-light);
+
+  /* 过渡动画 */
+  --sd-transition-duration: 0.3s;
+  --sd-transition-duration-fast: 0.2s;
+  --sd-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --sd-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* 暗色主题 */
+.sd-dark {
+  --sd-color-primary: #409eff;
+  --sd-text-color-primary: #e5eaf3;
+  --sd-text-color-regular: #cfd3dc;
+  --sd-text-color-secondary: #a3a6ad;
+  --sd-text-color-placeholder: #8d9095;
+  --sd-text-color-disabled: #6c6e72;
+  --sd-border-color: #4c4d4f;
+  --sd-border-color-light: #414243;
+  --sd-border-color-lighter: #363637;
+  --sd-border-color-extra-light: #2b2b2c;
+  --sd-fill-color-blank: #1d1e1f;
+  --sd-bg-color: #141414;
+  --sd-bg-color-page: #0a0a0a;
+  --sd-bg-color-overlay: #1d1e1f;
+}
+
+/* ========== 重置样式 ========== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ========== 工具类 ========== */
+.sd-clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.sd-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/packages/theme/src/index.ts

@@ -0,0 +1 @@
+import './index.css'

package/packages/theme/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'SevenDesignTheme',
+      fileName: 'index',
+      formats: ['es'],
+    },
+    outDir: 'dist',
+    cssCodeSplit: false,
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        assetFileNames: 'index.css',
+      },
+    },
+  },
+})

package/play/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SevenDesign Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/play/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@seven-design-ui/play",
+  "version": "0.0.1",
+  "private": true,
+  "description": "SevenDesign 组件开发调试环境",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@seven-design-ui/components": "workspace:*",
+    "@seven-design-ui/core": "workspace:*",
+    "@seven-design-ui/theme": "workspace:*",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}

package/play/src/App.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState } from 'react'
+import { Button, Input, Switch, Pagination } from '@seven-design-ui/components'
+
+function CustomContentSwitch() {
+  const [switch1, setSwitch1] = useState(true)
+  const [switch2, setSwitch2] = useState(false)
+  const [switch3, setSwitch3] = useState(true)
+  const [switch4, setSwitch4] = useState(false)
+
+  return (
+    <div style={{ marginTop: '20px' }}>
+      <h3>自定义开关内容和背景色测试</h3>
+
+      <div style={{ display: 'flex', gap: '20px', alignItems: 'center', marginBottom: '20px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Switch
+            checkedNode="开"
+            unCheckedNode="关"
+            checked={switch1}
+            onChange={setSwitch1}
+          />
+          <span style={{ fontSize: '12px', color: '#666' }}>文字内容</span>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Switch
+            checkedNode="1"
+            unCheckedNode="0"
+            checked={switch2}
+            onChange={setSwitch2}
+          />
+          <span style={{ fontSize: '12px', color: '#666' }}>数字内容</span>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Switch
+            checkedNode="✓"
+            unCheckedNode="✗"
+            checked={switch3}
+            onChange={setSwitch3}
+          />
+          <span style={{ fontSize: '12px', color: '#666' }}>符号内容</span>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Switch
+            checkedNode={<span style={{ color: 'green', fontWeight: 'bold' }}>开</span>}
+            unCheckedNode={<span style={{ color: 'red', fontWeight: 'bold' }}>关</span>}
+            defaultChecked={true}
+          />
+          <span style={{ fontSize: '12px', color: '#666' }}>React元素内容</span>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', gap: '20px', alignItems: 'center', marginBottom: '20px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Switch
+            checkedColor="green"
+            unCheckedColor="red"
+            checked={switch4}
+            onChange={setSwitch4}
+          />
+          <span style={{ fontSize: '12px', color: '#666' }}>自定义背景色</span>
+        </div>
+      </div>
+
+      <p style={{ fontSize: '12px', color: '#666' }}>
+        状态: 开关1={switch1 ? '开' : '关'}, 开关2={switch2 ? '1' : '0'}, 开关3={switch3 ? '✓' : '✗'}, 开关4={switch4 ? '绿' : '红'}
+      </p>
+    </div>
+  )
+}
+
+function App() {
+  const [inputValue, setInputValue] = useState('')
+  const [switchChecked, setSwitchChecked] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [paginationPage, setPaginationPage] = useState(1)
+  const [paginationSize, setPaginationSize] = useState(10)
+
+  const handleClick = () => {
+    setLoading(true)
+    setTimeout(() => setLoading(false), 2000)
+  }
+
+  const handlePaginationChange = (page: number, pageSize: number) => {
+    setPaginationPage(page)
+    setPaginationSize(pageSize)
+    console.log(`页码: ${page}, 每页容量: ${pageSize}`)
+  }
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>SevenDesign 组件库调试环境</h1>
+        <p>本地开发和测试组件的 Playground</p>
+      </header>
+
+      <main className="app-main">
+        {/* Button 示例 */}
+        <section className="demo-section">
+          <h2>Button 按钮</h2>
+          <div className="demo-row">
+            <Button>默认按钮</Button>
+            <Button type="primary">主要按钮</Button>
+            <Button type="success">成功按钮</Button>
+            <Button type="warning">警告按钮</Button>
+            <Button type="danger">危险按钮</Button>
+            <Button type="info">信息按钮</Button>
+          </div>
+          <div className="demo-row">
+            <Button plain>朴素按钮</Button>
+            <Button type="primary" plain>
+              主要按钮
+            </Button>
+            <Button type="success" plain>
+              成功按钮
+            </Button>
+          </div>
+          <div className="demo-row">
+            <Button round>圆角按钮</Button>
+            <Button type="primary" round>
+              主要按钮
+            </Button>
+          </div>
+          <div className="demo-row">
+            <Button size="large">大型按钮</Button>
+            <Button>默认按钮</Button>
+            <Button size="small">小型按钮</Button>
+          </div>
+          <div className="demo-row">
+            <Button loading={loading} type="primary" onClick={handleClick}>
+              {loading ? '加载中...' : '点击加载'}
+            </Button>
+            <Button disabled>禁用按钮</Button>
+          </div>
+        </section>
+
+        {/* Input 示例 */}
+        <section className="demo-section">
+          <h2>Input 输入框</h2>
+          <div className="demo-column">
+            <Input placeholder="请输入内容" value={inputValue} onInput={setInputValue} />
+            <Input placeholder="可清空的输入框" clearable />
+            <Input placeholder="密码输入框" type="password" showPassword />
+            <Input placeholder="禁用状态" disabled />
+            <div className="demo-row">
+              <Input placeholder="大尺寸" size="large" />
+              <Input placeholder="默认尺寸" />
+              <Input placeholder="小尺寸" size="small" />
+            </div>
+          </div>
+        </section>
+
+        {/* Switch 示例 */}
+        <section className="demo-section">
+          <h2>Switch 开关</h2>
+          <div className="demo-row">
+            <Switch checked={switchChecked} onChange={setSwitchChecked} />
+            <Switch defaultChecked />
+            <Switch disabled />
+            <Switch loading />
+          </div>
+          <p className="demo-tip">当前状态: {switchChecked ? '开启' : '关闭'}</p>
+
+          {/* 自定义内容测试 */}
+          <CustomContentSwitch />
+        </section>
+
+        {/* Pagination 示例 */}
+        <section className="demo-section">
+          <h2>Pagination 分页器</h2>
+
+          {/* 基础使用 */}
+          <div className="demo-column">
+            <h3>基础使用</h3>
+            <Pagination
+              total={100}
+              defaultCurrent={1}
+              defaultPageSize={10}
+              onChange={handlePaginationChange}
+            />
+            <p className="demo-tip">当前页码: {paginationPage}, 每页容量: {paginationSize}</p>
+          </div>
+
+          {/* 不同大小 */}
+          <div className="demo-column">
+            <h3>不同大小</h3>
+            <div className="demo-row">
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+                <Pagination total={50} size="s" />
+                <span style={{ fontSize: '12px', color: '#666' }}>小尺寸 (s)</span>
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+                <Pagination total={50} size="m" />
+                <span style={{ fontSize: '12px', color: '#666' }}>中等尺寸 (m)</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 自定义页码按钮数 */}
+          <div className="demo-column">
+            <h3>自定义最大页码按钮数</h3>
+            <Pagination total={200} pagerCount={5} defaultCurrent={10} />
+            <p className="demo-tip">最大显示5个页码按钮</p>
+          </div>
+
+          {/* 自定义每页容量选项 */}
+          <div className="demo-column">
+            <h3>自定义每页容量选项</h3>
+            <Pagination
+              total={500}
+              pageSizeOptions={[5, 10, 20, 50]}
+              defaultPageSize={5}
+            />
+            <p className="demo-tip">每页容量选项: 5, 10, 20, 50</p>
+          </div>
+
+          {/* 跳转功能 */}
+          <div className="demo-column">
+            <h3>跳转功能</h3>
+            <Pagination
+              total={100}
+              showQuickJumper={true}
+              defaultCurrent={5}
+            />
+            <p className="demo-tip">可以直接跳转到指定页码</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export default App

package/play/src/index.css

@@ -0,0 +1,93 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.app-header {
+  text-align: center;
+  color: white;
+  margin-bottom: 60px;
+}
+
+.app-header h1 {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.app-header p {
+  font-size: 18px;
+  opacity: 0.9;
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.demo-section {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+}
+
+.demo-section h2 {
+  font-size: 24px;
+  color: #303133;
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.demo-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.demo-column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.demo-tip {
+  margin-top: 12px;
+  padding: 12px;
+  background: #f0f9ff;
+  border-left: 4px solid #409eff;
+  color: #606266;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+  .app-header h1 {
+    font-size: 32px;
+  }
+
+  .demo-section {
+    padding: 20px;
+  }
+}

package/play/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+import '../../packages/components/dist/style.css'
+
+const root = document.getElementById('root')
+if (root) {
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  )
+}

package/play/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/play/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+})

package/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - 'packages/*'
+  - 'docs'
+  - 'play'

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config