Isifundo se-Open Claude UI: Ukwakha isixhumi esinembe kakhulu sezingxoxo ze-AI nemiphumela yokusebenzisana elungele ukukhiqizwa

Isingeniso Sephrojekthi

open-claude-ui iwumtapo ovulekile wezingxenye ze-UI kanye nenjini yokugqwayiza eyenzelwe amaklayenti esimanje e-AI edeskithophu. Iphrojekthi isebenzisa uhlaka lwe-REA lokubuyisela ubunjiniyela ukuze yenze ukuhlaziya okumile kwe-AST, isuse ukufiphazwa kwekhodi ye-closure, ilandelele ngesikhathi sokusebenza, futhi ihlukanise izinsiza ze-ASAR. Imiphumela yocwaningo ihlelwe yaba izingxenye ze-React ezingasetshenziswa kabusha, ama-Hooks, izitayela zetimu, kanye nemibhalo yezobuchwepheshe.

Ayigcini nje ngokukopisha ukubukeka kwesixhumi esibonakalayo, kodwa iphinde ibuyisele izindlela zobunjiniyela ezithinta ikhwalithi yokusebenzisana, njengamapharamitha entwasahlobo ebonakalayo, ukuvikelwa kokufakwa kwe-CJK, ukufiphala kancane emaphethelweni okuskrola, ukulawulwa kokuskrola kwemiyalezo esakazwayo, ukusondeza okuboshelwe kukhesa, indawo efile yokudonsa, kanye nemisindo yezaziso eyenziwe nge-Web Audio.

Isaziso sokuhambisana nemithetho: Iphrojekthi ayisabalalisi amafonti ezentengiso, amafayela okurekhoda, noma ezinye izimpahla zobunikazi ezingamabhinari; esikhundleni salokho isebenzisa uchungechunge lokubuyela kumafonti esistimu nemisindo yekhodi emsulwa nge-Web Audio API. Iphrojekthi isebenzisa i-MIT License, futhi imiphumela ehlobene yenzelwe ukufunda, ucwaningo nokwabelana ngobunjiniyela.

Amaphrojekthi Afanele

Uma uthuthukisa iklayenti lengxoxo ye-AI, ikhonsoli yamamodeli, isixhumi esibonakalayo sokugunyaza izingcingo zamathuluzi, umsizi wedeskithophu, isibukeli semidiya noma indawo yokusebenzisana yama-ejenti amaningi, ungangenisa izingxenye ezidingekayo kule ndawo yokugcina ngaphandle kokuphinda ulungise amathokheni okubukeka nokusebenzisana okuyinkimbinkimbi.

• Izinhlelo ze-Web AI: Sebenzisa amabhamuza ezingxoxo, amabhokisi okufaka anombhalo ocebile, isikhethi samamodeli nedeshibhodi ye-Token.
• Izixhumi zokukhiqiza okusakazwayo: Sebenzisa iphinikhodi yokuskrola, ukugoqa inqubo yokucabanga namamaski afiphalayo.
• Izinhlelo zedeskithophu: Sebenzisa ifekthri yamawindi e-Electron, ibha yesihloko ye-macOS nohlelo lwezinto ze-Vibrancy.
• Izinhlelo ze-Artifacts nemidiya eminingi: Sebenzisa ukudonsa kwamakholomu, ibhokisi lokukhanyisa imidiya, izinguquko zezinto ezabelwana ngazo nebhuloho le-sandbox le-iframe.
• Izinhlelo ezifinyeleleka kubo bonke: Sebenzisa i-Hook yokuzulazula kwefokhasi ye-Roving TabIndex ehambisana nomqondo we-WAI-ARIA.

Izici Eziyinhloko

Amathokheni Okuklama Nohlelo Lokubukeka

