@@ -20,6 +20,7 @@ import {
20
20
InputNumber ,
21
21
Tooltip ,
22
22
Spin ,
23
+ Tag ,
23
24
Toast ,
24
25
Popconfirm ,
25
26
} from "@douyinfe/semi-ui" ;
@@ -794,54 +795,63 @@ export default function ControlPanel({
794
795
import_from : {
795
796
children : [
796
797
{
797
- JSON : fileImport ,
798
+ function : fileImport ,
799
+ name : "JSON" ,
798
800
} ,
799
801
{
800
- DBML : ( ) => {
802
+ function : ( ) => {
801
803
setModal ( MODAL . IMPORT ) ;
802
804
setImportFrom ( IMPORT_FROM . DBML ) ;
803
805
} ,
806
+ name : "DBML" ,
804
807
} ,
805
808
] ,
806
809
} ,
807
810
import_from_source : {
808
811
...( database === DB . GENERIC && {
809
812
children : [
810
813
{
811
- MySQL : ( ) => {
814
+ function : ( ) => {
812
815
setModal ( MODAL . IMPORT_SRC ) ;
813
816
setImportDb ( DB . MYSQL ) ;
814
817
} ,
818
+ name : "MySQL" ,
815
819
} ,
816
820
{
817
- PostgreSQL : ( ) => {
821
+ function : ( ) => {
818
822
setModal ( MODAL . IMPORT_SRC ) ;
819
823
setImportDb ( DB . POSTGRES ) ;
820
824
} ,
825
+ name : "PostgreSQL" ,
821
826
} ,
822
827
{
823
- SQLite : ( ) => {
828
+ function : ( ) => {
824
829
setModal ( MODAL . IMPORT_SRC ) ;
825
830
setImportDb ( DB . SQLITE ) ;
826
831
} ,
832
+ name : "SQLite" ,
827
833
} ,
828
834
{
829
- MariaDB : ( ) => {
835
+ function : ( ) => {
830
836
setModal ( MODAL . IMPORT_SRC ) ;
831
837
setImportDb ( DB . MARIADB ) ;
832
838
} ,
839
+ name : "MariaDB" ,
833
840
} ,
834
841
{
835
- MSSQL : ( ) => {
842
+ function : ( ) => {
836
843
setModal ( MODAL . IMPORT_SRC ) ;
837
844
setImportDb ( DB . MSSQL ) ;
838
845
} ,
846
+ name : "MSSQL" ,
839
847
} ,
840
848
{
841
- Oracle : ( ) => {
849
+ function : ( ) => {
842
850
setModal ( MODAL . IMPORT_SRC ) ;
843
851
setImportDb ( DB . ORACLESQL ) ;
844
852
} ,
853
+ name : "Oracle" ,
854
+ label : "Beta" ,
845
855
} ,
846
856
] ,
847
857
} ) ,
@@ -855,7 +865,8 @@ export default function ControlPanel({
855
865
...( database === DB . GENERIC && {
856
866
children : [
857
867
{
858
- MySQL : ( ) => {
868
+ name : "MySQL" ,
869
+ function : ( ) => {
859
870
setModal ( MODAL . CODE ) ;
860
871
const src = jsonToMySQL ( {
861
872
tables : tables ,
@@ -871,7 +882,8 @@ export default function ControlPanel({
871
882
} ,
872
883
} ,
873
884
{
874
- PostgreSQL : ( ) => {
885
+ name : "PostgreSQL" ,
886
+ function : ( ) => {
875
887
setModal ( MODAL . CODE ) ;
876
888
const src = jsonToPostgreSQL ( {
877
889
tables : tables ,
@@ -887,7 +899,8 @@ export default function ControlPanel({
887
899
} ,
888
900
} ,
889
901
{
890
- SQLite : ( ) => {
902
+ name : "SQLite" ,
903
+ function : ( ) => {
891
904
setModal ( MODAL . CODE ) ;
892
905
const src = jsonToSQLite ( {
893
906
tables : tables ,
@@ -903,7 +916,8 @@ export default function ControlPanel({
903
916
} ,
904
917
} ,
905
918
{
906
- MariaDB : ( ) => {
919
+ name : "MariaDB" ,
920
+ function : ( ) => {
907
921
setModal ( MODAL . CODE ) ;
908
922
const src = jsonToMariaDB ( {
909
923
tables : tables ,
@@ -919,7 +933,8 @@ export default function ControlPanel({
919
933
} ,
920
934
} ,
921
935
{
922
- MSSQL : ( ) => {
936
+ name : "MSSQL" ,
937
+ function : ( ) => {
923
938
setModal ( MODAL . CODE ) ;
924
939
const src = jsonToSQLServer ( {
925
940
tables : tables ,
@@ -935,7 +950,9 @@ export default function ControlPanel({
935
950
} ,
936
951
} ,
937
952
{
938
- OracleSQL : ( ) => {
953
+ label : "Beta" ,
954
+ name : "Oracle" ,
955
+ function : ( ) => {
939
956
setModal ( MODAL . CODE ) ;
940
957
const src = jsonToOracleSQL ( {
941
958
tables : tables ,
@@ -972,7 +989,8 @@ export default function ControlPanel({
972
989
export_as : {
973
990
children : [
974
991
{
975
- PNG : ( ) => {
992
+ name : "PNG" ,
993
+ function : ( ) => {
976
994
toPng ( document . getElementById ( "canvas" ) ) . then ( function ( dataUrl ) {
977
995
setExportData ( ( prev ) => ( {
978
996
...prev ,
@@ -984,7 +1002,8 @@ export default function ControlPanel({
984
1002
} ,
985
1003
} ,
986
1004
{
987
- JPEG : ( ) => {
1005
+ name : "JPEG" ,
1006
+ function : ( ) => {
988
1007
toJpeg ( document . getElementById ( "canvas" ) , { quality : 0.95 } ) . then (
989
1008
function ( dataUrl ) {
990
1009
setExportData ( ( prev ) => ( {
@@ -998,7 +1017,8 @@ export default function ControlPanel({
998
1017
} ,
999
1018
} ,
1000
1019
{
1001
- SVG : ( ) => {
1020
+ name : "SVG" ,
1021
+ function : ( ) => {
1002
1022
const filter = ( node ) => node . tagName !== "i" ;
1003
1023
toSvg ( document . getElementById ( "canvas" ) , { filter : filter } ) . then (
1004
1024
function ( dataUrl ) {
@@ -1013,7 +1033,8 @@ export default function ControlPanel({
1013
1033
} ,
1014
1034
} ,
1015
1035
{
1016
- JSON : ( ) => {
1036
+ name : "JSON" ,
1037
+ function : ( ) => {
1017
1038
setModal ( MODAL . CODE ) ;
1018
1039
const result = JSON . stringify (
1019
1040
{
@@ -1037,7 +1058,8 @@ export default function ControlPanel({
1037
1058
} ,
1038
1059
} ,
1039
1060
{
1040
- DBML : ( ) => {
1061
+ name : "DBML" ,
1062
+ function : ( ) => {
1041
1063
setModal ( MODAL . CODE ) ;
1042
1064
const result = toDBML ( {
1043
1065
tables,
@@ -1052,7 +1074,8 @@ export default function ControlPanel({
1052
1074
} ,
1053
1075
} ,
1054
1076
{
1055
- PDF : ( ) => {
1077
+ name : "PDF" ,
1078
+ function : ( ) => {
1056
1079
const canvas = document . getElementById ( "canvas" ) ;
1057
1080
toJpeg ( canvas ) . then ( function ( dataUrl ) {
1058
1081
const doc = new jsPDF ( "l" , "px" , [
@@ -1072,7 +1095,8 @@ export default function ControlPanel({
1072
1095
} ,
1073
1096
} ,
1074
1097
{
1075
- MERMAID : ( ) => {
1098
+ name : "Mermaid" ,
1099
+ function : ( ) => {
1076
1100
setModal ( MODAL . CODE ) ;
1077
1101
const result = jsonToMermaid ( {
1078
1102
tables : tables ,
@@ -1090,7 +1114,8 @@ export default function ControlPanel({
1090
1114
} ,
1091
1115
} ,
1092
1116
{
1093
- readme : ( ) => {
1117
+ name : "Markdown" ,
1118
+ function : ( ) => {
1094
1119
setModal ( MODAL . CODE ) ;
1095
1120
const result = jsonToDocumentation ( {
1096
1121
tables : tables ,
@@ -1294,7 +1319,8 @@ export default function ControlPanel({
1294
1319
theme : {
1295
1320
children : [
1296
1321
{
1297
- light : ( ) => {
1322
+ name : t ( "light" ) ,
1323
+ function : ( ) => {
1298
1324
const body = document . body ;
1299
1325
if ( body . hasAttribute ( "theme-mode" ) ) {
1300
1326
body . setAttribute ( "theme-mode" , "light" ) ;
@@ -1304,7 +1330,8 @@ export default function ControlPanel({
1304
1330
} ,
1305
1331
} ,
1306
1332
{
1307
- dark : ( ) => {
1333
+ name : t ( "dark" ) ,
1334
+ function : ( ) => {
1308
1335
const body = document . body ;
1309
1336
if ( body . hasAttribute ( "theme-mode" ) ) {
1310
1337
body . setAttribute ( "theme-mode" , "dark" ) ;
@@ -1625,9 +1652,9 @@ export default function ControlPanel({
1625
1652
const body = document . body ;
1626
1653
if ( body . hasAttribute ( "theme-mode" ) ) {
1627
1654
if ( body . getAttribute ( "theme-mode" ) === "light" ) {
1628
- menu [ "view" ] [ "theme" ] . children [ 1 ] [ "dark" ] ( ) ;
1655
+ menu [ "view" ] [ "theme" ] . children [ 1 ] . function ( ) ;
1629
1656
} else {
1630
- menu [ "view" ] [ "theme" ] . children [ 0 ] [ "light" ] ( ) ;
1657
+ menu [ "view" ] [ "theme" ] . children [ 0 ] . function ( ) ;
1631
1658
}
1632
1659
}
1633
1660
} }
@@ -1726,7 +1753,7 @@ export default function ControlPanel({
1726
1753
if ( menu [ category ] [ item ] . children ) {
1727
1754
return (
1728
1755
< Dropdown
1729
- style = { { width : "120px " } }
1756
+ style = { { width : "150px " } }
1730
1757
key = { item }
1731
1758
position = "rightTop"
1732
1759
render = {
@@ -1735,9 +1762,18 @@ export default function ControlPanel({
1735
1762
( e , i ) => (
1736
1763
< Dropdown . Item
1737
1764
key = { i }
1738
- onClick = { Object . values ( e ) [ 0 ] }
1765
+ onClick = { e . function }
1766
+ className = "flex justify-between"
1739
1767
>
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
+ ) }
1741
1777
</ Dropdown . Item >
1742
1778
) ,
1743
1779
) }
0 commit comments