@robsun/create-keystone-app 0.2.11 → 0.2.13

package/template/apps/web/package.json

@@ -1,52 +1,52 @@
-{
-  "name": "web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:strict": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run --passWithNoTests"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^6.1.0",
-    "@robsun/keystone-web-core": "^0.2.1",
-    "antd": "^6.0.1",
-    "dayjs": "^1.11.19",
-    "i18next": "^24.2.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-i18next": "^15.5.1",
-    "react-router-dom": "^7.10.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.22",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "jsdom": "^24.1.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.17",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4",
-    "vitest": "^2.1.4"
-  }
-}
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:strict": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@robsun/keystone-web-core": "^0.3.0",
+    "antd": "^6.0.1",
+    "dayjs": "^1.11.19",
+    "i18next": "^24.2.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^15.5.1",
+    "react-router-dom": "^7.10.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^24.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vitest": "^2.1.4"
+  }
+}

package/template/apps/web/src/app.config.ts

@@ -1,24 +1,24 @@
-import type { KeystoneWebConfig } from '@robsun/keystone-web-core'
-
-export const appConfig: Partial<KeystoneWebConfig> = {
-  brand: {
-    name: 'Keystone',
-    shortName: 'KS',
-    appName: 'Keystone',
-    platformName: 'Keystone Platform',
-  },
-  modules: {
-    enabled: ['keystone', 'example'],
-  },
-  approval: {
-    businessTypes: [{ value: 'general', label: 'General Flow' }],
-  },
-  ui: {
-    i18n: {
-      enabled: true,
-      defaultLocale: 'zh-CN',
-      supportedLocales: ['zh-CN', 'en-US'],
-    },
-  },
-}
-
+import type { KeystoneWebConfig } from '@robsun/keystone-web-core'
+
+export const appConfig: Partial<KeystoneWebConfig> = {
+  brand: {
+    name: 'Keystone',
+    shortName: 'KS',
+    appName: 'Keystone',
+    platformName: 'Keystone Platform',
+  },
+  modules: {
+    enabled: ['keystone', 'example'],
+  },
+  approval: {
+    businessTypes: [{ value: 'general', label: 'General Flow' }],
+  },
+  ui: {
+    i18n: {
+      enabled: true,
+      defaultLocale: 'zh-CN',
+      supportedLocales: ['zh-CN', 'en-US'],
+    },
+  },
+}
+

package/template/apps/web/src/modules/example/index.ts

@@ -1,10 +1,10 @@
-import { registerModule, loadModuleLocales } from '@robsun/keystone-web-core'
-import { exampleRoutes } from './routes'
-
-// Load module i18n translations
-loadModuleLocales('example', {
-  'zh-CN': () => import('./locales/zh-CN/example.json'),
-  'en-US': () => import('./locales/en-US/example.json'),
-})
-
-registerModule({ name: 'example', routes: exampleRoutes })
+import { registerModule, loadModuleLocales } from '@robsun/keystone-web-core'
+import { exampleRoutes } from './routes'
+
+// Load module i18n translations
+loadModuleLocales('example', {
+  'zh-CN': () => import('./locales/zh-CN/example.json'),
+  'en-US': () => import('./locales/en-US/example.json'),
+})
+
+registerModule({ name: 'example', routes: exampleRoutes })

package/template/apps/web/src/modules/example/pages/ExampleItemsPage.tsx

