1

src/assets/svg/gpt/gpt-icon.svg

+<svg width="46" height="45" viewBox="0 0 46 45" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="46" height="45" fill="url(#pattern0)"/>
+    <defs>
+    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+    <use xlink:href="#image0_140_546" transform="matrix(0.0178571 0 0 0.018254 0 -0.00198413)"/>
+    </pattern>
+    <image id="image0_140_546" width="56" height="55" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA3CAYAAABZ0InLAAABYGlDQ1BJQ0MgUHJvZmlsZQAAKJFtkL9Lw1AQx7+xlYLEH4Oog0MGdapSUkEd2w4iqIRoQd2SNCZCmz7SiLg5qHNBFxeRuvgX6OIgji4WBAcRcfMPkBZBy/Neq7ZV73HvPny5+3Ic0CEbjGXDAHJe4OuzSWVldU2JvCBEbxDdGDWsAkto2jy14Lu2R/Uekqh348JLnonkF67fKtpxj7vPyjd/+9uiK2MXLKoflKrF/ACQYsTaVsAE7xD3+7QU8aFgp8Fngs0GX9Z7lvUUcZm4z3KNDPEzcdRs0Z0WzmU3ra8dxPay7aWXqA5QDkOHjQxy2IACFVP0LyJNN/p/ZrI+k0IeDNvwacqBi4CmEqQwZMlNwRw8WJhAtO4Zo4yLW/++YVPLl4DpChAqNjXzCLjYA4YemtrICdC7C5zfMsM3fi4rVcOF9bjaYDkJdD5x/joGRA6AWpHz9xLntVPyfwSuvE9cymShMwViwAAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAOKADAAQAAAABAAAANwAAAACsz924AAAR5ElEQVRoBdVaCVSU1xX+/lnYdxVBZHPDBRcgirvQaBQTjBpNYpNYNZpWEzU5J83SHo/oSU9NclJjtjapFrO5NLEaY11iIpoY4xpABHdZVEAFGfZ1ZvrdNwwlhgHE9rQ+GP73v+W+u9/77qChleaTnOQDg2UpoMVpGsJg5ed/30xWIA0W6wFYdOtNc5NyWkNJa2mShIXBYE3mZFxL8/9PY1Yr1sOsrXBEqO5WZH0+SnpWM1hT7wbiBHdq1hzim+3z0bJnb6VF3vXNB/0+XbEcsK7imEvz8buhr2naJJfp41Cz9cCB5vg2ESiSaySu+fxd1dfoK1ymjS2t2frtYTvi1ERAbE7UUrr2ibv4abI2aFF2m7TZoM6S9B8jzkqe0c1ZQX6yrz6Wf/c5pZqM/5caPb812Q5ba5Retn3gjp86Dd0MHkgM6YcY/yB08/CBkaZeZa7FhdJifFeQgz1XzqDOaoH1Zy7ujk9vAmBtMMeb5r6y38CzpzaNdrRDsVjozrrqnbAkciwe7RMNb6MzPZwGHWWppMY/IwPC8auIe5BdbsJbJw9g86V0NHCNavLgGk3WN/b50vGm0wld+w2aZn2w41BsOwWhaE9//C3+UYRQYgpNzYJqsxkF1eWorquBt6sHAp3dFQG9PP2wZsRUxAX1wkvHd+NmbSU5JNTp0EAN0CwWxZw7oU/Ta+MEOwM/Q6TT0WbhxkFufvg8YQ58jC7E04orNeVYdWwPdl89h4qGeiVB0cYQD2/M6hGFp/qNgKvRCVPDBqCHd2ecuHEFAW5epE9DQWUZ9uZk4UjRZZSa68EhmwbcLoJWhMkWzffj5WRdxxp9B0JcvPGPCbPRk1IxE9J7Jw/iT2cPoqy+9idArRSzqKvGNXGdQ7EhYTactMYo1QwD0QYzd5bX1WJ7TibeyNiPy1VlEtBvu5U8sYI60YEm+MhHR2wW9R2OcKqlEPeXzENYmb6XyNW1CNVTb8TzkWPwwb2z6HjE2mxwaol8UV01bprrFHF6qquXwYjHeg7GjvFzMKlbrw6bo6hou5uoo42RlAax8zE4YUavwRzT4VJ5MV7LSIFFLzyjo+C8SEPPp54rJgT0wsqhkxHi5Q09x80cO1GYh025J7E7Ows366poh0AXZxdM7jEQ8yJi0cvLF929fLAu/peY/80G7C24BLNOsGh/uy0ChThBuBMlsSByNCZ07wM/g6uQgzXp36LC0tB0shBnqLdgSKdArBx2P4YxZKjYyBXXa6rx/MFt2FNwAfWNOiT2J1wraKjB2nPH8dHZo1g4YBRejpoAZ+r1+3EzMe2rD/FjSX7TGe3ptJNAyoiM8zIa8Ey/0ZjTbzh8GQaEMLGNWoprZ94ZCoAekKfq+N7TzRvPxcZjao8BcNXR1qh2JfSmazN/wPvnj6CCDkRsWDRB4FglpLBvITFip7Uk/F2qfKW5Aa8MnQRXquyyweMxc9/HDC2MoVwvZ7XV2kWgRuS60c2vjXsE0Z260bPRXRAJOUFiXX5FKcqs9ezbBicG9sKbYx6Cr5OLIlbscxeD+6vp+3C27Cb3yjoSR6Y5kfYIr0BkmQpQJ8QpoAJaU9Jdf/YY4rqGY2JIX4zoFo5xgT3wdeFFzjYioCA5/tOqkxEQcmQnN3dsGj8b0Z2DFEFXqkqx6MDfcfrmNQW5ih5TIc0Nwoxf9opGJ4YMofdUyTXM2vcp5n37ObLKiillK++pNoSGdwnBrvsXYm/iAux+YCGi3btwDzfxVyQpEq3jy/Kju1DPLUZ+HqHjkdbeVM+hBAlbNT1Tqt8PjEdvny58t+KrvPN4/vB2FNApPD1wjEJG+N34KydLV8XDF47twMbzaVRhuhQJ4ASqo8RDnD3x2vBEjGWg15ktJETDQMLfOf1pfJV9BsuO7URebZk6X3hxsaYUZ28WYpBfIEZ0DYORcGwZkB1LtbTFPw4JFGTMRCa+Syge7hWlkD5tKsLiw9tws76a75py6S1C5aBI6evL51FLexFDFaI7GZzxawb5p/qPgBvt+cT1y0g+cwyjmMLN7D0YTjwzITQCo4LCkHz6KNaeP4FrteVkApBelI8BnbrCx9UNbjojSilTgdlWc0ig8oLc/UTve2gntDniufT7LTDV1ijkJWi31nQ83kIgEkKMXDsluD9ejLoX4e7eTM1q8NrJ/fhb1mHUkJOb8k5hy4VU/H7EZET7dGUe64RnqR1Twgfg9bQU/CPnFNM+emiqvyTPzpooK2OtINlGc0ig6LgTvcPY0D4K8JFruThVfA31Bk2FijbgKvLFm97jHYA/xCZgiNgvERQ9zasswZ7s06ihkSnbJZ4HSq7g+x1/wYzwIXhxSDyC3b3Q090P742ZgYVM4CsrK5WaW5inVjMhIJ3tag4JFNcd4RcAL6qDIHWk6AoaCFTf6AHbgi4qvnpUIkYF9qTN6PEtg/QnF09gSf/RjI1BSJn+DD4+dwxvpO1HSYO4EiuDuIZNOWnYnXcaT/YZhmdj4lg70WMQpar3s514taIYVRrVU2JM2wJUyXaLuNJs4MfsXzyZZLwXS0taXOdoUBg8Lqg3zppu4O1TB7EtLxNmOhRB/lFKaTFTtqeYrSQERmAN1XDD5VOoFwHz3FKGnNXnDuFLqu5zA+MwnfYpCYZMFlaWqxioVMTR4c3GWw0TRpWq8kRyq7YVlyKMlPObNzMH38r4Hok7PsBnOelE3kzbtYIWjORLP2LSzr9iW3YmQrx98frY6dh23zzE+jLGCiBqiZVGf57haPGRL/BMymcopt2aOR7j3x1juwRTqWwn3npucxyk75BA2VhQWUpuMR6Rcz3cfW/d2+b7+jOHYdLkbiAssDWBK2/FTK43kHCZlTg6tEsQvpj8JNaOnolwN94puVAYQt+GLUwSfrP/72qdUafDu6MfgTsdUXuaQwIFjdyaEpQxpTKTm8M6d2/yWvaUTJgoCLjS/XvoDIoZ4jXFuwkhVqUB7JEieZcmEhLnZ6HOiRSE2F1U2/kk4HzpDSSG9cXXUxYhach4+LBCIOHGwjiRcj0H7546pFQ1wN0dM8MHcact/AhcR80hgXJ4OY0/jZdRsYuRgaHoQxevwhqhSUbyHm0rv6IMobzIfpO4EDNCIhnLKBOuF8SlibNRT9tDEdc0pybIDEplGy/HD371IVb+uA+uDEuL+o3C0/3HMJ2TjIYxl5skAb8pDOe+hG59oSd37YxrBP+zh2MCuVT4u+lcqtJ9Z70ey6KZ2dMjCt/kZ8uVTEza9QE2n0tHGO+E74ychs8mzEV3Fw8lWQme9rTMjogQLH3JQ0WSyt7kJE6UMDtal3lE3S1ZcoA/4fAYW+PzOm8a+3PPKk8+qGugre7TtKBx3S0PhwTKOql6bc3NQEpBNvHQMCm4H/44LAFGi1khKRl9QU0FlhzfjlFb38bxm1cx3D8U/boEKFX0cHKGQVhPbVDOgzCVd6dU5JrkBadG9ERduUzO5Iiye/bl3qgG+RCll70ZJQXsa0zk3Vjm8GzSEC5psTkkULgrXDZTXV7+4Ut6MQZanvh43xh8OXmBzeMRUTMhiLperDJh2u5kLDq0FZdYV7EyIG+bOA/P8U7XicgIMwR5IdTf6IZXB03E6tFS75LR9jeV0XCPIO7G24oQ3VpzSKDaxM0SgK9VMR/knU7SLz0RjfYLYpFpHlZRmsEu5CKDsRzUwM/nORlI3LUOqzMOwEDoL0b9AtsnPYX7A3rDgxBm9YzCTtrr/MhYODvREyo95WkivjaQFZz8yCxZJlfryoaf1n1k/tbmMJOxLxRgwYxVcsEVSZmqq+Hp4go32uJc1jinBA/AW1kHsY55ZS0lLPWU4vpKvJ7xHTZcSsVLkb/A9D5RLDs8TKdVrzxjDQlPPncCxwpz8eexM+xHtfkU6Y8MCFW8uFxegrySolYCnQ1c6xLkGgkD/k4edAIklQe8mvoNHqIqnq0oIid16OzmgZXRE/HdtCVICOjJJVxE4xXVLaioIKH7kHUtT0leisE7rp7FvV+8g5eO/ZMpWnW7q9viA/p5+yM2MJwmrUNq0VUm6hJ2RPSOWzskKLcCm50ILDOl9P2NPMRvfxePhA3Bc4PjWO/0Qg9PX6xncWhndgb+lPkdCivK8eTAWMwfMBxetJX0G/lYdXIfHdYFunlxJDql8qIhjpoddXlKgeR5Jt0G7pUw8fmlDFW6sF187St/DqlNAkVshTVlKlRIRtPd1UdxXfLGT5iJHGIAXth/JB5juV7PeJbIG/eY4D4oqa1mOdGX1bJqrErdh7VU4XJlOTraqwYjsXSl7cptQqEnlDbhaSPb5pY4zvWLWQuaHN6fayxILSlESv55KYRzrmnTz6njSJsqKtvz6RWLadACK65bD+Xcbb7B5j1fZPl93LZ3cJyXUrkS+Tq5IohxceOlkxi9dQ3WMCGwpWw8kIm7BzFb2DcWb4yZKnm8wyZnyN3w1ZgEvBAVp25IkuItStmsbh4ONzabaFOCwoE6cnn7xZOY3y8WkSwb3BfYGzvyzykHKAxoIOXnGCYe2PkBEplCRXPNlosZyCgr5CxVnFSoOEjip/YciJcj41kf9VEMa+AN44zUdkSSPIz+GAZWvMXk4/3DMX7qUvoAN+WlpXa6kMTlVpcphydr2mptEigECCc/pNd7ok8MjAwXv4uZgNTSQlxlti9BV5CTh8TM7bmZ+IIfDqqzlRYxMRjWORgvDL4XY1gZUxdfTl+prcB79LbrzxxVTkwcWiDTQbtaBdGupSInUk4vzsfvGI+PmwoJWc7j4L91Wp3V0p82CbSBoYRKr2PTxTTM6R2DPl68aY96CPMPbMJ1qow0e+IsfTPFJfmj7JWgPi9iGJ4ZNAZGDohdVbNA/AkZ9jpjZYlU5MSYGlOZwSxLCgFyNRLPmVtRgo0sZ7yf9QMq6V6E2QJFvKetL++OW5sEqq0EKhnXsqN7MIR3scHeXTC6cwj2TF6I5Yd3YO/V8yw/yEqqIxF1Yoxw5e3icca/JYPGorMTvzaTYi2zgZT8i3iBISKvwqTyVEFS4czdBmY/c/rHqvSugUQ+sPt9ZFB9Bba9BmRf2x7iBKP2ESgr2Sp5056d8ineHjENowPCEMIY+Fd+kZLPe2Mmy3o5LOo6MX0J5t1xKHNSH2cncXqKgIzi61hxfA8OFuXSlzLsUO9EUgphUUPCXxAxHLHqWmbF5gtp9JbXVDyVMkl7CVKINvtzWwTKIVfpUefu34jFzDF/HTkSzrwuhPKCGkqvKQhLE+W0c7qMwfxN2tm6rKOoIINUyb2RKvsaSSIe5Pccv42OV2YlZf01/AbYTKkLpI4SJ7gIgSZ+5GvZNlujFsJEBP6Qvp/O4Tiepm0NZW7a378bi0s2qVSx6uXO7xKkjuKid+ZXYS5woTTL6hji6UmbqOeJfpxbygC+QFSTE5LPvsJsKZdfov5kYZvYtbxAvgBN5VSHvuUVvyD5qYGEOdPHe7rw1sCfiuoqPBwRgz8OTyDSYj0aE+M6HOS169j1XJhqquBL9RbPOqxrCDMdV8KwskhsxWtMClYzbqog3jLO7RvVkFby+Ioog5X/1EZ76BCBcpKolzigKpJaWV+hDteoF8kXjvOuWI5lMfchwrMTPPUGJAT3Vh+5eQhz5MNfpoKMhaVFWHFiD75mefGOiRMsLNZceZDBum08Zqm83G5rsg3BklISBZWnoC3qvJuJ9YnreZgSMgDTwiIxmNJybgz6sreKt4uM4gJsv5yFzQxBJsmWOG6HQhAdbsSAdNmwge8ny7MJNazD0FrZKMhK7USk7E01DmL9xtPoior6GlytLuX3f2ZGN/53BQ22vUXlVo6zTWnIoXqGy4vyooxPK1gTSW5zYwcWkC7lBeVZSiJKK02UscnmGWWQEpX7gYHeWDysTX583EETeuzbBaJqdDZb2Zna+Hr3PqzWAyWzV8bZCVCeX174D2xzycoc+8Rd+ST+VqNuTnPcmwjkf+eZrHotnpNpzRfcRf00wd8066f/4tykos0J8fs4KYnxbHnzsf/nPkPdGia2SSKkW/FskUBZ5LMxKUzXYEmi4Y/7b3nYW5G5zXcTCfsQTro3b5VaczgOCWy+yOfTpCGM42Gwmn2aj//P+np9mumxpHaZ0r8AExD9/lqaElcAAAAASUVORK5CYII="/>
+    </defs>
+    </svg>
+    
\ No newline at end of file