Iphrojekthi inikeza amazinga ezindawo ezinomehluko ophansi ukusuka ku-Surface 0 kuya ku-Surface 3, umbala osawolintshi wobumba #d97757, isinxephezelo semingcele emincane efana nezinwele ezikrinini ezinokulungiswa okuphezulu, uchungechunge lokubuyela kumafonti esistimu, kanye ne-matrix yamakhona ayindilinga yezinkinobho, amaphaneli, amabhamuza namabhokisi okufaka. Okuguquguqukayo kwetimu yomhlaba wonke namakheyifremu abalulekile kugcinwe ku-code-examples/cds-theme.css.

Amamojuli Ekhodi Azimele angu-30

Indawo yokugcina iqukethe izilawuli eziyisisekelo eziyi-11 namamojuli ayi-19 ezakhiwo noma okusebenzisana. Ikhodi yomthombo yezingxenye iku-code-examples, kanti indawo yokuthekelisa ye-TypeScript ehlanganisiwe iku-src/index.ts. Lawa mamojuli ahlanganisa izinkinobho, ukukhetha okuhlukanisiwe, amabhokisi okufaka, amabhamuza ezingxoxo, amakhadi ezinqumo e-MCP, izibukeli zemidiya, i-Diff esakazwayo, amawindi edeskithophu namakhanvasi ama-ejenti amaningi.

Izindlela Zokusebenzisana Zezinga Lokukhiqiza

• Amasethi angu-4 entwasahlobo ebonakalayo, afaka i-Bouncy, i-Snappy, i-Gentle ne-Heavy Snap.
• Izindawo zokuskrola zisebenzisa imaski ye-Alpha engenamugqa enamazinga angu-7, elungiswa ngokuguquguqukayo kuye ngokuthi indawo isifinyelele phezulu noma phansi.
• Amabhokisi okufaka avikela indlela yokufaka ye-CJK ngemibandela emibili ye-isComposing kanye ne-keyCode === 229.
• Okuphumayo okusakazwayo kusebenzisa ukubekezelela okungu-40px phansi kanye nesikhathi sokupholisa sokuskrola mathupha esingu-150ms, ukuze ukuskrola okuzenzakalelayo kungathathi ukubuka.
• Igagasi lombhobho lisebenzisa umkhawulo womsindo ongu-8% nokucindezelwa kwe-Gamma okunamandla angu-0.7.
• Ukusebenzisana kokudonsa negalari kufaka indawo efile yokunyakaza kwesikhombi engu-4px ukuze kuhluzwe ukuzamazama okuncane kwesandla.

Ukubuka Kuqala Kwezingxenye Ngaphandle Kwe-inthanethi

Indawo yokugcina ihlanganisa incwadi yezindaba esebenzisanayo esefayeleni elilodwa ethi docs/claude-components-storybook.html. Awudingi ukuqala iseva yendawo yokuthuthukisa ukuze ubuke uhlelo lombala wobumba, imodi emnyama, impendulo yezinkinobho, amaphilisi ahlukanisiwe, ukugqwayiza kwentwasahlobo, amathayela okunamathiselwe nokugqwayiza kwesimo sokukopisha.

Ukufaka Nokulungiselela Imvelo

Qinisekisa Isitaki Sobuchwepheshe

Ngokusho kwamamaki endawo yokugcina, kunconywa ukuthi iphrojekthi ibe nale ndawo elandelayo:

• React 18 noma inguqulo ephakeme.
• TypeScript 5.5 noma inguqulo ephakeme.
• Tailwind CSS 3.4 noma inguqulo ephakeme.
• Framer Motion 11 noma inguqulo ephakeme.

I-README ayinikezi umyalo wokufaka womphathi wamaphakheji othile. Ngaphambi kokuqala, ngokwendawo yakho yokusebenza, ukuncika kwe-Git noma indlela yokushicilela amaphakheji, qinisekisa ukuthi iphrojekthi ingafinyelela ku-open-claude-ui futhi uqinisekise ukuthi isitaki sobuchwepheshe esishiwo ngenhla sesilungisiwe.