@@ -1,237 +1,237 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { App, Button, Card, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, Typography } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
-import { useTranslation } from 'react-i18next'
-import dayjs from 'dayjs'
-import {
-  createExampleItem,
-  deleteExampleItem,
-  listExampleItems,
-  updateExampleItem,
-} from '../services/exampleItems'
-import type { ExampleItem, ExampleItemStatus } from '../types'
-
-type ExampleItemFormValues = {
-  title: string
-  description?: string
-  status: ExampleItemStatus
-}
-
-const statusColors: Record<ExampleItemStatus, string> = {
-  active: 'success',
-  inactive: 'default',
-}
-
-export function ExampleItemsPage() {
-  const { t } = useTranslation('example')
-  const { t: tc } = useTranslation('common')
-  const { message } = App.useApp()
-  const [items, setItems] = useState<ExampleItem[]>([])
-  const [loading, setLoading] = useState(false)
-  const [modalOpen, setModalOpen] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [editingItem, setEditingItem] = useState<ExampleItem | null>(null)
-  const [form] = Form.useForm<ExampleItemFormValues>()
-
-  const statusOptions = useMemo(
-    () => [
-      { value: 'active', label: t('status.active') },
-      { value: 'inactive', label: t('status.inactive') },
-    ],
-    [t]
-  )
-
-  const fetchItems = useCallback(async () => {
-    setLoading(true)
-    try {
-      const data = await listExampleItems()
-      setItems(data)
-    } catch (err) {
-      const detail = err instanceof Error ? err.message : t('messages.loadFailed')
-      message.error(detail)
-    } finally {
-      setLoading(false)
-    }
-  }, [message, t])
-
-  useEffect(() => {
-    void fetchItems()
-  }, [fetchItems])
-
-  const openCreate = useCallback(() => {
-    setEditingItem(null)
-    setModalOpen(true)
-  }, [])
-
-  const openEdit = useCallback(
-    (item: ExampleItem) => {
-      setEditingItem(item)
-      setModalOpen(true)
-    },
-    []
-  )
-
-  const closeModal = useCallback(() => {
-    setModalOpen(false)
-    setEditingItem(null)
-  }, [])
-
-  useEffect(() => {
-    if (!modalOpen) {
-      return
-    }
-    form.resetFields()
-    if (editingItem) {
-      form.setFieldsValue({
-        title: editingItem.title,
-        description: editingItem.description,
-        status: editingItem.status,
-      })
-    } else {
-      form.setFieldsValue({ status: 'active' })
-    }
-  }, [editingItem, form, modalOpen])
-
-  const handleSubmit = useCallback(async () => {
-    let values: ExampleItemFormValues
-    try {
-      values = await form.validateFields()
-    } catch {
-      return
-    }
-
-    const payload = {
-      title: values.title.trim(),
-      description: values.description?.trim() ?? '',
-      status: values.status,
-    }
-
-    setSaving(true)
-    try {
-      if (editingItem) {
-        await updateExampleItem(editingItem.id, payload)
-        message.success(t('messages.updateSuccess'))
-      } else {
-        await createExampleItem(payload)
-        message.success(t('messages.createSuccess'))
-      }
-      closeModal()
-      await fetchItems()
-    } catch (err) {
-      const detail = err instanceof Error ? err.message : tc('messages.operationFailed')
-      message.error(detail)
-    } finally {
-      setSaving(false)
-    }
-  }, [closeModal, editingItem, fetchItems, form, message, t, tc])
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      try {
-        await deleteExampleItem(id)
-        await fetchItems()
-        message.success(t('messages.deleteSuccess'))
-      } catch (err) {
-        const detail = err instanceof Error ? err.message : tc('messages.operationFailed')
-        message.error(detail)
-      }
-    },
-    [fetchItems, message, t, tc]
-  )
-
-  const columns: ColumnsType<ExampleItem> = useMemo(
-    () => [
-      { title: t('table.name'), dataIndex: 'title', key: 'title' },
-      {
-        title: t('table.description'),
-        dataIndex: 'description',
-        key: 'description',
-        render: (value: string) =>
-          value ? <Typography.Text type="secondary">{value}</Typography.Text> : '-',
-      },
-      {
-        title: t('table.status'),
-        dataIndex: 'status',
-        key: 'status',
-        render: (value: ExampleItemStatus) => (
-          <Tag color={statusColors[value]}>{t(`status.${value}`)}</Tag>
-        ),
-      },
-      {
-        title: tc('table.updatedAt'),
-        dataIndex: 'updated_at',
-        key: 'updated_at',
-        render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
-      },
-      {
-        title: tc('table.actions'),
-        key: 'actions',
-        render: (_, record) => (
-          <Space>
-            <Button type="link" onClick={() => openEdit(record)}>
-              {tc('actions.edit')}
-            </Button>
-            <Popconfirm title={tc('confirm.deleteContent')} onConfirm={() => handleDelete(record.id)}>
-              <Button type="link" danger>
-                {tc('actions.delete')}
-              </Button>
-            </Popconfirm>
-          </Space>
-        ),
-      },
-    ],
-    [handleDelete, openEdit, t, tc]
-  )
-
-  return (
-    <Card
-      title={t('page.title')}
-      extra={
-        <Space>
-          <Button onClick={fetchItems} loading={loading}>
-            {tc('actions.refresh')}
-          </Button>
-          <Button type="primary" onClick={openCreate}>
-            {t('page.createButton')}
-          </Button>
-        </Space>
-      }
-    >
-      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
-        <Table<ExampleItem>
-          rowKey="id"
-          loading={loading}
-          columns={columns}
-          dataSource={items}
-          pagination={false}
-        />
-      </Space>
-
-      <Modal
-        title={editingItem ? tc('actions.edit') : tc('actions.create')}
-        open={modalOpen}
-        onCancel={closeModal}
-        onOk={handleSubmit}
-        confirmLoading={saving}
-        okText={editingItem ? tc('actions.save') : tc('actions.create')}
-        destroyOnHidden
-      >
-        <Form form={form} layout="vertical" initialValues={{ status: 'active' }}>
-          <Form.Item
-            label={t('form.nameLabel')}
-            name="title"
-            rules={[{ required: true, whitespace: true, message: tc('form.required') }]}
-          >
-            <Input placeholder={t('form.namePlaceholder')} allowClear />
-          </Form.Item>
-          <Form.Item label={t('form.descriptionLabel')} name="description">
-            <Input.TextArea rows={3} placeholder={t('form.descriptionPlaceholder')} />
-          </Form.Item>
-          <Form.Item label={t('table.status')} name="status" rules={[{ required: true, message: tc('form.required') }]}>
-            <Select options={statusOptions} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </Card>
-  )
-}
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { App, Button, Card, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, Typography } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { useTranslation } from 'react-i18next'
+import dayjs from 'dayjs'
+import {
+  createExampleItem,
+  deleteExampleItem,
+  listExampleItems,
+  updateExampleItem,
+} from '../services/exampleItems'
+import type { ExampleItem, ExampleItemStatus } from '../types'
+
+type ExampleItemFormValues = {
+  title: string
+  description?: string
+  status: ExampleItemStatus
+}
+
+const statusColors: Record<ExampleItemStatus, string> = {
+  active: 'success',
+  inactive: 'default',
+}
+
+export function ExampleItemsPage() {
+  const { t } = useTranslation('example')
+  const { t: tc } = useTranslation('common')
+  const { message } = App.useApp()
+  const [items, setItems] = useState<ExampleItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [editingItem, setEditingItem] = useState<ExampleItem | null>(null)
+  const [form] = Form.useForm<ExampleItemFormValues>()
+
+  const statusOptions = useMemo(
+    () => [
+      { value: 'active', label: t('status.active') },
+      { value: 'inactive', label: t('status.inactive') },
+    ],
+    [t]
+  )
+
+  const fetchItems = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await listExampleItems()
+      setItems(data)
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : t('messages.loadFailed')
+      message.error(detail)
+    } finally {
+      setLoading(false)
+    }
+  }, [message, t])
+
+  useEffect(() => {
+    void fetchItems()
+  }, [fetchItems])
+
+  const openCreate = useCallback(() => {
+    setEditingItem(null)
+    setModalOpen(true)
+  }, [])
+
+  const openEdit = useCallback(
+    (item: ExampleItem) => {
+      setEditingItem(item)
+      setModalOpen(true)
+    },
+    []
+  )
+
+  const closeModal = useCallback(() => {
+    setModalOpen(false)
+    setEditingItem(null)
+  }, [])
+
+  useEffect(() => {
+    if (!modalOpen) {
+      return
+    }
+    form.resetFields()
+    if (editingItem) {
+      form.setFieldsValue({
+        title: editingItem.title,
+        description: editingItem.description,
+        status: editingItem.status,
+      })
+    } else {
+      form.setFieldsValue({ status: 'active' })
+    }
+  }, [editingItem, form, modalOpen])
+
+  const handleSubmit = useCallback(async () => {
+    let values: ExampleItemFormValues
+    try {
+      values = await form.validateFields()
+    } catch {
+      return
+    }
+
+    const payload = {
+      title: values.title.trim(),
+      description: values.description?.trim() ?? '',
+      status: values.status,
+    }
+
+    setSaving(true)
+    try {
+      if (editingItem) {
+        await updateExampleItem(editingItem.id, payload)
+        message.success(t('messages.updateSuccess'))
+      } else {
+        await createExampleItem(payload)
+        message.success(t('messages.createSuccess'))
+      }
+      closeModal()
+      await fetchItems()
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : tc('messages.operationFailed')
+      message.error(detail)
+    } finally {
+      setSaving(false)
+    }
+  }, [closeModal, editingItem, fetchItems, form, message, t, tc])
+
+  const handleDelete = useCallback(
+    async (id: number) => {
+      try {
+        await deleteExampleItem(id)
+        await fetchItems()
+        message.success(t('messages.deleteSuccess'))
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : tc('messages.operationFailed')
+        message.error(detail)
+      }
+    },
+    [fetchItems, message, t, tc]
+  )
+
+  const columns: ColumnsType<ExampleItem> = useMemo(
+    () => [
+      { title: t('table.name'), dataIndex: 'title', key: 'title' },
+      {
+        title: t('table.description'),
+        dataIndex: 'description',
+        key: 'description',
+        render: (value: string) =>
+          value ? <Typography.Text type="secondary">{value}</Typography.Text> : '-',
+      },
+      {
+        title: t('table.status'),
+        dataIndex: 'status',
+        key: 'status',
+        render: (value: ExampleItemStatus) => (
+          <Tag color={statusColors[value]}>{t(`status.${value}`)}</Tag>
+        ),
+      },
+      {
+        title: tc('table.updatedAt'),
+        dataIndex: 'updated_at',
+        key: 'updated_at',
+        render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
+      },
+      {
+        title: tc('table.actions'),
+        key: 'actions',
+        render: (_, record) => (
+          <Space>
+            <Button type="link" onClick={() => openEdit(record)}>
+              {tc('actions.edit')}
+            </Button>
+            <Popconfirm title={tc('confirm.deleteContent')} onConfirm={() => handleDelete(record.id)}>
+              <Button type="link" danger>
+                {tc('actions.delete')}
+              </Button>
+            </Popconfirm>
+          </Space>
+        ),
+      },
+    ],
+    [handleDelete, openEdit, t, tc]
+  )
+
+  return (
+    <Card
+      title={t('page.title')}
+      extra={
+        <Space>
+          <Button onClick={fetchItems} loading={loading}>
+            {tc('actions.refresh')}
+          </Button>
+          <Button type="primary" onClick={openCreate}>
+            {t('page.createButton')}
+          </Button>
+        </Space>
+      }
+    >
+      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+        <Table<ExampleItem>
+          rowKey="id"
+          loading={loading}
+          columns={columns}
+          dataSource={items}
+          pagination={false}
+        />
+      </Space>
+
+      <Modal
+        title={editingItem ? tc('actions.edit') : tc('actions.create')}
+        open={modalOpen}
+        onCancel={closeModal}
+        onOk={handleSubmit}
+        confirmLoading={saving}
+        okText={editingItem ? tc('actions.save') : tc('actions.create')}
+        destroyOnHidden
+      >
+        <Form form={form} layout="vertical" initialValues={{ status: 'active' }}>
+          <Form.Item
+            label={t('form.nameLabel')}
+            name="title"
+            rules={[{ required: true, whitespace: true, message: tc('form.required') }]}
+          >
+            <Input placeholder={t('form.namePlaceholder')} allowClear />
+          </Form.Item>
+          <Form.Item label={t('form.descriptionLabel')} name="description">
+            <Input.TextArea rows={3} placeholder={t('form.descriptionPlaceholder')} />
+          </Form.Item>
+          <Form.Item label={t('table.status')} name="status" rules={[{ required: true, message: tc('form.required') }]}>
+            <Select options={statusOptions} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Card>
+  )
+}