src/assets/svg/upload/uploadTip.svg

+<svg width="40" height="30" viewBox="0 0 40 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.125 20.8333V25.4167H30.4583C33.375 25 35.6667 22.2917 35.6667 19.1667C35.6667 15.625 32.9583 12.9167 29.4167 12.9167C28.5833 12.9167 27.9583 13.125 27.3333 13.3333V12.9167C27.3333 8.33334 23.5833 4.58334 19 4.58334C14.4167 4.58334 10.6667 8.33334 10.6667 12.9167C10.6667 13.75 10.875 14.375 10.875 15.2083C10.4583 15 10.0417 15 9.625 15C6.70833 15 4.41667 17.2917 4.41667 20.2083C4.41667 23.125 6.70833 25.4167 9.625 25.4167H17.9583V20.8333L15.6667 23.125L12.75 20.2083L20.0417 12.9167L27.3333 20.2083L24.4167 23.125L22.125 20.8333ZM22.125 25.4167V29.5833H17.9583V25.4167H15.875V29.5833H9.625C4.41667 29.5833 0.25 25.4167 0.25 20.2083C0.25 16.0417 2.95833 12.5 6.5 11.25C7.33333 5.20834 12.5417 0.416672 19 0.416672C24.4167 0.416672 29.2083 3.95834 30.875 8.75C35.875 9.375 39.8333 13.75 39.8333 19.1667C39.8333 24.5833 35.6667 28.9583 30.4583 29.5833H24.2083V25.4167H22.125Z" fill="#999999"/>
+    <path d="M22.125 20.8333V25.4167H30.4583C33.375 25 35.6667 22.2917 35.6667 19.1667C35.6667 15.625 32.9583 12.9167 29.4167 12.9167C28.5833 12.9167 27.9583 13.125 27.3333 13.3333V12.9167C27.3333 8.33334 23.5833 4.58334 19 4.58334C14.4167 4.58334 10.6667 8.33334 10.6667 12.9167C10.6667 13.75 10.875 14.375 10.875 15.2083C10.4583 15 10.0417 15 9.625 15C6.70833 15 4.41667 17.2917 4.41667 20.2083C4.41667 23.125 6.70833 25.4167 9.625 25.4167H17.9583V20.8333L15.6667 23.125L12.75 20.2083L20.0417 12.9167L27.3333 20.2083L24.4167 23.125L22.125 20.8333ZM22.125 25.4167V29.5833H17.9583V25.4167H15.875V29.5833H9.625C4.41667 29.5833 0.25 25.4167 0.25 20.2083C0.25 16.0417 2.95833 12.5 6.5 11.25C7.33333 5.20834 12.5417 0.416672 19 0.416672C24.4167 0.416672 29.2083 3.95834 30.875 8.75C35.875 9.375 39.8333 13.75 39.8333 19.1667C39.8333 24.5833 35.6667 28.9583 30.4583 29.5833H24.2083V25.4167H22.125Z" fill="#999999"/>
+    </svg>
+    
\ No newline at end of file

