@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/pages/Dashboard.tsx

@@ -0,0 +1,87 @@
+import { Link } from 'react-router-dom';
+import { useTheme } from '../context/useTheme';
+import { Sun, Moon } from 'lucide-react';
+
+export const Dashboard = () => {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <div className="min-h-screen bg-(--bg-secondary) p-8 font-sans transition-colors duration-300">
+            <header className="mb-12 max-w-4xl mx-auto flex items-start justify-between">
+                <div>
+                    <h1 className="text-4xl font-black text-(--text-primary) mb-4 tracking-tight">
+                        Slack Base UI
+                    </h1>
+                    <p className="text-xl text-(--text-secondary) leading-relaxed">
+                        A recreation of the Slack interface using <code className="bg-(--bg-hover) px-1.5 py-0.5 rounded text-(--text-primary) text-sm">@base-ui/react</code>.
+                        This project demonstrates how to build complex, polished applications with modern component primitives.
+                    </p>
+                </div>
+                <button
+                    onClick={toggleTheme}
+                    className="p-2 rounded-full bg-(--bg-hover) text-(--text-primary) hover:bg-(--border-light) transition-colors"
+                    title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+                >
+                    {theme === 'light' ? <Moon size={24} /> : <Sun size={24} />}
+                </button>
+            </header>
+
+            <main className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
+
+                {/* Featured Example Card */}
+                <Link to="/examples/slack" className="group block">
+                    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1">
+                        <div className="h-48 bg-[#4A154B] flex items-center justify-center relative pattern-grid-lg">
+                            {/* Abstract representation of Slack UI */}
+                            <div className="bg-white/10 w-3/4 h-3/4 rounded-lg backdrop-blur-sm border border-white/20 shadow-2xl flex">
+                                <div className="w-1/4 border-r border-white/10 h-full p-2 space-y-2">
+                                    <div className="w-8 h-8 bg-white/20 rounded-md"></div>
+                                    <div className="h-2 w-full bg-white/20 rounded"></div>
+                                    <div className="h-2 w-2/3 bg-white/20 rounded"></div>
+                                </div>
+                                <div className="flex-1 p-2 space-y-2">
+                                    <div className="h-8 w-full bg-white/20 rounded-md"></div>
+                                    <div className="space-y-2 mt-4">
+                                        <div className="h-12 bg-white/10 rounded-md"></div>
+                                        <div className="h-12 bg-white/10 rounded-md"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="p-6">
+                            <div className="flex items-center justify-between mb-2">
+                                <span className="text-xs font-bold tracking-wider text-[#4A154B] uppercase bg-[#4A154B]/5 px-2 py-1 rounded">Application Demo</span>
+                            </div>
+                            <h2 className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-[#4A154B] transition-colors">Slack Clone</h2>
+                            <p className="text-gray-500">
+                                A full-page application layout featuring Sidebar, Channel Header, Message List, and Rich Text Composer.
+                            </p>
+                        </div>
+                    </div>
+                </Link>
+
+                {/* Component Library Card */}
+                <Link to="/components" className="group block h-full">
+                    <div className="bg-(--bg-primary) rounded-2xl shadow-sm border border-(--border-light) overflow-hidden p-6 hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1 h-full flex flex-col">
+                        <h2 className="text-2xl font-bold text-(--text-primary) mb-4 group-hover:text-[#1164A3] transition-colors">Component Library</h2>
+                        <p className="text-(--text-secondary) mb-6">
+                            Individual component demonstrations and documentation. Use these primitives to build your own interfaces.
+                        </p>
+                        <div className="grid grid-cols-2 gap-3 mb-6">
+                            {['Button', 'Avatar', 'Badge', 'Input', 'Tooltip', 'IconButton', 'Dialog'].map((component) => (
+                                <div key={component} className="p-3 border border-(--border-light) rounded-lg bg-(--bg-secondary) text-sm font-medium text-(--text-secondary) flex items-center gap-2">
+                                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
+                                    {component}
+                                </div>
+                            ))}
+                        </div>
+                        <div className="mt-auto pt-6 border-t border-(--border-light)">
+                            <p className="text-sm text-(--text-muted) italic group-hover:text-[#1164A3] transition-colors">Click to explore components &rarr;</p>
+                        </div>
+                    </div>
+                </Link>
+
+            </main>
+        </div>
+    );
+};