Buka Kuqala Incwadi Yezindaba Engaxhunyiwe Ku-inthanethi

Uma usuyitholile ikhodi yomthombo yendawo yokugcina, ungaqala ngokuvula ngokuqondile ifayela lokubuka kuqala:

open docs/claude-components-storybook.html

Ngaphandle kokushintsha iphrojekthi yebhizinisi, lesi sinyathelo sikusiza uqinisekise ukuthi ukubukeka kwezingxenye, itimu emnyama nokugqwayiza kokusebenzisana kuyahambisana yini nezidingo zephrojekthi.

Ukulungisa Izitayela Zetimu

Faka I-CSS Yomhlaba Wonke

Faka ifayela letimu le-CDS endaweni yokungena yezitayela zomhlaba wonke yohlelo lokusebenza. Liqukethe izici zangokwezifiso ze-CSS namakheyifremu adingwa izingxenye:

@import "open-claude-ui/code-examples/cds-theme.css";

Le timu inikeza imibala yezindawo, umbala womkhiqizo wobumba, imingcele, izithunzi nezisekelo zokugqwayiza. Ukuze kugcinwe ukuvumelana phakathi kwezingxenye, kunconywa ukusebenzisa iziguquguquko ze-CSS ezikhona kuqala, kunokuphinda ubhale imibala ngokuqondile engxenyeni ngayinye.

Nweba Ukumiswa Kwe-Tailwind

Layisha isandiso setimu esinikezwe yindawo yokugcina ku-tailwind.config.js yephrojekthi:

const cdsTheme = require("open-claude-ui/code-examples/tailwind.config.js");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...cdsTheme.theme.extend
    }
  }
};

Uhlu lwe-content kumele luhlanganise ikhodi yomthombo yohlelo lwakho kanye namafayela aku-open-claude-ui aqukethe amagama amakilasi e-Tailwind. Uma kungenjalo, ukwakhiwa kokukhiqiza kungase kungawakhiqizi amakilasi ezinsiza asetshenziswa izingxenye.

Ukusetshenziswa Okuyisisekelo: Yakha Indawo Yokulawula Imodeli Nokufaka Ingxoxo

Isibonelo esilandelayo sihlanganisa amamojuli amathathu abalulekile:

1. ScrollFadeContainer yengeza ukufiphala kancane emaphethelweni aphezulu naphansi endaweni eskrolekayo.
2. ModelSwitcherWithTokenGauge ibonisa ukukhethwa kwemodeli, isimo se-Extended Thinking nesabelomali se-Token.
3. ChatComposer inikeza ukufakwa komyalezo okuyinhloko kanye ne-callback yokuthumela.

import React, { useState } from 'react';
import {
  ChatComposer,
  ModelSwitcherWithTokenGauge,
  ScrollFadeContainer
} from 'open-claude-ui';

export function App() {
  const [model, setModel] = useState<
    'sonnet-3.5' | 'haiku-3.5' | 'opus-3'
  >('sonnet-3.5');
  const [thinking, setThinking] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer
        axis="vertical"
        fadeSize={32}
        className="flex-1 p-6"
      >
        <div className="mx-auto max-w-3xl space-y-4">
          <ModelSwitcherWithTokenGauge
            currentModel={model}
            onModelChange={setModel}
            extendedThinking={thinking}
            onThinkingChange={setThinking}
            tokenBudget={{
              inputTokens: 12400,
              outputTokens: 3200,
              cacheReadTokens: 48000,
              cacheWriteTokens: 16000,
              maxContextWindow: 200000
            }}
          />

          <ChatComposer
            onSend={(text) => console.log('Send message:', text)}
          />
        </div>
      </ScrollFadeContainer>
    </div>
  );
}

Qonda Ukuphathwa Kwesimo