src/assets/svg/upload/uploadTip2.svg

+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M48.75 27.1875C48.75 26.875 48.75 26.5625 48.4375 25.9375L42.5 15.625C41.875 14.6875 40.9375 14.375 40 15C39.0625 15.625 38.75 16.5625 39.375 17.5L44.0625 25.625H36.25C35.3125 25.625 34.6875 26.25 34.375 27.1875C34.0625 29.375 32.8125 31.5625 31.25 32.8125C29.6875 34.0625 27.5 35 25 35C22.8125 35 20.625 34.0625 18.75 32.8125C17.1875 31.25 15.9375 29.375 15.625 27.1875C15.625 26.25 14.6875 25.625 13.75 25.625H5.9375L10.625 17.5C11.25 16.5625 10.9375 15.625 10 15C9.0625 14.375 8.125 14.6875 7.5 15.625L1.5625 25.9375C1.25 26.25 1.25 26.875 1.25 27.1875V44.0625C1.25 45 2.1875 45.9375 3.125 45.9375H46.875C47.8125 45.9375 48.75 45 48.75 44.0625V27.1875ZM45 42.1875H5V29.0625H12.5C13.125 31.5625 14.6875 33.75 16.5625 35.3125C18.75 37.5 21.875 38.75 25 38.75C28.125 38.75 31.25 37.5 33.4375 35.625C35.3125 34.0625 36.875 31.875 37.5 29.375H45V42.1875ZM14.6875 18.125H20V29.375C20 30 20.625 30.3125 20.9375 30.3125H28.4375C29.0625 30.3125 29.6875 29.6875 29.6875 29.375V18.125H35C35.625 18.125 36.25 17.5 36.25 16.875C36.25 16.5625 36.25 16.25 35.9375 16.25L25.625 6.25C25.3125 5.625 24.6875 5.625 24.0625 6.25L14.0625 16.25C13.75 16.5625 13.75 17.5 14.0625 17.8125C14.0625 18.125 14.375 18.125 14.6875 18.125ZM25 8.4375L32.8125 15.9375H28.75C28.125 15.9375 27.8125 16.5625 27.8125 17.1875V28.125H22.1875V17.1875C22.1875 16.5625 21.5625 16.25 20.9375 16.25H17.5L25 8.4375Z" fill="#888FA1"/>
+    </svg>
+    
\ No newline at end of file

src/components/custom/ImgSizeRadioGroup.vue

