TDesign React ile kompakt bir API ilke düzenleyicisi oluşturun: somut tema rolleri, iki piksellik boyut ölçeği, Form alanı kaydı ve tür denetimli bir Table bileşimi.
TDesign açık renk belirteçlerinin ve Form/Table bileşiminin bağımsız HTML/CSS yorumu; yerel React çalışma zamanı değildir. · Uygulama başvurusu
02
TDesign Tasarım Sistemi tasarım başvurusu
Geçerli herkese açık develop dalı tema ve bileşen kaynaklarıyla TDesign React. Tema değerleri kaynak anlık görüntüleridir; belirli bir paket sürümüyle uyumluluk garantisi değildir. Bağımsız önizleme bir HTML yorumudur; React örneği gerçek API paketini kullanır.
TDesign Tasarım Sistemi: Açık uygulama ailelerine sahip bir konsol sistemi
React uygulamasını seçin
TDesign için farklı çerçevelere yönelik uygulamalar bulunur. Bu örnek, benzer adlı bir Vue paketi veya mobil bileşen grubu yerine özellikle tdesign-react kullanır. Genel stil sayfası entegrasyonun bir parçasıdır: yalnızca bir bileşeni içe aktarmak, gösterilen yerleşim ve tema kurallarını sağlamaz.
İşe yarar yapı taşı, yapılandırılmış bir Tablo'nun yanında kayıtlı bir Form'dur. Ad, kaynak yolu ve etkinleştirme birer veri alanıdır; satır kaldırma ise tablo eylemidir. Bu örnekte yetkilendirme arka ucu olmadığı için API öğesinin artık korunduğunu belirten sayfa genelinde bir ifade gerçeği yansıtmaz.
TDesign Tasarım Sistemi: Gerçek koyu mod farklılıklarını içeren anlamsal renkler
Marka paletinin yedinci adımı tüm modlarda geçerli değildir
Açık temada marka rolü yedinci adımla, koyu temada ise sekizinci adımla çözümlenir. Açık maviyi her bileşene kopyalamak yerine, anlamsal değişkeni uygulamanızın CSS içinde koruyun. Koyu arka plan #181818, kapsayıcı ise #242424 değerindedir; bunlar ayrı yüzey rolleridir.
Önizleme özellikle açık modda kalır. Yerel bir uygulamada, yayımlanmış koyu kuralları seçmek için belge kökünde theme-mode="dark" ayarını kullanın; özel ilke görselini yeniden renklendirmek için filtre uygulamak yerine ayrı kapsamda tutun.
js
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
TDesign Tasarım Sistemi: Alan anlamını yitirmeden yoğun tipografi kullanın
Yazı tipi rollerinin tamamını kullanın
Orta gövde stili 14px boyut ve 22px satır yüksekliği sağlar. Orta başlık, 16/24 boyutlarına 600 ağırlık ekler; küçük başlık ise 24/32 boyutundadır. Bunlar farklı amaçlara hizmet eder: tablo verileri, panel etiketleri ve sayfa başlığı, hepsi kalın gövde metnine dönüşmemelidir.
Kaynak yazı tipi ailesinde sistem yazı tiplerinin adları yer alır. Uygulamanın yönettiği tipografiye uygun bir sans-serif yedeği ekleyin ve Çince ile Latin karakter dizelerini birlikte doğrulayın. Kaynak yoluna uygulama stiliyle eş aralıklı yazı tipi uygulanabilir; ancak bu, TDesign yazı tipi belirteci olduğu anlamına gelmez.
TDesign Tasarım Sistemi: Boyut takma adlarını gerçek kullanım alanıyla eşleştirin
Boşluk adları birbirinin yerine kullanılamaz
Orta yatay bileşen dolgusu 12px, ekstra büyük bileşen kenar boşluğu ise 20px değerine karşılık gelir. Tüm anlamsal son ekleri tahminî tek bir ölçekle eşleştirmeyin. Denetimleri bir arada tutmak için düzenleyicide dış dolgu 24px, alanlar arasındaki boşluk ise daha küçüktür.
Bağımsız önizleme, dar ekranlarda düzenleyiciyi kural listesinin üzerine yerleştirir. Bu kırılma noktası uygulama kararıdır, çerçevenin garantisi değildir. Uzun API yolları, sayfanın tamamını görüntü alanından genişletmek yerine listede satır kaydırır.
TDesign Tasarım Sistemi: Kayıt oluşturun, doğrulayın, sonra kural ekleyin
Alan hatasını kendi anahtarına bağlı tutun
Form örneği Form bileşenine aktarılır; her FormItem alan adını belirtir. Gönderim işleyicisi önce validateResult değerini denetler, ardından toplanan alanları okur. Uygulama denetimleri dizeleri standartlaştırır ve yinelenen yolları reddeder; böylece iki etiket aynı örnek uç noktayı sessizce yapılandıramaz.
FormItem anahtarlarıyla ad, yol ve etkin alanlarını kaydedin.
Veri eklemeden önce adı eksik olanları ve / ile başlamayan yolları reddedin.
Hatayı göstermek için aynı alan anahtarıyla setFields kullanın; yazılan değerleri düzeltme amacıyla koruyun.
Denetimler başarılı olduktan sonra sabit bir id ekleyin; sonucun yerel olduğunu belirtin.
TDesign Tasarım Sistemi: Düzenleme ve silme işlemlerinde satır kimliğini koruyun
Görüntülenen verileri eylem hücrelerinden ayırın
Tablo, id alanını rowKey üzerinden alır. enabled sütunu, etiketsiz bir renk noktası göstermek yerine Boolean değerini okunabilir metne dönüştürür. action sütunu, yardımcı teknoloji kullanıcıları için birbirinden ayırt edilemeyen üç Kaldır denetimi oluşturmamak amacıyla satırın adını içeren bir düğme görüntüler.
Küçük bir kural kümesi için tablonun tamamı sayfalandırılmadan gösterilebilir. Sayfalandırma eklenirse disableDataPage ayarını yapmadan önce yerleşik yerel dilimleme ile sunucu güdümlü veriyi birbirinden ayırın. Kaldırma işlemi sıralarını değiştirdiğinde dizi konumlarını kimlik olarak yeniden kullanmak güvenli değildir.
name kullanıcıya gösterilen etikettir; path ise kaynak kimliğidir.
enabled uygulama verisidir ve açık metinle gösterilir.
actions özel bir sütundur ve saklanan bir özellik ile eşleşmesi gerekmez.
TDesign Tasarım Sistemi Yerel durum, dağıtılmış bir politika değildir
Politika düzenleyicisini bir düzenleyici olarak test edin
Çevrimdışı önizlemede etiketli yerel kontroller, canlı bir durum bölgesi ve klavyeyle görülebilen odak kullanılır. Boş bir ad veya yinelenen bir yol gönderildiğinde form açık kalmalı ve somut sorunu belirtmelidir. Bir kuralı kaldırmak yalnızca yerel listeyi değiştirir.
Üretim hizmetinde yine de sunucu doğrulaması, yetkilendirme, çakışma yönetimi, denetim günlüğü kaydı ve reddedilen bir kaydetme işleminden kurtarma gerekir. Dağıtım yapıldığını iddia eden bir başarı bildirimiyle bu konuları taklit etmek yerine düzenleyiciyi bu gereksinimleri karşılayacak şekilde tasarlayın.
TDesign Tasarım Sistemi Paketi entegre edin ve örneği gerçeğe uygun tutun
Uygulama kodunda yerel örneği kullanın
React örneği, gerçek TDesign Form, Input, Switch, Button ve Table bileşenlerini içe aktarır. Gömülü önizleme, paket indirmeye veya ağ erişimine ihtiyaç duymadan çalışması için kendi içinde yeterli bir HTML/CSS yorumudur. Etkileşim kontrolleri, tüm kitaplık bağımlılıklarının projenizde derlendiğini göstermez.
Bağlantısı verilen tema dosyaları güncel geliştirme kaynaklarıdır. Özel geçersiz kılmaları kopyalamadan önce yüklenen sürümü bir kilit dosyasında belirleyin ve belirteçlerini karşılaştırın. Bu sayfa, sonraki tema değişikliklerinin örnek bir paletin ardına gizlenmek yerine değerlendirilebilmesi için rol adlarını ve kaynak kökenini özellikle belgelendirir.
Belgenin tamamını index.html olarak kaydedip bir tarayıcıda açın. TDesign açık renk belirteçlerinin ve Form/Table bileşimi kullanımının bağımsız HTML/CSS yorumu; yerel React çalışma zamanı değildir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
Kurallar yalnızca görünür örnek koleksiyonunda bulunur. Yerel Form kaydı, doğrulama geri çağırımları ve Table görüntüleme, React içinde ayrı olarak gösterilir.
Kayıtlı kural düzenleyicisi ve satıra özel kaldırma
Form; ad, kaynak yolu ve etkin durum bilgilerini toplar. Uygulama doğrulaması, yerel bir Table satırı eklenmeden önce boş adları, hatalı yolları ve yinelenen kaynakları yakalar.
Table sütunu ve rowKey sözleşmeleri yukarıdaki belirtimde bağlantılıdır.
Bu örnek yalnızca yerel React durumunu değiştirir; etkin etiketi bir yetkilendirme kararı değildir.
Kurulum/API örneği resmî kaynakla karşılaştırılarak kontrol edildi; paket derlemesi, test edilen çevrimdışı önizlemeden ayrıdır.
04
TDesign Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Yukarıdaki eksiksiz istemci giriş örneğini bir HTML kök öğesiyle kullanın. tdesign-react/es/style/index.css dosyasını bir kez içe aktarın. Sürümleri sabitleyin ve ürünü yayımlamadan önce derleme aracınızla test edin.
bash
npm install tdesign-react react react-dom
Projeniz İçin Bir İstem
Ajan İstemi
API kural düzenleyicisi için tdesign-react Form ve Table bileşenlerini kullanın. Anlamsal --td-* rollerini, kayıtlı alan anahtarlarını, kararlı satır kimliklerini, açık doğrulamayı ve yerel durum hakkında gerçeğe uygun mesajları koruyun.
05
TDesign Tasarım Sistemi Kaynakları ve Kapsamı
Bağımsız OpenDesign başvurusu. Önizleme, çevrimdışı bir yorumdur; Tencent yazılımı veya dağıtılmış bir yetkilendirme hizmeti değildir.