currentModel kanye ne-extendedThinking ziphathwa ungqimba lohlelo, ngakho isikhethi semodeli singavumelaniswa nokumiswa kwangempela kwezicelo zemodeli. I-tokenBudget esibonelweni idlulisela ngokuhlukana amathokheni okufaka, okukhipha, okufundwa kunqolobane, okubhalwa kunqolobane kanye newindi elikhulu lomongo kudeshibhodi.

I-onSend ye-ChatComposer ikhipha ilogi kuphela kulesi sibonelo. Uma uyixhuma kuphrojekthi yangempela, ungabiza isevisi yeseshini kule callback, ubuyekeze uhlu lwemiyalezo, futhi uqalise isimo sempendulo esakazwayo.

Umhlahlandlela Wokukhetha Izingxenye Ezivamile

Izilawuli Eziyisisekelo

• CdsButton: Inikeza osayizi abane be-XS, SM, MD, LG kanye nezinhlobo ezinhlanu ze-Primary, Secondary, Ghost, Outline, Danger.
• SegmentedControl: Isetshenziselwa ukushintsha izindlela, isekela ukubeka kwendawo okumsulwa kwejiyomethri kanye nohlelo lokugqwayiza lwe-Framer Motion layoutId.
• StatusIndicators: Ihlanganisa ukukhanya okuphefumula kobumba, i-pulse yomsebenzi wesikhathi sangempela, ukugqwayiza kwamachashazi amathathu okucabanga nokuskena kokukhanya kwamathambo.
• ConfirmationDialog: Isetshenziselwa ukuqinisekisa izenzo ezizenzakalelayo noma eziyingozi, inemaski efiphele kanye nokuvinjelwa kwefokhasi yekhibhodi.
• AttachmentCard: Isekela izindlela ezimbili zokubonisa okunamathiselwe: amathayela edeskithophu namaphilisi asemgqeni ebhokisini lokufaka.

Izingcingo Zeseshini Namathuluzi

• ChatMessageBubbles: Ihlukanisa amabhamuza omsebenzisi nokuhlelwa okusobala komsizi.
• ThinkingAccordion: Ibonisa inqubo yokucabanga egoqekayo, futhi ingagcinwa ivuliwe ngenkani ngesikhathi sokukhiqiza.
• RichComposerWithMentions: Ilungele iziphetho zokufaka ezidinga imiyalo ye-/, umongo we-@ nokuqagela kwe-Token.
• McpToolDecisionCard: Isetshenziselwa inqubo yokugunyaza amathuluzi, ihlanganisa izimo ze-pending_approval, running, success kanye ne-error.

Imidiya, Ikhodi Ne-Artifacts

• MediaLightboxViewer: Inikeza umzila wegalari ongu-75vw, i-Pan/Zoom eboshelwe kukhesa, indawo efile yokudonsa nokusondeza ngesondo le-Ctrl.
• ArtifactsSplitPaneResizer: Iphatha ukushintsha usayizi kwamakholomu amabili, ukugoqa kwemiphetho, ukubambelela okungu-50/50 ngokuchofoza kabili kanye nokuphazamiseka kwemicimbi yesikhombi ye-iframe.
• EpitaxyIframeBridge: Ixhuma i-sandbox yokubuka kuqala ngephrothokholi ye-RPC ye-postMessage eqinisekiswa yi-Origin futhi ehlukanisiwe.
• StreamingDiffViewer: Isekela ukwengeza okusakazwayo kancane kancane kanye nezindlela ezimbili ze-Diff, ezihlanganisiwe nezihlukaniswe isikrini.
• CodeBlock: Inikeza isiqukathi sekhodi kanye nokuncipha kwesimo sokukopisha ngemizuzwana engu-2.5.

Imikhuba Ethuthukisiwe

Ukuvikela izindlela zokufaka zesiShayina, isiJapane nesiKorea