+<template>
+  <div class="custom-img-size-radio">
+    <template v-for="item in list" :key="item.value">
+      <template v-if="item.type == 'custom'">
+        <div
+          class="custom-input-parent custom-before-line"
+          :class="{ active: item.value == Current_btn }"
+          @click="onBtnChange(item)"
+        >
+          <div class="input-box-t">
+            <CustomInput v-model="item.value1" placeholder=""></CustomInput>
+            <span class="center-text">x</span>
+            <CustomInput v-model="item.value2" placeholder=""></CustomInput>
+          </div>
+          <div class="label-text">{{ item.label }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          class="custom-radio-box custom-before-line"
+          :class="{ active: item.value == Current_btn }"
+          @click="onBtnChange(item)"
+        >
+          <div class="img-size-text">{{ item.size }}</div>
+          <div class="label-text">{{ item.label }}</div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CustomInput from '@/components/custom/input/index.vue';
+import { ref } from 'vue';
+const props = withDefaults(
+  defineProps<{
+    list: any[];
+    modelValue: string;
+  }>(),
+  {}
+);
+const emit = defineEmits(['update:modelValue']);
+// 当前选择的下标
+const Current_btn = ref(props.modelValue);
+const onBtnChange = (item: any) => {
+  Current_btn.value = item.value;
+};
+</script>
+
+<style lang="less">
+@import '@/style/line.less';
+@import '@/style/variables.less';
+.custom-img-size-radio {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 12px;
+  .custom-input-parent {
+    transition: all 0.3s;
+    width: 50%;
+    min-width: 250px;
+    height: 94px;
+    background: #181818;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-direction: column;
+    cursor: pointer;
+    .input-box-t {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .custom-input-global {
+        width: 100px !important;
+        height: 35px;
+        .custom-input-box {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .center-text {
+        font-weight: 700;
+        font-size: @font-size-20;
+        color: #ffffff;
+        padding: 0 12px;
+      }
+    }
+    .label-text {
+      color: #b1b5c4;
+      font-size: @font-size-12;
+    }
+  }
+  .custom-radio-box {
+    transition: all 0.3s;
+    width: 20%;
+    min-width: 125px;
+    height: 94px;
+    background: #181818;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    cursor: pointer;
+    .img-size-text {
+      font-weight: 700;
+      font-size: @font-size-20;
+    }
+    .label-text {
+      font-size: @font-size-12;
+      color: #b1b5c4;
+    }
+  }
+  .active {
+    transition: all 0.3s;
+    .img-size-text,
+    .label-text {
+      color: #00f9f9;
+    }
+    &::before {
+      border-color: #00f9f9;
+    }
+  }
+}
+</style>

src/components/custom/RadioGroup.vue

+<template>
+  <div class="custom-public-radio-group">
+    <template></template>
+    <TButton>{{}}</TButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Button as TButton } from 'tdesign-vue-next';
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    list: any[];
+  }>(),
+  {}
+);
+const emit = defineEmits(['update;modelValue']);
+</script>
+
+<style lang="less">
+.custom-public-radio-group {
+}
+</style>

src/components/custom/Select.vue

