@orbit-work/ui 0.1.2-preview.0 → 0.1.3

package/src/components/composite/FeedbackDialogView/FeedbackDialogView.stories.tsx

@@ -1,291 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import * as React from "react"
-import { FeedbackDialogView } from "./index"
-
-const meta = {
-  title: "Composite/FeedbackDialogView",
-  component: FeedbackDialogView,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof FeedbackDialogView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const BugReport: Story = {
-  args: {
-    category: "bug",
-    description: "",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const FeatureRequest: Story = {
-  args: {
-    category: "feature_request",
-    description: "",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const ModelQuality: Story = {
-  args: {
-    category: "model_quality",
-    description: "",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const OtherCategory: Story = {
-  args: {
-    category: "other",
-    description: "",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const WithDescription: Story = {
-  args: {
-    category: "bug",
-    description: "点击提交按钮后应用崩溃",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const LongDescription: Story = {
-  args: {
-    category: "feature_request",
-    description:
-      "希望能够在设置中添加自定义快捷键的功能。目前只能使用默认快捷键，对于习惯了其他编辑器的用户来说不太方便。建议可以参考 VSCode 的快捷键设置方式，支持搜索、冲突检测和导入导出配置。",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const LogsEnabled: Story = {
-  args: {
-    category: "bug",
-    description: "模型响应速度变慢",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const LogsDisabled: Story = {
-  args: {
-    category: "feature_request",
-    description: "建议添加暗色主题",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const Submitting: Story = {
-  args: {
-    category: "bug",
-    description: "应用启动失败",
-    uploadLogs: true,
-    submitting: true,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const EmptyDescription: Story = {
-  args: {
-    category: "bug",
-    description: "",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const WhitespaceOnlyDescription: Story = {
-  args: {
-    category: "bug",
-    description: "   ",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const SingleCharacterDescription: Story = {
-  args: {
-    category: "other",
-    description: "测",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const EnglishContent: Story = {
-  args: {
-    category: "bug",
-    description: "The application crashes when clicking the submit button",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const MixedLanguageContent: Story = {
-  args: {
-    category: "feature_request",
-    description: "希望支持 Dark Mode 和 Light Mode 之间的自动切换",
-    uploadLogs: false,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const SubmittingWithLongDescription: Story = {
-  args: {
-    category: "model_quality",
-    description:
-      "使用 Claude Opus 模型时，发现在处理长文本摘要任务时性能不如预期。具体表现为：1) 响应时间超过 30 秒；2) 摘要内容不够简洁；3) 有时会遗漏关键信息。建议优化模型在该场景下的表现。",
-    uploadLogs: true,
-    submitting: true,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}
-
-export const AllCategoriesWithContent: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-      <FeedbackDialogView
-        category="bug"
-        description="发现一个 bug"
-        uploadLogs={true}
-        submitting={false}
-        onCategoryChange={(category) => console.log("category", category)}
-        onDescriptionChange={(description) => console.log("description", description)}
-        onUploadLogsChange={(uploadLogs) => console.log("uploadLogs", uploadLogs)}
-        onClose={() => console.log("close")}
-        onSubmit={() => console.log("submit")}
-      />
-    </div>
-  ),
-}
-
-export const InteractionFlow: Story = {
-  render: () => {
-    const [category, setCategory] = React.useState<"bug" | "feature_request" | "model_quality" | "other">("bug")
-    const [description, setDescription] = React.useState("")
-    const [uploadLogs, setUploadLogs] = React.useState(true)
-    const [submitting, setSubmitting] = React.useState(false)
-
-    const handleSubmit = () => {
-      setSubmitting(true)
-      setTimeout(() => {
-        console.log("submitted", { category, description, uploadLogs })
-        setSubmitting(false)
-        setDescription("")
-      }, 2000)
-    }
-
-    return (
-      <FeedbackDialogView
-        category={category}
-        description={description}
-        uploadLogs={uploadLogs}
-        submitting={submitting}
-        onCategoryChange={setCategory}
-        onDescriptionChange={setDescription}
-        onUploadLogsChange={setUploadLogs}
-        onClose={() => console.log("close")}
-        onSubmit={handleSubmit}
-      />
-    )
-  },
-}
-
-export const ReadyToSubmit: Story = {
-  args: {
-    category: "bug",
-    description: "应用无法启动",
-    uploadLogs: true,
-    submitting: false,
-    onCategoryChange: (category) => console.log("category", category),
-    onDescriptionChange: (description) => console.log("description", description),
-    onUploadLogsChange: (uploadLogs) => console.log("uploadLogs", uploadLogs),
-    onClose: () => console.log("close"),
-    onSubmit: () => console.log("submit"),
-  },
-}

package/src/components/composite/FeedbackDialogView/index.tsx

@@ -1,95 +0,0 @@
-import { Button, Checkbox, Field, SegmentedControl } from "../../primitives"
-import { Dialog } from "../Dialog"
-import { Mail } from "../Icons"
-
-export type FeedbackCategoryValue = "bug" | "feature_request" | "model_quality" | "other"
-
-export interface FeedbackDialogViewProps {
-  category: FeedbackCategoryValue
-  description: string
-  uploadLogs: boolean
-  submitting: boolean
-  onCategoryChange: (category: FeedbackCategoryValue) => void
-  onDescriptionChange: (description: string) => void
-  onUploadLogsChange: (uploadLogs: boolean) => void
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const categoryOptions: ReadonlyArray<{ value: FeedbackCategoryValue; label: string }> = [
-  { value: "bug", label: "BUG" },
-  { value: "feature_request", label: "新需求" },
-  { value: "model_quality", label: "模型效果" },
-  { value: "other", label: "其他" },
-]
-
-/** 提交反馈 —— 坐在统一 Dialog 基座上（遮罩/立面/z/焦点由基座提供）。 */
-export function FeedbackDialogView(props: FeedbackDialogViewProps): React.ReactElement {
-  const disabled = props.submitting || props.description.trim().length === 0
-
-  return (
-    <Dialog
-      open
-      width={512}
-      title="提交反馈"
-      icon={<Mail aria-hidden="true" />}
-      iconTone="info"
-      onClose={props.onClose}
-      onSubmit={(event) => {
-        event.preventDefault()
-        props.onSubmit()
-      }}
-      actions={
-        <>
-          <Button variant="secondary" type="button" onClick={props.onClose}>
-            取消
-          </Button>
-          <Button variant="primary" type="submit" loading={props.submitting} disabled={disabled}>
-            {props.submitting ? "提交中…" : "提交"}
-          </Button>
-        </>
-      }
-    >
-      <div className="flex flex-col gap-5">
-        <div data-ow-part="field" className="flex flex-col gap-2">
-          <span
-            data-ow-part="field-label"
-            className="text-[color:var(--ow-text-2)] font-medium text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
-          >
-            问题类型
-          </span>
-          <SegmentedControl
-            aria-label="问题类型"
-            value={props.category}
-            options={categoryOptions.map((option) => ({ value: option.value, label: option.label }))}
-            onChange={(value) => props.onCategoryChange(value as FeedbackCategoryValue)}
-          />
-        </div>
-
-        <label data-ow-part="field" className="flex flex-col gap-2">
-          <span
-            data-ow-part="field-label"
-            className="text-[color:var(--ow-text-2)] font-medium text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
-          >
-            问题描述
-          </span>
-          <Field
-            multiline
-            value={props.description}
-            onChange={props.onDescriptionChange}
-            placeholder="描述你遇到的问题、期望行为或需求场景"
-            rows={6}
-            autoFocus
-          />
-        </label>
-
-        <div data-ow-part="logs-option" className="flex items-start gap-2.5">
-          <Checkbox checked={props.uploadLogs} onChange={props.onUploadLogsChange} aria-label="上传诊断日志" />
-          <span className="flex-1 text-[color:var(--ow-text-2)] font-normal text-ow-fs-ui leading-[1.5] font-[family-name:var(--ow-font-sans)]">
-            上传诊断日志，帮助我们更快定位问题。日志仅包含设备与运行信息，不含对话内容。
-          </span>
-        </div>
-      </div>
-    </Dialog>
-  )
-}