Uma inkambu yokufaka ingxoxo idinga ukwandisa ngokwayo imicimbi yekhibhodi, kufanele kugcinwe ukuvikelwa kokuhlanganiswa kwendlela yokufaka. Uma umsebenzisi ecindezela u-Enter efasiteleni leziphakamiso ze-Pinyin noma ze-Kana, umlayezo akufanele uthunyelwe. Iphrojekthi isebenzisa ukuhlola okuphindwe kabili:

const composing =
  event.nativeEvent.isComposing || event.keyCode === 229;

if (event.key === 'Enter' && !composing) {
  // 提交消息
}

Ngokhiye we-Escape, kufanele futhi kugwenywe ukuthi umcimbi uqhubeke nokubhebhetheka lapho kuvalwa ungqimba lweziphakamiso zendlela yokufaka, ukuze kungavalwa iwindi lengxoxo kungazelelwe.

Ukuvimbela okukhiphayo okusakazwayo ekuthatheni indawo yokuskrola

useClaudeScrollPinning ingasetshenziswa ukuphatha ama-Token afakwa ngokuqhubekayo. Isu layo eliyinhloko lihlanganisa ukubekezelela okungu-40px phansi, ukupholisa ukuskrola okwenziwa ngesandla okungu-150ms, kanye nebhafa eguquguqukayo engu-35vh. Uma umsebenzisi eseduze naphansi, isixhumi esibonakalayo singalandela okukhiphayo; kodwa uma umsebenzisi eqala ukubuka imilayezo yomlando ebheke phezulu, ukuskrola okuzenzakalelayo akufanele kubuyisele ngokushesha indawo yokubuka phansi.

Ukusebenzisa izilungiselelo ezifanayo zokugqwayiza

Iphrojekthi inikeza amasethi amane ezipringi ahlelwe kahle ku-ClaudeMotionPresets.ts. Lapho kwakhiwa ingxenye entsha, sebenzisa kuqala i-Bouncy, Snappy, Gentle noma Heavy Snap, esikhundleni sokubeka ukuqina nokuncipha ngokungahleliwe ekugqwayizeni ngakunye. Lokhu kugcina izinkinobho, amaphaneli, ukunamathela kokuhudula kanye nokushintsha kwezinto ezabelwana ngazo kunolimi olufanayo lwefiziksi.

Ukuphatha kahle ukuhudulwa kokuhlukanisa kwe-iframe

Lapho udonsa ibha yokuhlukanisa udlula ku-iframe, i-iframe ingase ithathe imicimbi yesikhombi futhi iphazamise ukuhudula. I-ArtifactsSplitPaneResizer ivula indlela yokuvimbela imicimbi ukuthi igwinywe lapho ukuhudula kusebenzile, ihlanganise nendawo yokunyakaza engasebenzi engu-4px, imikhawulo yemiphetho kanye nokunamathela maphakathi ngokuchofoza kabili. Uma uhlelo lufaka ukubuka kuqala kwe-Artifacts, sebenzisa le module kuqala esikhundleni sokulalela kuphela imicimbi yegundane yebha yokuhlukanisa ngokwayo.

Ukugcina ukuzulazula okuphelele kubasebenzisi bekhibhodi

useClaudeRovingFocus isekela ukuzulazula komcibisholo ohlangothini olulodwa noma okubili, ukweqa kwemingcele nge-Home ne-End, kanye nokuguqulwa kwesibuko se-RTL. Lapho kwakhiwa igridi yamamodeli, uhlu lwezinamathiselo noma uhlu lwamakhadi amathuluzi, kufanele kugcinwe ngesikhathi esisodwa izincazelo ezifanele ze-ARIA nesimo sokugxila esibonakalayo.

Ukuphatha umkhawulo wezicelo zamamodeli nokungasebenzi kwesevisi