package/src/pages/QuickStartDemo.tsx

@@ -0,0 +1,262 @@
+import { useState } from 'react'
+import { AlertDialog } from '../components/AlertDialog'
+import { Form, FormInput, FormTextarea, FormSelect, FormCheckbox, FormActions } from '../components/Form'
+import { Button } from '../components/Button'
+
+/**
+ * 快速上手演示页面
+ * 展示 AlertDialog 和 Form 组件的基本使用
+ */
+export const QuickStartDemo = () => {
+  const [alertOpen, setAlertOpen] = useState(false)
+
+  return (
+    <div className="min-h-screen bg-(--bg-muted) p-8">
+      <div className="max-w-4xl mx-auto space-y-12">
+        <header>
+          <h1 className="text-3xl font-black text-(--text-primary) mb-2">
+            快速上手演示
+          </h1>
+          <p className="text-(--text-secondary)">
+            AlertDialog 和 Form 组件的基本使用示例
+          </p>
+        </header>
+
+        {/* AlertDialog 示例 */}
+        <section className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+          <h2 className="text-xl font-bold text-(--text-primary) mb-4">
+            AlertDialog 示例
+          </h2>
+          <p className="text-(--text-secondary) mb-4">
+            点击按钮打开警告对话框
+          </p>
+
+          <Button variant="danger" onClick={() => setAlertOpen(true)}>
+            删除账户
+          </Button>
+
+          <AlertDialog
+            open={alertOpen}
+            onOpenChange={setAlertOpen}
+            title="确认删除账户？"
+            description="此操作无法撤销，将永久删除您的账户。"
+            variant="danger"
+            confirmText="确认删除"
+            cancelText="取消"
+            onConfirm={async () => {
+              // 模拟异步操作
+              await new Promise(resolve => setTimeout(resolve, 1000))
+              console.log('账户已删除')
+              alert('账户已删除！')
+            }}
+          >
+            <div className="space-y-2">
+              <p className="text-(--text-secondary)">
+                删除后将丢失：
+              </p>
+              <ul className="list-disc list-inside text-(--text-secondary) space-y-1 ml-2">
+                <li>所有个人数据</li>
+                <li>聊天记录</li>
+                <li>上传的文件</li>
+              </ul>
+            </div>
+          </AlertDialog>
+        </section>
+
+        {/* Form 示例 */}
+        <section className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+          <h2 className="text-xl font-bold text-(--text-primary) mb-4">
+            Form 示例
+          </h2>
+          <p className="text-(--text-secondary) mb-6">
+            一个带验证的完整表单
+          </p>
+
+          <Form
+            initialValues={{
+              name: '',
+              email: '',
+              role: '',
+              message: '',
+              terms: false,
+            }}
+            validate={(values) => {
+              const errors: Record<string, string> = {}
+
+              if (!values.name) {
+                errors.name = '姓名为必填项'
+              } else if (values.name.length < 2) {
+                errors.name = '姓名至少需要 2 个字符'
+              }
+
+              if (!values.email) {
+                errors.email = '邮箱为必填项'
+              } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+                errors.email = '邮箱格式不正确'
+              }
+
+              if (!values.role) {
+                errors.role = '请选择角色'
+              }
+
+              if (!values.message) {
+                errors.message = '消息为必填项'
+              } else if (values.message.length < 10) {
+                errors.message = '消息至少需要 10 个字符'
+              }
+
+              if (!values.terms) {
+                errors.terms = '必须同意条款才能继续'
+              }
+
+              return errors
+            }}
+            onSubmit={(values) => {
+              console.log('表单提交：', values)
+              alert(`表单提交成功！\n\n姓名：${values.name}\n邮箱：${values.email}\n角色：${values.role}`)
+            }}
+          >
+            <div className="space-y-4">
+              <FormInput
+                name="name"
+                label="姓名"
+                placeholder="请输入您的姓名"
+                required
+                fullWidth
+              />
+
+              <FormInput
+                name="email"
+                label="邮箱"
+                type="email"
+                placeholder="your@email.com"
+                required
+                fullWidth
+              />
+
+              <FormSelect
+                name="role"
+                label="角色"
+                required
+                fullWidth
+                options={[
+                  { value: 'developer', label: '开发者' },
+                  { value: 'designer', label: '设计师' },
+                  { value: 'manager', label: '项目经理' },
+                  { value: 'other', label: '其他' },
+                ]}
+              />
+
+              <FormTextarea
+                name="message"
+                label="留言"
+                placeholder="告诉我们您的想法..."
+                required
+                fullWidth
+                rows={4}
+              />
+
+              <FormCheckbox
+                name="terms"
+                label="我同意服务条款和隐私政策"
+              />
+
+              <FormActions>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => {
+                    console.log('表单取消')
+                  }}
+                >
+                  取消
+                </Button>
+                <Button type="submit" variant="primary">
+                  提交表单
+                </Button>
+              </FormActions>
+            </div>
+          </Form>
+        </section>
+
+        {/* 代码示例 */}
+        <section className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+          <h2 className="text-xl font-bold text-(--text-primary) mb-4">
+            代码示例
+          </h2>
+
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-semibold text-(--text-primary) mb-2">AlertDialog 用法</h3>
+              <pre className="bg-(--bg-secondary) p-4 rounded text-sm overflow-x-auto">
+                <code>{`<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="确认删除？"
+  description="此操作无法撤销"
+  variant="danger"
+  onConfirm={async () => {
+    await deleteItem()
+  }}
+/>`}</code>
+              </pre>
+            </div>
+
+            <div>
+              <h3 className="font-semibold text-(--text-primary) mb-2">Form 用法</h3>
+              <pre className="bg-(--bg-secondary) p-4 rounded text-sm overflow-x-auto">
+                <code>{`<Form
+  initialValues={{ name: '', email: '' }}
+  validate={(values) => {
+    const errors = {}
+    if (!values.name) errors.name = '必填'
+    return errors
+  }}
+  onSubmit={(values) => {
+    console.log(values)
+  }}
+>
+  <FormInput name="name" label="姓名" required />
+  <FormInput name="email" label="邮箱" required />
+  <FormActions>
+    <Button type="submit">提交</Button>
+  </FormActions>
+</Form>`}</code>
+              </pre>
+            </div>
+          </div>
+        </section>
+
+        {/* 更多资源 */}
+        <section className="bg-(--bg-primary) rounded-lg border border-(--border-light) p-6">
+          <h2 className="text-xl font-bold text-(--text-primary) mb-4">
+            📚 更多资源
+          </h2>
+          <ul className="space-y-2 text-(--text-secondary)">
+            <li>
+              📖 <a href="/components" className="text-(--slack-blue) hover:underline">
+                查看完整组件展示
+              </a>
+            </li>
+            <li>
+              📝 <a href="https://github.com" className="text-(--slack-blue) hover:underline">
+                阅读详细文档
+              </a> (docs/ALERTDIALOG_AND_FORM_GUIDE.md)
+            </li>
+            <li>
+              ⚡️ <a href="https://github.com" className="text-(--slack-blue) hover:underline">
+                快速参考
+              </a> (docs/QUICK_REFERENCE.md)
+            </li>
+            <li>
+              🎯 <a href="https://github.com" className="text-(--slack-blue) hover:underline">
+                最佳实践
+              </a> (CHANGELOG.md)
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  )
+}
+