@@ -71,7 +71,6 @@ watch(
   }
   }
 }
 }
 .custom-select-box {
 .custom-select-box {
-  flex: 1;
   .t-select__wrap {
   .t-select__wrap {
     width: 100%;
     width: 100%;
     height: 48px;
     height: 48px;

src/components/custom/gptmessage.vue

+<template>
+  <div class="custom-gpt-message narrow-scrollbar">
+    <div class="gpt-line" v-for="item in list" :key="item.message">
+      <GptIcon></GptIcon>
+      <span class="message">
+        <template v-if="item.message">
+          {{ item.message }}
+        </template>
+        <template v-else>
+          <!-- loading -->
+          <span v-show="loading">|</span>
+        </template>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import GptIcon from '@/assets/svg/gpt/gpt-icon.svg';
+
+const props = withDefaults(
+  defineProps<{
+    computed?: boolean;
+    list: any[];
+  }>(),
+  {}
+);
+const loading = ref(false);
+let input_interval: any = null;
+// 开启定时显示任务
+const openInterval = () => {
+  input_interval = window.setInterval(() => {
+    loading.value = !loading.value;
+  }, 800);
+};
+// 关闭定时器
+const closeInterval = () => {
+  if (input_interval) {
+    window.clearInterval(input_interval);
+    clearInterval(input_interval);
+    input_interval = null;
+  }
+};
+onMounted(() => {
+  if (props.computed) {
+    // 计算最大高度
+  }
+  openInterval();
+});
+
+onBeforeUnmount(() => {
+  closeInterval();
+});
+</script>
+
+<style lang="less">
+.custom-gpt-message {
+  width: 100%;
+  flex: 1;
+  background: #181818;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  max-height: 500px;
+  .gpt-line {
+    display: flex;
+    .message {
+      flex: 1;
+      padding-left: 12px;
+    }
+  }
+  & > :not(:first-child) {
+    margin-top: 12px;
+  }
+}
+</style>

src/components/custom/input/index.vue

@@ -225,9 +225,10 @@ watch(
 @import '@/style/variables.less';
 @import '@/style/variables.less';
 @import '@/style/line.less';
 @import '@/style/line.less';
 .custom-input-global {
 .custom-input-global {
+  width: 200px;
   height: 100%;
   height: 100%;
   .custom-input-box {
   .custom-input-box {
-    width: 370px;
+    width: 100%;
     height: 48px;
     height: 48px;
     background: #181818;
     background: #181818;
     /* 背景线条 */
     /* 背景线条 */
@@ -238,7 +239,7 @@ watch(
     .da();
     .da();
     .cust-input {
     .cust-input {
       height: 100%;
       height: 100%;
-      width: 0;
+      width: 100%;
       flex: 1;
       flex: 1;
       outline: none;
       outline: none;
       border: none;
       border: none;

src/components/custom/resetbutton.vue

+<template>
+  <TButton
+    class="custom-reset-button custom-button-line"
+    :style="{ width: width, fontWeight: bold ? 600 : 500 }"
+    ><slot></slot
+  ></TButton>
+</template>
+
+<script lang="ts" setup>
+import { Button as TButton } from 'tdesign-vue-next';
+const props = withDefaults(
+  defineProps<{
+    width?: string;
+    bold?: boolean;
+  }>(),
+  {
+    width: '185px',
+  }
+);
+</script>
+
+<style lang="less">
+.custom-reset-button {
+  height: 50px;
+  background: transparent !important;
+  border: none;
+  box-sizing: border-box;
+  border-radius: 8px;
+  --ripple-color: none !important;
+  transition: all 0.3s;
+  box-shadow: none !important;
+  &:hover {
+    background: #00dddd !important;
+    transition: all 0.3s;
+    color: #000000;
+  }
+}
+.custom-button-line {
+  position: relative !important;
+  box-sizing: border-box;
+  &::before {
+    box-sizing: border-box;
+    content: '';
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    border: 0.5px solid #b1b5c4;
+    transition: all 0.2s;
+    border-radius: 16px;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    transform: scale(0.5);
+    -webkit-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    pointer-events: none;
+  }
+}
+</style>

src/components/custom/textarea.vue

+<template>
+  <div class="custom-textarea-box">
+    <TTextarea
+      class="custom-t-textarea custom-before-line"
+      v-model="textarea_value"
+      :placeholder="placeholder"
+      :maxcharacter="maxlength"
+      :autosize="{
+        maxRows: maxRows,
+        minRows: minRows,
+      }"
+    ></TTextarea>
+    <div class="position-text">
+      <span> {{ textareaLength }}/{{ maxlength }}</span> ｜
+      <span class="reset-btn" @click="reset">清空</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Textarea as TTextarea } from 'tdesign-vue-next';
+import { computed, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    placeholder?: string;
+    maxRows?: number;
+    minRows?: number;
+    maxlength?: number | null;
+  }>(),
+  {
+    placeholder: '请输入',
+    maxRows: 5,
+    minRows: 5,
+    maxlength: 500,
+  }
+);
+const emit = defineEmits(['update:modelValue']);
+const textarea_value = ref('');
+const reset = () => {
+  textarea_value.value = '';
+};
+const textareaLength = computed(() => {
+  // 文本总长度
+  const total_len = textarea_value.value.length;
+  if (total_len) {
+    // 获取中文文本的长度
+    let re = /[\u4E00-\u9FA5]/g;
+    let list = textarea_value.value.match(re);
+    if (list && list.length) {
+      // 加上其他字符的长度
+      const other_len = total_len - list.length;
+      return list.length * 2 + other_len;
+    }
+  }
+  return total_len;
+});
+watch(
+  () => textarea_value.value,
+  (v) => {
+    emit('update:modelValue', v);
+  }
+);
+watch(
+  () => props.modelValue,
+  (v) => {
+    textarea_value.value = v;
+  }
+);
+</script>
+
+<style lang="less">
+@import '@/style/line.less';
+.custom-textarea-box {
+  position: relative;
+  width: 100%;
+  .custom-t-textarea {
+    .t-textarea__inner {
+      background: #181818;
+      border: none;
+      color: white;
+      padding: 6px 12px;
+      resize: none;
+      &::placeholder {
+        color: #888fa2;
+      }
+    }
+    .t-textarea__limit {
+      display: none;
+    }
+    .t-is-focused {
+      box-shadow: none;
+    }
+    &:focus-within {
+      &::before {
+        border-color: #00f9f9;
+        transition: all 0.2s;
+      }
+    }
+  }
+  .position-text {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    .reset-btn {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+</style>

src/components/modulecard.vue

@@ -27,7 +27,8 @@ const toGenerate = (item: any) => {
   // 判断类型跳转页面
   // 判断类型跳转页面
   console.log(item);
   console.log(item);
   const url = router.resolve({
   const url = router.resolve({
-    path: '/CopywritingGeneration',
+    // path: '/CopywritingGeneration',
+    path: '/ImageGeneration',
   });
   });
   window.open(url.href);
   window.open(url.href);
 };
 };

src/layout/content.vue

@@ -31,8 +31,7 @@ const route = useRoute();
     overflow: auto;
     overflow: auto;
     .center-box {
     .center-box {
       margin: 0 auto;
       margin: 0 auto;
-      width: 1597px;
-      max-width: 100vw;
+      max-width: 1597px;
       box-sizing: border-box;
       box-sizing: border-box;
     }
     }
   }
   }

src/pages/CopywritingGeneration/index.vue

@@ -2,34 +2,54 @@
   <div class="custom-copywriting-generation">
   <div class="custom-copywriting-generation">
     <img class="tip-box" :src="imgs.tips" alt="" />
     <img class="tip-box" :src="imgs.tips" alt="" />
     <div class="interaction-form">
     <div class="interaction-form">
-      <div class="basic-info">
-        <div class="label">*基础填写</div>
+      <div class="basic-info" v-for="item in AdminData.list" :key="item.name">
+        <div class="label">*{{ item.name }}</div>
         <div class="value">
         <div class="value">
-          <template v-for="item in AdminData.list" :key="item.name">
-            <template v-if="item.component_type == 'input'">
+          <template v-for="it in item.lists" :key="it.name">
+            <template v-if="it.component_type == 'input'">
               <CustomInput
               <CustomInput
-                v-model="item.value"
-                :type="item.type"
-                :placeholder="item.placeholder"
+                v-model="it.value"
+                :type="it.type"
+                :placeholder="it.placeholder"
               ></CustomInput>
               ></CustomInput>
             </template>
             </template>
-            <template v-else-if="item.component_type == 'select'">
+            <template v-else-if="it.component_type == 'select'">
               <CustomSelect
               <CustomSelect
-                :options="item.options"
-                v-model="item.value"
-                :placeholder="item.placeholder"
+                :options="it.options"
+                v-model="it.value"
+                :placeholder="it.placeholder"
               ></CustomSelect>
               ></CustomSelect>
             </template>
             </template>
+            <!-- textarea -->
+            <template v-else-if="it.component_type == 'textarea'">
+              <CustomTextArea
+                v-model="it.value"
+                :placeholder="it.placeholder"
+                :maxlength="it.maxlength"
+              ></CustomTextArea>
+            </template>
           </template>
           </template>
         </div>
         </div>
       </div>
       </div>
+      <div class="confirm-box">
+        <div>字符余额：0/50000</div>
+        <CustomResetButton @click="onReset" width="20%">重置</CustomResetButton>
+        <CustomResetButton @click="onReset" width="50%" bold
+          >生成图片</CustomResetButton
+        >
+      </div>
+      <div class="cust-line"></div>
+      <CustomGptMessage computed :list="MessageList.list"></CustomGptMessage>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
 import CustomSelect from '@/components/custom/Select.vue';
 import CustomSelect from '@/components/custom/Select.vue';
+import CustomTextArea from '@/components/custom/textarea.vue';
 import CustomInput from '@/components/custom/input/index.vue';
 import CustomInput from '@/components/custom/input/index.vue';
+import CustomResetButton from '@/components/custom/resetbutton.vue';
+import CustomGptMessage from '@/components/custom/gptmessage.vue';
 import { onBeforeMount, reactive } from 'vue';
 import { onBeforeMount, reactive } from 'vue';
 const imgs = {
 const imgs = {
   tips: new URL('../../assets/img/tips.png', import.meta.url).href,
   tips: new URL('../../assets/img/tips.png', import.meta.url).href,
@@ -39,6 +59,20 @@ const imgs = {
 const AdminData = reactive({
 const AdminData = reactive({
   list: [],
   list: [],
 });
 });
+// gpt-消息列表
+const MessageList = reactive({
+  list: [
+    {
+      user: 'user',
+      message:
+        '早上好,早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好,早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好',
+    },
+    {
+      user: 'user',
+      message: '',
+    },
+  ],
+});
 // 获取后台配置的组件
 // 获取后台配置的组件
 const getAdminComponent = async () => {
 const getAdminComponent = async () => {
   try {
   try {
@@ -47,45 +81,72 @@ const getAdminComponent = async () => {
     //   }
     //   }
     let list = [
     let list = [
       {
       {
-        type: 'text',
-        name: 'url',
-        label: '链接',
-        value: null,
-        span: 24,
-        placeholder: '输入链接',
-        // component_type: 'input',
-      },
-      // 下拉选择
-      {
-        type: 'select',
-        options: [
+        name: '基础填写',
+        value: 'name',
+        lists: [
           {
           {
-            label: '第一个',
+            type: 'text',
+            name: 'url',
+            label: '链接',
+            value: null,
+            span: 24,
+            placeholder: '输入链接',
+            // component_type: 'input',
+          },
+          // 下拉选择
+          {
+            type: 'select',
+            options: [
+              {
+                label: '第一个',
+                value: 1,
+              },
+              {
+                label: '第二个',
+                value: 2,
+              },
+            ],
+            //   可设置默认值
             value: 1,
             value: 1,
           },
           },
+        ],
+      },
+      {
+        name: '详细描述',
+        value: '2',
+        lists: [
           {
           {
-            label: '第二个',
-            value: 2,
+            // 长文本输入框
+            type: 'textarea',
+            name: 'url',
+            label: '链接',
+            value: null,
+            span: 24,
+            maxRows: '5',
+            minRows: '5',
+            placeholder: '详细描述产品细节，生成的文案更加完美。',
+            maxlength: 100,
+            // component_type: 'input',
           },
           },
         ],
         ],
-        //   可设置默认值
-        value: 1,
       },
       },
     ];
     ];
     // 修改数据
     // 修改数据
     list.forEach((item: any) => {
     list.forEach((item: any) => {
-      if (item.type == 'text') {
-        item.component_type = 'input';
-      } else if (item.type == 'select') {
-        item.component_type = 'select';
-      } else if (item.type == 'textarea') {
-        // 多行文本输入框
-        item.component_type = 'textarea';
-      }
-      //   判断value的值
-      if (!item.value) {
-        item.value = '';
-      }
+      item.lists.forEach((it: any) => {
+        if (it.type == 'text') {
+          it.component_type = 'input';
+        } else if (it.type == 'select') {
+          it.component_type = 'select';
+        } else if (it.type == 'textarea') {
+          // 多行文本输入框
+          it.component_type = 'textarea';
+        }
+        //   判断value的值
+        if (!it.value) {
+          it.value = '';
+        }
+      });
     });
     });
     AdminData.list = list;
     AdminData.list = list;
     console.log(AdminData.list);
     console.log(AdminData.list);
@@ -93,6 +154,10 @@ const getAdminComponent = async () => {
     console.log(e);
     console.log(e);
   }
   }
 };
 };
+// 重置
+const onReset = () => {
+  console.log('111');
+};
 onBeforeMount(async () => {
 onBeforeMount(async () => {
   // 获取组件列表
   // 获取组件列表
   await getAdminComponent();
   await getAdminComponent();
@@ -104,6 +169,10 @@ onBeforeMount(async () => {
 .custom-copywriting-generation {
 .custom-copywriting-generation {
   margin-top: @page-margin-top;
   margin-top: @page-margin-top;
   display: flex;
   display: flex;
+  .tip-box {
+    width: 50%;
+    object-fit: contain;
+  }
   .interaction-form {
   .interaction-form {
     background: #2d2d2d;
     background: #2d2d2d;
     border: 1px solid #565656;
     border: 1px solid #565656;
@@ -112,6 +181,8 @@ onBeforeMount(async () => {
     margin-left: 12px;
     margin-left: 12px;
     padding: 12px;
     padding: 12px;
     box-sizing: border-box;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     .basic-info {
     .basic-info {
       .label {
       .label {
         margin: 4px 0 12px 0;
         margin: 4px 0 12px 0;
@@ -124,11 +195,29 @@ onBeforeMount(async () => {
         justify-content: space-between;
         justify-content: space-between;
         flex-wrap: wrap;
         flex-wrap: wrap;
         row-gap: 30px;
         row-gap: 30px;
-        & > * {
-          margin: 0 12px;
+        .custom-input-global {
+          width: 48%;
+        }
+        .custom-select-box {
+          width: 48%;
         }
         }
       }
       }
     }
     }
+    .confirm-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 20px 0;
+      box-sizing: border-box;
+    }
+    .cust-line {
+      width: 100%;
+      height: 1px;
+      background: #565656;
+    }
+    & > :not(:first-child) {
+      margin-top: 20px;
+    }
   }
   }
 }
 }
 </style>
 </style>

src/pages/ImageGeneration/components/GenerateResult/index.tsx

+import { defineComponent } from 'vue';
+import './index.less';
+export default defineComponent({
+  setup(props, ctx) {
+    return () => <div>1</div>;
+  },
+});

src/pages/ImageGeneration/components/upload/index.less

+@import '@/style/variables.less';
+.custom-real-upload {
+  background: #181818;
+  border-radius: 8px;
+  width: 100%;
+  height: 330px;
+  padding: 20px 46px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .real-upload-close-icon {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+  }
+  .real-upload-content {
+    display: flex;
+    justify-content: space-between;
+    .custom-real-upload-component {
+      width: 360px;
+      height: 200px;
+      .t-upload {
+        width: 100%;
+        height: 100%;
+        .custom-upload-click-box {
+          border-radius: 8px;
+          width: 360px;
+          height: 200px;
+          display: flex;
+          justify-content: space-evenly;
+          align-items: center;
+          flex-direction: column;
+          .title {
+            font-weight: 600;
+            font-size: @font-size-20;
+            color: #b3bfde;
+          }
+          .title2 {
+            font-size: @font-size-16;
+            color: #888fa1;
+          }
+          .custom-chose-file {
+            background: #00dddd;
+            border-radius: 8px;
+            border: none;
+            width: 200px;
+            height: 46px;
+            --ripple-color: none !important;
+            font-weight: 600;
+            font-size: @font-size-18;
+            color: #000000;
+          }
+        }
+        .t-upload__dragger {
+          padding: 0;
+          border: none;
+          width: 360px;
+          height: 200px;
+        }
+      }
+      .custom-uploading-stauts {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        .uploading-title {
+          font-weight: 400;
+          font-size: @font-size-15;
+          color: #8b8b8b;
+        }
+      }
+      .custom-UploadSuccess-stauts {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        .UploadSuccess-img {
+          width: 100%;
+          height: 100%;
+        }
+        .title1 {
+          font-weight: 600;
+          font-size: @font-size-18;
+          color: #000000;
+        }
+      }
+    }
+  }
+  .custom-real-upload-footer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .t-button {
+      width: 164px;
+      height: 46px;
+      border: none;
+      --ripple-color: none !important;
+      border-radius: 8px;
+      font-size: @font-size-18;
+    }
+    .submit {
+      background: #ebebeb;
+      color: #9a9a9a;
+      cursor: not-allowed;
+    }
+    .active {
+      background: #fd1753;
+      color: #ffffff;
+      cursor: pointer;
+    }
+    .reset-button {
+      border: 1px solid #dbdbdb;
+      background: white;
+      color: #000000;
+      margin-left: 12px;
+    }
+  }
+}
+.custom-upload-line {
+  position: relative !important;
+  &::before {
+    box-sizing: border-box;
+    content: '';
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    border: 0.5px dashed #b1b5c4;
+    transition: all 0.2s;
+    border-radius: 16px;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    transform: scale(0.5);
+    -webkit-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    pointer-events: none;
+  }
+}

src/pages/ImageGeneration/components/upload/index.tsx

+import { computed, defineComponent, reactive, ref } from 'vue';
+import './index.less';
+import UploadTip from '@/assets/svg/upload/uploadTip2.svg';
+import {
+  MessagePlugin,
+  Button as TButton,
+  Upload as TUpload,
+  Progress as TProgress,
+  UploadFile,
+  RequestMethodResponse,
+} from 'tdesign-vue-next';
+import { useStore } from 'vuex';
+import { getUserCookie } from '@/utils/api/userApi';
+import request from '@/utils/otherRequest';
+import { show_message } from '@/utils/tdesign_tool';
+import { v4 } from 'uuid';
+export default defineComponent({
+  props: {
+    modelValue: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const store = useStore();
+    // 后台配置的地址
+    const adminConfigUrl = computed(() => store.getters['user/getadminConfig']);
+    // 上传策略
+    const uploadStrategy = computed(
+      () => store.getters['user/getuploadStrategy']
+    );
+    const files = ref([]);
+    // 文件地址
+    const Curfile = reactive({
+      url: '',
+      status: 0,
+      // 当前上传模块提交的状态
+      uploadStatus: false,
+    });
+    const actionUrl = ref('');
+    // 上传进度条
+    const percentage = ref(0);
+    // 定时器
+    let percentageInterval: any = null;
+    // 上传进度定时器
+    const openpercentage = () => {
+      // 开启一个定时器，模拟上传进度
+      percentage.value = 0;
+      percentageInterval = setInterval(() => {
+        if (percentage.value == 99) {
+          return;
+        }
+        percentage.value += 1;
+      }, 100);
+    };
+    const beforeUpload = (file: File) => {
+      try {
+        let config = uploadStrategy.value.config;
+        let config_len = Object.keys(config).length;
+        if (!config_len) {
+          show_message('无法上传,请尝试刷新页面');
+          return false;
+        }
+        return true;
+      } catch (e) {
+        console.log(e);
+        return false;
+      }
+    };
+    const handleFail = ({ file }: any) => {
+      MessagePlugin.error(`文件 ${file.name} 上传失败`);
+    };
+    // 上传成功回调
+    const UploadSuccessCallback = (uuid: any, url: any) => {
+      // 关闭定时器
+      window.clearInterval(percentageInterval);
+      MessagePlugin.success('上传成功');
+      // 将将完整url传给父组件
+      Curfile.url = url;
+      // 成功2
+      Curfile.status = 2;
+      emit('update:modelValue', Curfile.url);
+    };
+    // 上传失败回调
+    const UploadErrorCallback = () => {
+      // 关闭定时器
+      window.clearInterval(percentageInterval);
+      Curfile.url = '';
+      // 失败0
+      Curfile.status = 0;
+      emit('update:modelValue', Curfile.url);
+      MessagePlugin.warning('上传失败');
+    };
+    // 内网上传-Intranet
+    const IntranetUpload = (file: any) => {
+      openpercentage();
+      return new Promise((resolve) => {
+        let uuid = v4();
+        // 上传中状态
+        Curfile.status = 1;
+        let url = '';
+        if (import.meta.env.MODE == 'production') {
+          // 线上地址使用完整url
+          url = adminConfigUrl.value + 'video/' + uuid + '.png';
+          // url = `http://192.168.1.19:5000/video/` + uuid + '.png';
+        } else if (import.meta.env.MODE == 'app') {
+          // app
+          url = '/video/' + uuid + '.png';
+        } else {
+          // 本地
+          url = '/video/' + uuid + '.png';
+        }
+        setTimeout(() => {
+          request.put(url, file[0].raw).then((res: any) => {
+            // resolve 参数为关键代码
+            if (res == 200) {
+              let url = adminConfigUrl.value + 'video/' + uuid + '.png';
+              UploadSuccessCallback(uuid, url);
+              //
+              Curfile.uploadStatus = true;
+              resolve({
+                status: 'success',
+                response: { url: Curfile.url },
+              });
+            } else {
+              UploadErrorCallback();
+              Curfile.uploadStatus = false;
+            }
+          });
+        }, 1000);
+      });
+    };
+    // 外网上传-func
+    const ExtranetUpload = (file: any) => {
+      openpercentage();
+      return new Promise<RequestMethodResponse>((resolve) => {
+        let uuid = v4();
+        // 上传中状态
+        Curfile.status = 1;
+        let url = '';
+        const { config } = uploadStrategy.value;
+        url = 'https://' + config.host;
+        setTimeout(() => {
+          let formData = new FormData();
+          formData.append('key', config.dir + uuid + '.png');
+          formData.append('policy', config.policy);
+          formData.append('OSSAccessKeyId', config.accessid);
+          formData.append('success_action_status', '200');
+          formData.append('callback', config.callback);
+          formData.append('signature', config.signature);
+          // formData.append('name', uuid + '.png');
+          formData.append('file', file[0].raw);
+          request
+            .post(url, formData, {
+              headers: {
+                'Content-Type': 'multipart/form-data;charset=utf-8',
+                // Accept: '*/*',
+              },
+            })
+            .then((res: any) => {
+              // resolve 参数为关键代码
+              if (res == 200) {
+                // 外网url
+                let url = config.domain + config.dir + uuid + '.png';
+                UploadSuccessCallback(uuid, url);
+                //
+                Curfile.uploadStatus = true;
+                resolve({
+                  status: 'success',
+                  response: { url: Curfile.url },
+                });
+              } else {
+                UploadErrorCallback();
+                Curfile.uploadStatus = false;
+              }
+            })
+            .catch((e) => {
+              console.log(e);
+            });
+        }, 1000);
+      });
+    };
+    const requestSuccessMethod = async (file: UploadFile | UploadFile[]) => {
+      return ExtranetUpload(file);
+    };
+    // 未上传
+    const notUploadHtml = () => {
+      return (
+        <TUpload
+          v-model={files.value}
+          method="PUT"
+          requestMethod={requestSuccessMethod}
+          action={actionUrl.value}
+          headers={{
+            authorization: `Bearer ${getUserCookie()}`,
+          }}
+          accept={'video'}
+          theme="custom"
+          before-upload={beforeUpload}
+          multiple
+          max={1}
+          draggable={true}
+          onfail={handleFail}
+        >
+          <div class="custom-upload-click-box">
+            <div class="title">选择图片</div>
+            <div class="title2">或拖拽图片到此处</div>
+            <div>
+              <UploadTip></UploadTip>
+            </div>
+            <TButton class="custom-chose-file">选择文件</TButton>
+          </div>
+        </TUpload>
+      );
+    };
+    // 上传中
+    const UploadingHtml = () => {
+      return (
+        <div class="custom-uploading-stauts">
+          <TProgress
+            theme="circle"
+            percentage={percentage.value}
+            size={'small'}
+          />
+          <div class="uploading-title">正在上传</div>
+        </div>
+      );
+    };
+    const UploadSuccess = () => {
+      return (
+        <div class="custom-UploadSuccess-stauts">
+          <img class="UploadSuccess-img" src={Curfile.url} alt="" />
+        </div>
+      );
+    };
+    // 获取当前上传状态
+    const currentUploadStatus = () => {
+      if (Curfile.status == 0) {
+        return notUploadHtml();
+      } else if (Curfile.status == 1) {
+        // 上传中
+        return UploadingHtml();
+      } else {
+        // 上传完成
+        return UploadSuccess();
+      }
+    };
+    return () => (
+      <div class="custom-real-upload custom-upload-line">
+        <div class="real-upload-content">
+          <div class="custom-real-upload-component">
+            {currentUploadStatus()}
+          </div>
+        </div>
+      </div>
+    );
+  },
+});

src/pages/ImageGeneration/index.vue

+<template>
+  <div class="custom-copywriting-generation">
+    <div class="interaction-form">
+      <div class="basic-info" v-for="item in AdminData.list" :key="item.name">
+        <div class="label">*{{ item.name }}</div>
+        <div class="value">
+          <template v-for="it in item.lists" :key="it.name">
+            <template v-if="it.component_type == 'input'">
+              <CustomInput
+                v-model="it.value"
+                :type="it.type"
+                :placeholder="it.placeholder"
+              ></CustomInput>
+            </template>
+            <template v-else-if="it.component_type == 'select'">
+              <CustomSelect
+                :options="it.options"
+                v-model="it.value"
+                :placeholder="it.placeholder"
+              ></CustomSelect>
+            </template>
+            <!-- textarea -->
+            <template v-else-if="it.component_type == 'textarea'">
+              <CustomTextArea
+                v-model="it.value"
+                :placeholder="it.placeholder"
+                :maxlength="it.maxlength"
+              ></CustomTextArea>
+            </template>
+            <template v-else-if="it.component_type == 'radiogroup_size'">
+              <ImgSizeRadioGroupVue
+                :list="it.options"
+                v-model="it.value"
+              ></ImgSizeRadioGroupVue>
+            </template>
+            <template v-else-if="it.component_type == 'upload'">
+              <CustomUpload v-model="it.value"></CustomUpload>
+            </template>
+            <!-- radio-group -->
+            <template v-else-if="it.component_type == 'radiogroup'">
+              <CustomRadioGroup
+                v-model="it.value"
+                :list="it.options"
+              ></CustomRadioGroup>
+            </template>
+          </template>
+        </div>
+      </div>
+      <div class="confirm-box">
+        <div>字符余额：0/50000</div>
+        <CustomResetButton @click="onReset" width="20%">重置</CustomResetButton>
+        <CustomResetButton @click="onReset" width="50%" bold
+          >生成图片</CustomResetButton
+        >
+      </div>
+      <div class="cust-line"></div>
+      <CustomGptMessage computed :list="MessageList.list"></CustomGptMessage>
+    </div>
+    <div class="generate-result">
+      <CustomGenerateResult></CustomGenerateResult>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CustomSelect from '@/components/custom/Select.vue';
+import CustomTextArea from '@/components/custom/textarea.vue';
+import CustomInput from '@/components/custom/input/index.vue';
+import CustomResetButton from '@/components/custom/resetbutton.vue';
+import CustomGptMessage from '@/components/custom/gptmessage.vue';
+import CustomGenerateResult from './components/GenerateResult';
+import CustomUpload from './components/upload';
+import { onBeforeMount, reactive } from 'vue';
+import ImgSizeRadioGroupVue from '@/components/custom/ImgSizeRadioGroup.vue';
+import CustomRadioGroup from '@/components/custom/RadioGroup.vue';
+const imgs = {
+  tips: new URL('../../assets/img/tips.png', import.meta.url).href,
+};
+// 后台配置的输入类型--input-select-textarea
+// type-1是input,2是select,3是长文本输入
+const AdminData = reactive({
+  list: [],
+});
+// gpt-消息列表
+const MessageList = reactive({
+  list: [
+    {
+      user: 'user',
+      message:
+        '早上好,早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好,早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好早上好',
+    },
+    {
+      user: 'user',
+      message: '',
+    },
+  ],
+});
+// 获取后台配置的组件
+const getAdminComponent = async () => {
+  try {
+    //   let res:any = await ddd();
+    //   if(res.data){
+    //   }
+    let list = [
+      {
+        name: '基础填写',
+        value: 'name',
+        lists: [
+          {
+            type: 'text',
+            name: 'url',
+            label: '链接',
+            value: null,
+            span: 24,
+            placeholder: '输入链接',
+            // component_type: 'input',
+          },
+          // 下拉选择
+          {
+            type: 'select',
+            options: [
+              {
+                label: '第一个',
+                value: 1,
+              },
+              {
+                label: '第二个',
+                value: 2,
+              },
+            ],
+            //   可设置默认值
+            value: 1,
+          },
+        ],
+      },
+      {
+        name: '详细描述',
+        value: '2',
+        lists: [
+          {
+            // 长文本输入框
+            type: 'textarea',
+            name: 'url',
+            label: '链接',
+            value: null,
+            span: 24,
+            maxRows: '5',
+            minRows: '5',
+            placeholder: '详细描述产品细节，生成的文案更加完美。',
+            maxlength: 100,
+            // component_type: 'input',
+          },
+        ],
+      },
+      //   图片尺寸
+      {
+        name: '图片尺寸',
+        value: '3',
+        lists: [
+          {
+            // 单选按钮组
+            type: 'radiogroup_size',
+            name: 'img_size',
+            value: '1600x1600',
+            span: 24,
+            placeholder: '详细描述产品细节，生成的文案更加完美。',
+            // component_type: 'input',
+            options: [
+              {
+                size: '1600x1600',
+                label: '亚马逊产品图尺寸',
+                value: '1600x1600',
+              },
+              {
+                size: '600x180',
+                label: '亚马逊a+主图',
+                value: '600x180',
+              },
+              {
+                type: 'custom',
+                label: '自定义',
+                value: '',
+                value1: '',
+                value2: '',
+              },
+            ],
+          },
+        ],
+      },
+      //   上传图片
+      {
+        name: '上传图片',
+        value: '4',
+        lists: [
+          {
+            // 单选按钮组
+            type: 'upload',
+            name: 'upload',
+            value: null,
+            span: 24,
+          },
+        ],
+      },
+      //   生成数量
+      {
+        name: '生成数量',
+        value: '5',
+        lists: [
+          {
+            // 单选按钮组
+            type: 'radiogroup',
+            name: 'upload',
+            value: null,
+            span: 24,
+            options: [
+              {
+                label: '100',
+                value: '100',
+              },
+              {
+                label: '1000',
+                value: '1000',
+              },
+              {
+                label: '5000',
+                value: '5000',
+              },
+              {
+                label: '10000',
+                value: '10000',
+              },
+              {
+                type: 'custom',
+                placeholder: '自定义',
+                label: '',
+                value: '',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    // 修改数据
+    list.forEach((item: any) => {
+      item.lists.forEach((it: any) => {
+        if (it.type == 'text') {
+          it.component_type = 'input';
+        } else if (it.type == 'select') {
+          it.component_type = 'select';
+        } else if (it.type == 'textarea') {
+          // 多行文本输入框
+          it.component_type = 'textarea';
+        } else if (it.type == 'radiogroup_size') {
+          // 单选按钮
+          it.component_type = 'radiogroup_size';
+        } else if (it.type == 'radiogroup') {
+          it.component_type = 'radiogroup';
+        } else if (it.type == 'upload') {
+          // 上传
+          it.component_type = 'upload';
+        }
+        //   判断value的值
+        if (!it.value) {
+          it.value = '';
+        }
+      });
+    });
+    AdminData.list = list;
+    console.log(AdminData.list);
+  } catch (e) {
+    console.log(e);
+  }
+};
+// 重置
+const onReset = () => {
+  console.log('111');
+};
+onBeforeMount(async () => {
+  // 获取组件列表
+  await getAdminComponent();
+});
+</script>
+
+<style lang="less">
+@import '@/style/variables.less';
+.custom-copywriting-generation {
+  margin-top: @page-margin-top;
+  display: flex;
+  .generate-result {
+    width: 50%;
+    border: 2px dashed #565656;
+    border-radius: 18px;
+    margin-left: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .interaction-form {
+    background: #2d2d2d;
+    border: 1px solid #565656;
+    border-radius: 18px;
+    flex: 1;
+    padding: 12px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .basic-info {
+      .label {
+        margin: 4px 0 12px 0;
+        color: #b1b5c4;
+        font-weight: 300;
+        font-size: @font-size-12;
+      }
+      .value {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        row-gap: 30px;
+        .custom-input-global {
+          width: 48%;
+        }
+        .custom-select-box {
+          width: 48%;
+        }
+      }
+    }
+    .confirm-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 20px 0;
+      box-sizing: border-box;
+    }
+    .cust-line {
+      width: 100%;
+      height: 1px;
+      background: #565656;
+    }
+    & > :not(:first-child) {
+      margin-top: 20px;
+    }
+  }
+}
+</style>

src/router/modules/home.ts

@@ -39,6 +39,15 @@ export default [
           header: true,
           header: true,
         },
         },
       },
       },
+      // 图片生成 ImageGeneration
+      {
+        path: '/ImageGeneration',
+        name: 'ImageGeneration',
+        component: () => import('@/pages/ImageGeneration/index.vue'),
+        meta: {
+          header: true,
+        },
+      },
       {
       {
         path: '/login',
         path: '/login',
         name: 'login',
         name: 'login',

src/style/index.less

@@ -6,7 +6,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   padding: 0;
   padding: 0;
   margin: 0;
   margin: 0;
-  user-select: none;
   color: white;
   color: white;
 }
 }
 
 

src/style/line.less

@@ -7,6 +7,7 @@
     height: 200%;
     height: 200%;
     position: absolute;
     position: absolute;
     border: 0.5px solid #b1b5c4;
     border: 0.5px solid #b1b5c4;
+    transition: all 0.2s;
     border-radius: 16px;
     border-radius: 16px;
     top: 0;
     top: 0;
     left: 0;
     left: 0;

src/style/ui.less

@@ -10,3 +10,10 @@
 //   -ms-touch-action: none;
 //   -ms-touch-action: none;
 //   touch-action: none;
 //   touch-action: none;
 // }
 // }
+.narrow-scrollbar {
+  &::-webkit-scrollbar {
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #ddd;
+  }
+}