useRateLimitBackoff yakhelwe izimpendulo ze-429 ne-503, futhi inikeza ukubuyela emuva okuchazekayo okunqanyuliwe, ukufakwa kwe-jitter kanye nendlela yokuzilungisa ngemva kokunqanyulwa okuzenzakalelayo izikhathi ezintathu. Ilungele ungqimba lwezicelo zamamodeli, kodwa ibhizinisi lisadinga ukunquma ngokwesakhiwo salo sezimpendulo ze-API ukuthi kufanele lizame nini futhi, libonise nini iphutha, nokuthi livumele nini umsebenzisi azilungiselele mathupha.

Funda ngokujulile usebenzisa imanuwali yezobuchwepheshe

Ngaphezu kwekhodi yomthombo yezingxenye, indawo yokugcina inikeza imanuwali yezobuchwepheshe yesistimu yokuklama enemigqa engaphezu kuka-3,000. Kunconywa ukuthi uyifunde ngale ndlela elandelayo:

1. Qala ngokufunda ifilosofi yokuklama, izigaba zemibala ye-Surface, imatrix yamakhona ayindilinga kanye nemithetho yemingcele emincane kakhulu.
2. Funda izinkinobho, izilawuli ezihlukanisiwe, izinkomba zesimo kanye nezingxoxo zokuqinisekisa.
3. Bese ucwaninga okokufaka kweseshini, izivikelo ze-CJK, ukushintsha amamodeli kanye nomshini wezimo we-MCP.
4. Uma udinga ukugqwayiza okuyinkimbinkimbi, bheka amapharamitha ezipringi, ukukhanya kwemvelo kanye namamaski okuskrola.
5. Lapho uthuthukisa ideskithophu, amathuluzi emidiya noma indawo yokusebenzisana, funda izahluko zokwakheka kwesistimu ezihambisanayo.

Imanuwali ephelele iku-docs/Claude Design System (CDS).md. Umsebenzi wokuhlaziya ngokubuyisela emuva wephrojekthi wenziwe kusetshenziswa i-REA.

Ukusebenzisana ne-AI Coding Agent

Indawo yokugcina inikeza i-AGENTS.md, CLAUDE.md, .cursorrules kanye namafayela emiyalo e-Copilot. Lapho usebenzisa amathuluzi afana ne-Cursor, Claude Code noma i-GitHub Copilot ukukhiqiza isixhumi esibonakalayo esisha, ungacela i-Agent ukuthi ilandele amathokheni akhona endawo yokugcina, izilungiselelo zezipringi, izimiso zemingcele kanye nemithetho yokuvikela indlela yokufaka.

Isibonelo somyalo: Sicela ulandele ngokuqinile imithetho ye-AGENTS.md ekule ndawo yokugcina, usebenzise amathokheni okuklama e-CDS Terracotta kanye nezilungiselelo zezipringi ze-ClaudeMotionPresets ukwakha ingxenye yamanje.

Isifinyezo

open-claude-ui ihlela amathokheni okubuka, izilawuli zeseshini, ifiziksi yokugqwayiza, ukusebenzisana kwemidiya eminingi kanye nokwakheka kwedeskithophu kumak模块 asebenziseka kabusha ngaphakathi kwamaklayenti e-AI. Indlela ethembeke kakhulu yokuyihlanganisa iwukuqinisekisa umphumela ku-Storybook engaxhunyiwe ku-inthanethi kuqala, bese ufaka i-CSS yetimu nezandiso ze-Tailwind, ekugcineni uqale ukuhlanganisa izingxenye eziyinhloko ezifana nenkambu yokufaka ingxoxo, isishintshi samamodeli kanye nesiqukathi sokuskrola. Ezimo eziyinkimbinkimbi ezifana nokukhiphayo okusakazwayo, ukufaka kwe-CJK, ukuhudulwa kwe-iframe nokuzulazula ngekhibhodi, sebenzisa kakhulu ama-Hook nemishini yezimo ekhona endaweni yokugcina esikhundleni sokukopisha izitayela zangaphandle kuphela.