File pengaturan dan urutan prioritas

Ubah pengaturan Claude Code, pilih cakupan kunci, verifikasi perubahan, dan pelajari nilai mana yang digunakan Claude Code saat kunci diatur di beberapa tempat.

export const SettingsPrecedence = () => { const LEVELS = [{ n: 1, name: 'Managed settings', file: 'managed-settings.json, MDM, or the claude.ai console', who: 'Your organization', w: 390 }, { n: 2, name: 'Command line', file: 'claude --settings', who: 'You, this session', w: 420 }, { n: 3, name: 'Project local', file: '.claude/settings.local.json', who: 'You, this project', w: 480 }, { n: 4, name: 'Shared project', file: '.claude/settings.json', who: 'Everyone in the project', w: 540 }, { n: 5, name: 'User', file: '~/.claude/settings.json', who: 'You, every project', w: 600 }]; const W = 760; const ROW = 58; const GAP = 8; const TOP = 34; const H = TOP + LEVELS.length * (ROW + GAP) + 30; const cx = W / 2; const mono = 'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)'; const sans = 'var(--font-sans, system-ui, -apple-system, sans-serif)'; return

export const SettingsScope = ({defaultSelected = 'project'}) => { const FILES = [{ id: 'user', path: '/.claude/settings.json' }, { id: 'project', path: 'acme-app/.claude/settings.json' }, { id: 'local', path: 'acme-app/.claude/settings.local.json' }, { id: 'managed', path: 'Managed settings', ring: 'managed-settings.json, MDM, or the claude.ai console' }]; const SHORT = { user: '/.claude/settings.json', project: 'acme-app/.claude/settings.json', local: 'acme-app/.claude/settings.local.json', managed: 'managed-settings.json, MDM, or the claude.ai console' }; const TILE_MARK = { project: 'settings.json', local: 'settings.local.json' }; const initial = FILES.some(f => f.id === defaultSelected) ? defaultSelected : 'project'; const [sel, setSel] = useState(initial); const [scale, setScale] = useState(1); const [isFullscreen, setIsFullscreen] = useState(false); const rootRef = useRef(null); const frameRef = useRef(null); const CANVAS_W = 862; const CANVAS_H = 240; useEffect(() => { const el = frameRef.current; if (!el) return; const measure = () => setScale(Math.min(1, el.clientWidth / CANVAS_W)); measure(); if (typeof ResizeObserver === 'undefined') { window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); } const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { const onFsChange = () => setIsFullscreen(!!document.fullscreenElement); document.addEventListener('fullscreenchange', onFsChange); return () => document.removeEventListener('fullscreenchange', onFsChange); }, []); const toggleFullscreen = () => { if (!rootRef.current) return; if (document.fullscreenElement) document.exitFullscreen(); else rootRef.current.requestFullscreen().catch(() => {}); }; const COVERAGE = { user: ['website', 'api', 'yacme'], project: ['yacme', 'tacme', 'cacme'], local: ['yacme'], managed: ['website', 'api', 'yacme', 'tacme', 'cacme'] }; const RINGS = { local: { l: 282, t: 50, w: 142, h: 124 }, project: { l: 282, t: 50, w: 560, h: 124 }, user: { l: 2, t: 34, w: 446, h: 198 }, managed: { l: 0, t: 32, w: 862, h: 204 } }; const TILES = [{ id: 'website', name: 'website/', left: 30, caption: '' }, { id: 'api', name: 'api/', left: 160, caption: '' }, { id: 'yacme', name: 'acme-app/', left: 290, caption: '' }, { id: 'tacme', name: 'acme-app/', left: 497, caption: sel === 'project' ? 'their clone, once you commit the file' : 'their clone' }, { id: 'cacme', name: 'acme-app/', left: 704, caption: sel === 'project' ? 'fresh clone, once you commit the file' : sel === 'managed' ? 'server-managed only' : 'fresh clone' }]; const FILE_AT = { user: { machine: 'you', tiles: [] }, project: { machine: null, tiles: ['yacme', 'tacme', 'cacme'] }, local: { machine: null, tiles: ['yacme'] }, managed: { machine: null, tiles: [] } }; const fileAt = FILE_AT[sel]; const coverage = COVERAGE[sel]; const ring = RINGS[sel]; const selFile = FILES.find(f => f.id === sel); const FolderIcon = ({open}) => ; const FileIcon = () => ; const CloudIcon = () => ; const LaptopIcon = () => ; return <div ref={rootRef} className={'ssc-root not-prose' + (isFullscreen ? ' ssc-fs' : '')}>

  <div className="ssc-head">
    <div className="ssc-files" role="group" aria-label="Settings file">
      {FILES.map(f => <button key={f.id} type="button" className="ssc-file ssc-mono" aria-pressed={f.id === sel} onClick={() => setSel(f.id)}>{f.path}</button>)}
    </div>
    <button type="button" className="ssc-fsbtn" onClick={toggleFullscreen} aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'} title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>{isFullscreen ? '⤡' : '⛶'}</button>
  </div>

  <div ref={frameRef} className="ssc-frame" style={{
height: CANVAS_H * scale + 'px'

}}> <div className="ssc-canvas" style={{ transform: 'scale(' + scale + ')' }}> <div className="ssc-machine" style={{ left: '10px', width: '430px' }} /> <span className="ssc-machine-label" style={{ left: '30px' }}>Your machine{fileAt.machine === 'you' && {selFile.path}} <div className="ssc-machine" style={{ left: '460px', width: '200px' }} /> <span className="ssc-machine-label" style={{ left: '470px' }}>A teammate’s machine <div className="ssc-machine" style={{ left: '682px', width: '170px' }} /> <span className="ssc-machine-label" style={{ left: '692px' }}>A cloud session

      {TILES.map(t => {
const on = coverage.includes(t.id);
return <div key={t.id} className={'ssc-tile' + (on ? ' ssc-on' : '')} style={{
  left: t.left + 'px'
}}>
            <div className="ssc-tile-name"><FolderIcon open={on} /><span className="ssc-mono">{t.name}</span></div>
            {t.caption && <div className="ssc-tile-caption">{t.caption}</div>}
            {fileAt.tiles.includes(t.id) && <span className="ssc-filemark ssc-mono" title={SHORT[sel]}><FileIcon />{TILE_MARK[sel]}</span>}
          </div>;

})}

      <div className="ssc-ring" style={{
left: ring.l + 'px',
top: ring.t + 'px',
width: ring.w + 'px',
height: ring.h + 'px'

}} /> <span className="ssc-ring-label ssc-mono" style={{ left: ring.l + 14 + 'px', top: ring.t - 26 + 'px' }}>{selFile.ring || selFile.path}