@@ -20,6 +20,7 @@ import {
2020 InputNumber ,
2121 Tooltip ,
2222 Spin ,
23+ Tag ,
2324 Toast ,
2425 Popconfirm ,
2526} from "@douyinfe/semi-ui" ;
@@ -794,54 +795,63 @@ export default function ControlPanel({
794795 import_from : {
795796 children : [
796797 {
797- JSON : fileImport ,
798+ function : fileImport ,
799+ name : "JSON" ,
798800 } ,
799801 {
800- DBML : ( ) => {
802+ function : ( ) => {
801803 setModal ( MODAL . IMPORT ) ;
802804 setImportFrom ( IMPORT_FROM . DBML ) ;
803805 } ,
806+ name : "DBML" ,
804807 } ,
805808 ] ,
806809 } ,
807810 import_from_source : {
808811 ...( database === DB . GENERIC && {
809812 children : [
810813 {
811- MySQL : ( ) => {
814+ function : ( ) => {
812815 setModal ( MODAL . IMPORT_SRC ) ;
813816 setImportDb ( DB . MYSQL ) ;
814817 } ,
818+ name : "MySQL" ,
815819 } ,
816820 {
817- PostgreSQL : ( ) => {
821+ function : ( ) => {
818822 setModal ( MODAL . IMPORT_SRC ) ;
819823 setImportDb ( DB . POSTGRES ) ;
820824 } ,
825+ name : "PostgreSQL" ,
821826 } ,
822827 {
823- SQLite : ( ) => {
828+ function : ( ) => {
824829 setModal ( MODAL . IMPORT_SRC ) ;
825830 setImportDb ( DB . SQLITE ) ;
826831 } ,
832+ name : "SQLite" ,
827833 } ,
828834 {
829- MariaDB : ( ) => {
835+ function : ( ) => {
830836 setModal ( MODAL . IMPORT_SRC ) ;
831837 setImportDb ( DB . MARIADB ) ;
832838 } ,
839+ name : "MariaDB" ,
833840 } ,
834841 {
835- MSSQL : ( ) => {
842+ function : ( ) => {
836843 setModal ( MODAL . IMPORT_SRC ) ;
837844 setImportDb ( DB . MSSQL ) ;
838845 } ,
846+ name : "MSSQL" ,
839847 } ,
840848 {
841- Oracle : ( ) => {
849+ function : ( ) => {
842850 setModal ( MODAL . IMPORT_SRC ) ;
843851 setImportDb ( DB . ORACLESQL ) ;
844852 } ,
853+ name : "Oracle" ,
854+ label : "Beta" ,
845855 } ,
846856 ] ,
847857 } ) ,
@@ -855,7 +865,8 @@ export default function ControlPanel({
855865 ...( database === DB . GENERIC && {
856866 children : [
857867 {
858- MySQL : ( ) => {
868+ name : "MySQL" ,
869+ function : ( ) => {
859870 setModal ( MODAL . CODE ) ;
860871 const src = jsonToMySQL ( {
861872 tables : tables ,
@@ -871,7 +882,8 @@ export default function ControlPanel({
871882 } ,
872883 } ,
873884 {
874- PostgreSQL : ( ) => {
885+ name : "PostgreSQL" ,
886+ function : ( ) => {
875887 setModal ( MODAL . CODE ) ;
876888 const src = jsonToPostgreSQL ( {
877889 tables : tables ,
@@ -887,7 +899,8 @@ export default function ControlPanel({
887899 } ,
888900 } ,
889901 {
890- SQLite : ( ) => {
902+ name : "SQLite" ,
903+ function : ( ) => {
891904 setModal ( MODAL . CODE ) ;
892905 const src = jsonToSQLite ( {
893906 tables : tables ,
@@ -903,7 +916,8 @@ export default function ControlPanel({
903916 } ,
904917 } ,
905918 {
906- MariaDB : ( ) => {
919+ name : "MariaDB" ,
920+ function : ( ) => {
907921 setModal ( MODAL . CODE ) ;
908922 const src = jsonToMariaDB ( {
909923 tables : tables ,
@@ -919,7 +933,8 @@ export default function ControlPanel({
919933 } ,
920934 } ,
921935 {
922- MSSQL : ( ) => {
936+ name : "MSSQL" ,
937+ function : ( ) => {
923938 setModal ( MODAL . CODE ) ;
924939 const src = jsonToSQLServer ( {
925940 tables : tables ,
@@ -935,7 +950,9 @@ export default function ControlPanel({
935950 } ,
936951 } ,
937952 {
938- OracleSQL : ( ) => {
953+ label : "Beta" ,
954+ name : "Oracle" ,
955+ function : ( ) => {
939956 setModal ( MODAL . CODE ) ;
940957 const src = jsonToOracleSQL ( {
941958 tables : tables ,
@@ -972,7 +989,8 @@ export default function ControlPanel({
972989 export_as : {
973990 children : [
974991 {
975- PNG : ( ) => {
992+ name : "PNG" ,
993+ function : ( ) => {
976994 toPng ( document . getElementById ( "canvas" ) ) . then ( function ( dataUrl ) {
977995 setExportData ( ( prev ) => ( {
978996 ...prev ,
@@ -984,7 +1002,8 @@ export default function ControlPanel({
9841002 } ,
9851003 } ,
9861004 {
987- JPEG : ( ) => {
1005+ name : "JPEG" ,
1006+ function : ( ) => {
9881007 toJpeg ( document . getElementById ( "canvas" ) , { quality : 0.95 } ) . then (
9891008 function ( dataUrl ) {
9901009 setExportData ( ( prev ) => ( {
@@ -998,7 +1017,8 @@ export default function ControlPanel({
9981017 } ,
9991018 } ,
10001019 {
1001- SVG : ( ) => {
1020+ name : "SVG" ,
1021+ function : ( ) => {
10021022 const filter = ( node ) => node . tagName !== "i" ;
10031023 toSvg ( document . getElementById ( "canvas" ) , { filter : filter } ) . then (
10041024 function ( dataUrl ) {
@@ -1013,7 +1033,8 @@ export default function ControlPanel({
10131033 } ,
10141034 } ,
10151035 {
1016- JSON : ( ) => {
1036+ name : "JSON" ,
1037+ function : ( ) => {
10171038 setModal ( MODAL . CODE ) ;
10181039 const result = JSON . stringify (
10191040 {
@@ -1037,7 +1058,8 @@ export default function ControlPanel({
10371058 } ,
10381059 } ,
10391060 {
1040- DBML : ( ) => {
1061+ name : "DBML" ,
1062+ function : ( ) => {
10411063 setModal ( MODAL . CODE ) ;
10421064 const result = toDBML ( {
10431065 tables,
@@ -1052,7 +1074,8 @@ export default function ControlPanel({
10521074 } ,
10531075 } ,
10541076 {
1055- PDF : ( ) => {
1077+ name : "PDF" ,
1078+ function : ( ) => {
10561079 const canvas = document . getElementById ( "canvas" ) ;
10571080 toJpeg ( canvas ) . then ( function ( dataUrl ) {
10581081 const doc = new jsPDF ( "l" , "px" , [
@@ -1072,7 +1095,8 @@ export default function ControlPanel({
10721095 } ,
10731096 } ,
10741097 {
1075- MERMAID : ( ) => {
1098+ name : "Mermaid" ,
1099+ function : ( ) => {
10761100 setModal ( MODAL . CODE ) ;
10771101 const result = jsonToMermaid ( {
10781102 tables : tables ,
@@ -1090,7 +1114,8 @@ export default function ControlPanel({
10901114 } ,
10911115 } ,
10921116 {
1093- readme : ( ) => {
1117+ name : "Markdown" ,
1118+ function : ( ) => {
10941119 setModal ( MODAL . CODE ) ;
10951120 const result = jsonToDocumentation ( {
10961121 tables : tables ,
@@ -1294,7 +1319,8 @@ export default function ControlPanel({
12941319 theme : {
12951320 children : [
12961321 {
1297- light : ( ) => {
1322+ name : t ( "light" ) ,
1323+ function : ( ) => {
12981324 const body = document . body ;
12991325 if ( body . hasAttribute ( "theme-mode" ) ) {
13001326 body . setAttribute ( "theme-mode" , "light" ) ;
@@ -1304,7 +1330,8 @@ export default function ControlPanel({
13041330 } ,
13051331 } ,
13061332 {
1307- dark : ( ) => {
1333+ name : t ( "dark" ) ,
1334+ function : ( ) => {
13081335 const body = document . body ;
13091336 if ( body . hasAttribute ( "theme-mode" ) ) {
13101337 body . setAttribute ( "theme-mode" , "dark" ) ;
@@ -1625,9 +1652,9 @@ export default function ControlPanel({
16251652 const body = document . body ;
16261653 if ( body . hasAttribute ( "theme-mode" ) ) {
16271654 if ( body . getAttribute ( "theme-mode" ) === "light" ) {
1628- menu [ "view" ] [ "theme" ] . children [ 1 ] [ "dark" ] ( ) ;
1655+ menu [ "view" ] [ "theme" ] . children [ 1 ] . function ( ) ;
16291656 } else {
1630- menu [ "view" ] [ "theme" ] . children [ 0 ] [ "light" ] ( ) ;
1657+ menu [ "view" ] [ "theme" ] . children [ 0 ] . function ( ) ;
16311658 }
16321659 }
16331660 } }
@@ -1726,7 +1753,7 @@ export default function ControlPanel({
17261753 if ( menu [ category ] [ item ] . children ) {
17271754 return (
17281755 < Dropdown
1729- style = { { width : "120px " } }
1756+ style = { { width : "150px " } }
17301757 key = { item }
17311758 position = "rightTop"
17321759 render = {
@@ -1735,9 +1762,18 @@ export default function ControlPanel({
17351762 ( e , i ) => (
17361763 < Dropdown . Item
17371764 key = { i }
1738- onClick = { Object . values ( e ) [ 0 ] }
1765+ onClick = { e . function }
1766+ className = "flex justify-between"
17391767 >
1740- { t ( Object . keys ( e ) [ 0 ] ) }
1768+ < span > { e . name } </ span >
1769+ { e . label && (
1770+ < Tag
1771+ size = "small"
1772+ color = "light-blue"
1773+ >
1774+ { e . label }
1775+ </ Tag >
1776+ ) }
17411777 </ Dropdown . Item >
17421778 ) ,
17431779 ) }
0 commit comments