Skip to content

P
poc-fe
Commit 1b5de751 authored by nick zheng's avatar nick zheng
Browse files
Options

chore: h5应用分享页适配移动端

parent f627afff
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 158 deletions
package.json
View file @ 1b5de751
...@@ -64,6 +64,8 @@ ...@@ -64,6 +64,8 @@
"@types/validator": "^13.12.2", "@types/validator": "^13.12.2",
"@typescript-eslint/parser": "^7.18.0", "@typescript-eslint/parser": "^7.18.0",
"@unocss/eslint-config": "^0.61.9", "@unocss/eslint-config": "^0.61.9",
"@unocss/postcss": "66.1.0-beta.10",
"@unocss/transformer-directives": "66.1.0-beta.10",
"@vitejs/plugin-vue": "^4.6.2", "@vitejs/plugin-vue": "^4.6.2",
"@vitejs/plugin-vue-jsx": "^4.0.1", "@vitejs/plugin-vue-jsx": "^4.0.1",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
...@@ -78,6 +80,7 @@ ...@@ -78,6 +80,7 @@
"naive-ui": "^2.39.0", "naive-ui": "^2.39.0",
"postcss": "^8.4.47", "postcss": "^8.4.47",
"postcss-html": "^1.7.0", "postcss-html": "^1.7.0",
"postcss-mobile-forever": "^5.0.0",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6", "prettier-plugin-tailwindcss": "^0.6.6",
"rollup-plugin-visualizer": "^5.12.0", "rollup-plugin-visualizer": "^5.12.0",
......
pnpm-lock.yaml
View file @ 1b5de751
...@@ -147,6 +147,12 @@ importers: ...@@ -147,6 +147,12 @@ importers:
'@unocss/eslint-config': '@unocss/eslint-config':
specifier: ^0.61.9 specifier: ^0.61.9
version: 0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2) version: 0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2)
'@unocss/postcss':
specifier: 66.1.0-beta.10
version: 66.1.0-beta.10(postcss@8.4.47)
'@unocss/transformer-directives':
specifier: 66.1.0-beta.10
version: 66.1.0-beta.10
'@vitejs/plugin-vue': '@vitejs/plugin-vue':
specifier: ^4.6.2 specifier: ^4.6.2
version: 4.6.2(vite@5.4.6(@types/node@20.16.5)(sass@1.79.1)(terser@5.39.0))(vue@3.5.13(typescript@5.6.2)) version: 4.6.2(vite@5.4.6(@types/node@20.16.5)(sass@1.79.1)(terser@5.39.0))(vue@3.5.13(typescript@5.6.2))
...@@ -189,6 +195,9 @@ importers: ...@@ -189,6 +195,9 @@ importers:
postcss-html: postcss-html:
specifier: ^1.7.0 specifier: ^1.7.0
version: 1.7.0 version: 1.7.0
postcss-mobile-forever:
specifier: ^5.0.0
version: 5.0.0(postcss@8.4.47)
prettier: prettier:
specifier: ^3.3.3 specifier: ^3.3.3
version: 3.3.3 version: 3.3.3
...@@ -962,6 +971,10 @@ packages: ...@@ -962,6 +971,10 @@ packages:
'@polka/url@1.0.0-next.25': '@polka/url@1.0.0-next.25':
resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
'@quansync/fs@0.1.2':
resolution: {integrity: sha512-ezIadUb1aFhwJLd++WVqVpi9rnlX8vnd4ju7saPhwLHJN1mJgOv0puePTGV+FbtSnWtwoHDT8lAm4kagDZmpCg==}
engines: {node: '>=20.0.0'}
'@rollup/pluginutils@5.1.0': '@rollup/pluginutils@5.1.0':
resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
...@@ -1175,9 +1188,16 @@ packages: ...@@ -1175,9 +1188,16 @@ packages:
resolution: {integrity: sha512-ATvZEFMQiW3/oUaaplVMBYuagEELtnLbHSYH4pUGbJ5MALAfV98mZRyk4FkKkYoMYqWLGdCylzpgMPFDOuFQlQ==} resolution: {integrity: sha512-ATvZEFMQiW3/oUaaplVMBYuagEELtnLbHSYH4pUGbJ5MALAfV98mZRyk4FkKkYoMYqWLGdCylzpgMPFDOuFQlQ==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@unocss/config@66.1.0-beta.10':
resolution: {integrity: sha512-+qx4zlVA9f1cCifoVXYmiHTI1y1rIxHgpiUdb0pI8OOdFsK6j0adua/hSdlvroXAoj2MNdE8WVEEv3L6MlDOpg==}
engines: {node: '>=14'}
'@unocss/core@0.61.9': '@unocss/core@0.61.9':
resolution: {integrity: sha512-2W1YZQIWXcueGdbXU/ZCqn/8yQhWk8e8kAHFkVlbc9rictkd2UmPB9nIZ8Ii1tMwt6F0TT6vfHbLJEGCV08o2g==} resolution: {integrity: sha512-2W1YZQIWXcueGdbXU/ZCqn/8yQhWk8e8kAHFkVlbc9rictkd2UmPB9nIZ8Ii1tMwt6F0TT6vfHbLJEGCV08o2g==}
'@unocss/core@66.1.0-beta.10':
resolution: {integrity: sha512-zYn5kmrmmaEQ81+CkoRcNYaMgUePb85RCIr3oty3yc4tFtJHymHuv+4NKoWWZzfhdfVKeK2y7U9wpLcfcbIiew==}
'@unocss/eslint-config@0.61.9': '@unocss/eslint-config@0.61.9':
resolution: {integrity: sha512-TYjrfSLkRZSRBBcdKWKuZafB9XuFHqI/P/AVI5Vwqvbdq3uc/eQpRXgnYoX1jM0ds1jzOigWRWiYkJx7KhxSnw==} resolution: {integrity: sha512-TYjrfSLkRZSRBBcdKWKuZafB9XuFHqI/P/AVI5Vwqvbdq3uc/eQpRXgnYoX1jM0ds1jzOigWRWiYkJx7KhxSnw==}
engines: {node: '>=14'} engines: {node: '>=14'}
...@@ -1198,6 +1218,12 @@ packages: ...@@ -1198,6 +1218,12 @@ packages:
peerDependencies: peerDependencies:
postcss: ^8.4.21 postcss: ^8.4.21
'@unocss/postcss@66.1.0-beta.10':
resolution: {integrity: sha512-MYbdqNozge5MY/cKO9A7b1WWef7Xw9GiwPWu+RpmBs7218dfowtfIIYzVyLEKWNoFW3iy5JjVm0oYfYCBKj9wg==}
engines: {node: '>=14'}
peerDependencies:
postcss: ^8.4.21
'@unocss/preset-attributify@0.61.9': '@unocss/preset-attributify@0.61.9':
resolution: {integrity: sha512-AHlEF7PiIBz1jHZZ62+AZ1u5ITrPNL/mgN8XyKwocoAr9HH8aQ3xzUgIuEX6vfV4a8rTdawffY99BQ12msePWQ==} resolution: {integrity: sha512-AHlEF7PiIBz1jHZZ62+AZ1u5ITrPNL/mgN8XyKwocoAr9HH8aQ3xzUgIuEX6vfV4a8rTdawffY99BQ12msePWQ==}
...@@ -1229,6 +1255,10 @@ packages: ...@@ -1229,6 +1255,10 @@ packages:
resolution: {integrity: sha512-54Hw0nF+3ga70ETo3kes4He62wdsB4dHMgEiD/DEmJzyVY3ZuG/sIVAgkxjMQDo5w4SSYU/Ys1QaY+IQmeJHFQ==} resolution: {integrity: sha512-54Hw0nF+3ga70ETo3kes4He62wdsB4dHMgEiD/DEmJzyVY3ZuG/sIVAgkxjMQDo5w4SSYU/Ys1QaY+IQmeJHFQ==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@unocss/rule-utils@66.1.0-beta.10':
resolution: {integrity: sha512-yGC8uQT6ErjLsWMU3Nx7mjvftYukLL+TELM+pmYOFmbhasrdnnJI1kT/04dyUHQTlm3XCs8I7LhbYaVz7MmIXA==}
engines: {node: '>=14'}
'@unocss/scope@0.61.9': '@unocss/scope@0.61.9':
resolution: {integrity: sha512-a9/vdg7YTFZEnJSaJBh/GqkLokYh3ZjEd3gHUxl/TZDSkGOz3WnkR2h+lgaLZm9MJ7RlSvJxYP8ySezH7jU1Pw==} resolution: {integrity: sha512-a9/vdg7YTFZEnJSaJBh/GqkLokYh3ZjEd3gHUxl/TZDSkGOz3WnkR2h+lgaLZm9MJ7RlSvJxYP8ySezH7jU1Pw==}
...@@ -1244,6 +1274,9 @@ packages: ...@@ -1244,6 +1274,9 @@ packages:
'@unocss/transformer-directives@0.61.9': '@unocss/transformer-directives@0.61.9':
resolution: {integrity: sha512-e4uIbHYdAYJSVpvxOv6kAsyI18X3gHkBsmBYWcUlPLVv+8tYo4eZtc0rn6ZvpiLzkFywG9e9cmpqVQwOR6pBVg==} resolution: {integrity: sha512-e4uIbHYdAYJSVpvxOv6kAsyI18X3gHkBsmBYWcUlPLVv+8tYo4eZtc0rn6ZvpiLzkFywG9e9cmpqVQwOR6pBVg==}
'@unocss/transformer-directives@66.1.0-beta.10':
resolution: {integrity: sha512-PVXVblXCVo6mjThQrTwHcoNuZvrxjkzW4qWzZQxrCiS+pQs31kod0UL9WFIUWc/xgyRgYUiLNlBBhdxDykNJjg==}
'@unocss/transformer-variant-group@0.61.9': '@unocss/transformer-variant-group@0.61.9':
resolution: {integrity: sha512-iewADYlY0LoeCb80E/4feHVSCKHl+QzGH4xUvW0zU85evMqNOa0/t0dCIoEG22wr/9piyEsg6OdHprZ2QliYqg==} resolution: {integrity: sha512-iewADYlY0LoeCb80E/4feHVSCKHl+QzGH4xUvW0zU85evMqNOa0/t0dCIoEG22wr/9piyEsg6OdHprZ2QliYqg==}
...@@ -1661,6 +1694,10 @@ packages: ...@@ -1661,6 +1694,10 @@ packages:
resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
css-tree@3.1.0:
resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
css-what@6.1.0: css-what@6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'} engines: {node: '>= 6'}
...@@ -1949,6 +1986,14 @@ packages: ...@@ -1949,6 +1986,14 @@ packages:
fastq@1.17.1: fastq@1.17.1:
resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
fdir@6.4.3:
resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
peerDependencies:
picomatch: ^3 || ^4
peerDependenciesMeta:
picomatch:
optional: true
file-entry-cache@8.0.0: file-entry-cache@8.0.0:
resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
engines: {node: '>=16.0.0'} engines: {node: '>=16.0.0'}
...@@ -2280,6 +2325,10 @@ packages: ...@@ -2280,6 +2325,10 @@ packages:
resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==} resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
hasBin: true hasBin: true
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
js-tokens@4.0.0: js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
...@@ -2467,6 +2516,9 @@ packages: ...@@ -2467,6 +2516,9 @@ packages:
mdn-data@2.0.30: mdn-data@2.0.30:
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
mdn-data@2.12.2:
resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
meow@12.1.1: meow@12.1.1:
resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==} resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
engines: {node: '>=16.10'} engines: {node: '>=16.10'}
...@@ -2533,11 +2585,6 @@ packages: ...@@ -2533,11 +2585,6 @@ packages:
peerDependencies: peerDependencies:
vue: ^3.0.0 vue: ^3.0.0
nanoid@3.3.7:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
nanoid@3.3.8: nanoid@3.3.8:
resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==} resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
...@@ -2671,6 +2718,10 @@ packages: ...@@ -2671,6 +2718,10 @@ packages:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
picomatch@4.0.2:
resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
engines: {node: '>=12'}
pidtree@0.6.0: pidtree@0.6.0:
resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==} resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
engines: {node: '>=0.10'} engines: {node: '>=0.10'}
...@@ -2698,6 +2749,11 @@ packages: ...@@ -2698,6 +2749,11 @@ packages:
postcss-media-query-parser@0.2.3: postcss-media-query-parser@0.2.3:
resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
postcss-mobile-forever@5.0.0:
resolution: {integrity: sha512-/kkhxMAd8kNZYeOFaTjhOx7hdfKE7AhJNU7SmlrxJV9fYqbLGrcGQMwXO4aWUvtxBseXwF2+qSMv3j/AZhitNA==}
peerDependencies:
postcss: ^8.0.0
postcss-resolve-nested-selector@0.1.6: postcss-resolve-nested-selector@0.1.6:
resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
...@@ -2821,6 +2877,9 @@ packages: ...@@ -2821,6 +2877,9 @@ packages:
resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==} resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
engines: {node: '>=0.6'} engines: {node: '>=0.6'}
quansync@0.2.10:
resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
queue-microtask@1.2.3: queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
...@@ -3144,6 +3203,10 @@ packages: ...@@ -3144,6 +3203,10 @@ packages:
tinyexec@0.3.0: tinyexec@0.3.0:
resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==} resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
tinyglobby@0.2.12:
resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
engines: {node: '>=12.0.0'}
tinymce@7.7.1: tinymce@7.7.1:
resolution: {integrity: sha512-rMetqSgZtYbj4YPOX+gYgmlhy/sIjVlI/qlrSOul/Mpn9e0aIIG/fR0qvQSVYvxFv6OzRTge++NQyTbzLJK1NA==} resolution: {integrity: sha512-rMetqSgZtYbj4YPOX+gYgmlhy/sIjVlI/qlrSOul/Mpn9e0aIIG/fR0qvQSVYvxFv6OzRTge++NQyTbzLJK1NA==}
...@@ -3219,6 +3282,9 @@ packages: ...@@ -3219,6 +3282,9 @@ packages:
unconfig@0.5.5: unconfig@0.5.5:
resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==} resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==}
unconfig@7.3.1:
resolution: {integrity: sha512-LH5WL+un92tGAzWS87k7LkAfwpMdm7V0IXG2FxEjZz/QxiIW5J5LkcrKQThj0aRz6+h/lFmKI9EUXmK/T0bcrw==}
undici-types@6.19.8: undici-types@6.19.8:
resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==} resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
...@@ -4197,6 +4263,10 @@ snapshots: ...@@ -4197,6 +4263,10 @@ snapshots:
'@polka/url@1.0.0-next.25': {} '@polka/url@1.0.0-next.25': {}
'@quansync/fs@0.1.2':
dependencies:
quansync: 0.2.10
'@rollup/pluginutils@5.1.0(rollup@4.21.3)': '@rollup/pluginutils@5.1.0(rollup@4.21.3)':
dependencies: dependencies:
'@types/estree': 1.0.5 '@types/estree': 1.0.5
...@@ -4403,8 +4473,15 @@ snapshots: ...@@ -4403,8 +4473,15 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@unocss/config@66.1.0-beta.10':
dependencies:
'@unocss/core': 66.1.0-beta.10
unconfig: 7.3.1
'@unocss/core@0.61.9': {} '@unocss/core@0.61.9': {}
'@unocss/core@66.1.0-beta.10': {}
'@unocss/eslint-config@0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2)': '@unocss/eslint-config@0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2)':
dependencies: dependencies:
'@unocss/eslint-plugin': 0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2) '@unocss/eslint-plugin': 0.61.9(eslint@9.10.0(jiti@2.0.0-beta.3))(typescript@5.6.2)
...@@ -4448,6 +4525,15 @@ snapshots: ...@@ -4448,6 +4525,15 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@unocss/postcss@66.1.0-beta.10(postcss@8.4.47)':
dependencies:
'@unocss/config': 66.1.0-beta.10
'@unocss/core': 66.1.0-beta.10
'@unocss/rule-utils': 66.1.0-beta.10
css-tree: 3.1.0
postcss: 8.4.47
tinyglobby: 0.2.12
'@unocss/preset-attributify@0.61.9': '@unocss/preset-attributify@0.61.9':
dependencies: dependencies:
'@unocss/core': 0.61.9 '@unocss/core': 0.61.9
...@@ -4500,6 +4586,11 @@ snapshots: ...@@ -4500,6 +4586,11 @@ snapshots:
'@unocss/core': 0.61.9 '@unocss/core': 0.61.9
magic-string: 0.30.17 magic-string: 0.30.17
'@unocss/rule-utils@66.1.0-beta.10':
dependencies:
'@unocss/core': 66.1.0-beta.10
magic-string: 0.30.17
'@unocss/scope@0.61.9': {} '@unocss/scope@0.61.9': {}
'@unocss/transformer-attributify-jsx-babel@0.61.9': '@unocss/transformer-attributify-jsx-babel@0.61.9':
...@@ -4525,6 +4616,12 @@ snapshots: ...@@ -4525,6 +4616,12 @@ snapshots:
'@unocss/rule-utils': 0.61.9 '@unocss/rule-utils': 0.61.9
css-tree: 2.3.1 css-tree: 2.3.1
'@unocss/transformer-directives@66.1.0-beta.10':
dependencies:
'@unocss/core': 66.1.0-beta.10
'@unocss/rule-utils': 66.1.0-beta.10
css-tree: 3.1.0
'@unocss/transformer-variant-group@0.61.9': '@unocss/transformer-variant-group@0.61.9':
dependencies: dependencies:
'@unocss/core': 0.61.9 '@unocss/core': 0.61.9
...@@ -4655,8 +4752,8 @@ snapshots: ...@@ -4655,8 +4752,8 @@ snapshots:
'@vue/compiler-ssr': 3.5.6 '@vue/compiler-ssr': 3.5.6
'@vue/shared': 3.5.6 '@vue/shared': 3.5.6
estree-walker: 2.0.2 estree-walker: 2.0.2
magic-string: 0.30.11 magic-string: 0.30.17
postcss: 8.4.47 postcss: 8.4.49
source-map-js: 1.2.1 source-map-js: 1.2.1
'@vue/compiler-ssr@3.5.13': '@vue/compiler-ssr@3.5.13':
...@@ -5032,6 +5129,11 @@ snapshots: ...@@ -5032,6 +5129,11 @@ snapshots:
mdn-data: 2.0.30 mdn-data: 2.0.30
source-map-js: 1.2.1 source-map-js: 1.2.1
css-tree@3.1.0:
dependencies:
mdn-data: 2.12.2
source-map-js: 1.2.1
css-what@6.1.0: {} css-what@6.1.0: {}
cssesc@3.0.0: {} cssesc@3.0.0: {}
...@@ -5360,6 +5462,10 @@ snapshots: ...@@ -5360,6 +5462,10 @@ snapshots:
dependencies: dependencies:
reusify: 1.0.4 reusify: 1.0.4
fdir@6.4.3(picomatch@4.0.2):
optionalDependencies:
picomatch: 4.0.2
file-entry-cache@8.0.0: file-entry-cache@8.0.0:
dependencies: dependencies:
flat-cache: 4.0.1 flat-cache: 4.0.1
...@@ -5643,6 +5749,8 @@ snapshots: ...@@ -5643,6 +5749,8 @@ snapshots:
jiti@2.0.0-beta.3: {} jiti@2.0.0-beta.3: {}
jiti@2.4.2: {}
js-tokens@4.0.0: {} js-tokens@4.0.0: {}
js-tokens@9.0.0: {} js-tokens@9.0.0: {}
...@@ -5818,6 +5926,8 @@ snapshots: ...@@ -5818,6 +5926,8 @@ snapshots:
mdn-data@2.0.30: {} mdn-data@2.0.30: {}
mdn-data@2.12.2: {}
meow@12.1.1: {} meow@12.1.1: {}
meow@13.2.0: {} meow@13.2.0: {}
...@@ -5889,8 +5999,6 @@ snapshots: ...@@ -5889,8 +5999,6 @@ snapshots:
vue: 3.5.13(typescript@5.6.2) vue: 3.5.13(typescript@5.6.2)
vueuc: 0.4.58(vue@3.5.13(typescript@5.6.2)) vueuc: 0.4.58(vue@3.5.13(typescript@5.6.2))
nanoid@3.3.7: {}
nanoid@3.3.8: {} nanoid@3.3.8: {}
nanoid@5.0.7: {} nanoid@5.0.7: {}
...@@ -6003,6 +6111,8 @@ snapshots: ...@@ -6003,6 +6111,8 @@ snapshots:
picomatch@2.3.1: {} picomatch@2.3.1: {}
picomatch@4.0.2: {}
pidtree@0.6.0: {} pidtree@0.6.0: {}
pinia@2.2.2(typescript@5.6.2)(vue@3.5.13(typescript@5.6.2)): pinia@2.2.2(typescript@5.6.2)(vue@3.5.13(typescript@5.6.2)):
...@@ -6023,20 +6133,24 @@ snapshots: ...@@ -6023,20 +6133,24 @@ snapshots:
dependencies: dependencies:
htmlparser2: 8.0.2 htmlparser2: 8.0.2
js-tokens: 9.0.0 js-tokens: 9.0.0
postcss: 8.4.47 postcss: 8.4.49
postcss-safe-parser: 6.0.0(postcss@8.4.47) postcss-safe-parser: 6.0.0(postcss@8.4.49)
postcss-media-query-parser@0.2.3: {} postcss-media-query-parser@0.2.3: {}
postcss-mobile-forever@5.0.0(postcss@8.4.47):
dependencies:
postcss: 8.4.47
postcss-resolve-nested-selector@0.1.6: {} postcss-resolve-nested-selector@0.1.6: {}
postcss-safe-parser@6.0.0(postcss@8.4.47): postcss-safe-parser@6.0.0(postcss@8.4.49):
dependencies: dependencies:
postcss: 8.4.47 postcss: 8.4.49
postcss-safe-parser@7.0.0(postcss@8.4.47): postcss-safe-parser@7.0.0(postcss@8.4.49):
dependencies: dependencies:
postcss: 8.4.47 postcss: 8.4.49
postcss-scss@4.0.9(postcss@8.4.47): postcss-scss@4.0.9(postcss@8.4.47):
dependencies: dependencies:
...@@ -6047,16 +6161,16 @@ snapshots: ...@@ -6047,16 +6161,16 @@ snapshots:
cssesc: 3.0.0 cssesc: 3.0.0
util-deprecate: 1.0.2 util-deprecate: 1.0.2
postcss-sorting@8.0.2(postcss@8.4.47): postcss-sorting@8.0.2(postcss@8.4.49):
dependencies: dependencies:
postcss: 8.4.47 postcss: 8.4.49
postcss-value-parser@4.2.0: {} postcss-value-parser@4.2.0: {}
postcss@8.4.47: postcss@8.4.47:
dependencies: dependencies:
nanoid: 3.3.7 nanoid: 3.3.8
picocolors: 1.1.0 picocolors: 1.1.1
source-map-js: 1.2.1 source-map-js: 1.2.1
postcss@8.4.49: postcss@8.4.49:
...@@ -6087,6 +6201,8 @@ snapshots: ...@@ -6087,6 +6201,8 @@ snapshots:
dependencies: dependencies:
side-channel: 1.1.0 side-channel: 1.1.0
quansync@0.2.10: {}
queue-microtask@1.2.3: {} queue-microtask@1.2.3: {}
readable-stream@2.3.8: readable-stream@2.3.8:
...@@ -6342,8 +6458,8 @@ snapshots: ...@@ -6342,8 +6458,8 @@ snapshots:
stylelint-order@6.0.4(stylelint@16.9.0(typescript@5.6.2)): stylelint-order@6.0.4(stylelint@16.9.0(typescript@5.6.2)):
dependencies: dependencies:
postcss: 8.4.47 postcss: 8.4.49
postcss-sorting: 8.0.2(postcss@8.4.47) postcss-sorting: 8.0.2(postcss@8.4.49)
stylelint: 16.9.0(typescript@5.6.2) stylelint: 16.9.0(typescript@5.6.2)
stylelint-scss@6.6.0(stylelint@16.9.0(typescript@5.6.2)): stylelint-scss@6.6.0(stylelint@16.9.0(typescript@5.6.2)):
...@@ -6386,9 +6502,9 @@ snapshots: ...@@ -6386,9 +6502,9 @@ snapshots:
micromatch: 4.0.8 micromatch: 4.0.8
normalize-path: 3.0.0 normalize-path: 3.0.0
picocolors: 1.1.0 picocolors: 1.1.0
postcss: 8.4.47 postcss: 8.4.49
postcss-resolve-nested-selector: 0.1.6 postcss-resolve-nested-selector: 0.1.6
postcss-safe-parser: 7.0.0(postcss@8.4.47) postcss-safe-parser: 7.0.0(postcss@8.4.49)
postcss-selector-parser: 6.1.2 postcss-selector-parser: 6.1.2
postcss-value-parser: 4.2.0 postcss-value-parser: 4.2.0
resolve-from: 5.0.0 resolve-from: 5.0.0
...@@ -6462,6 +6578,11 @@ snapshots: ...@@ -6462,6 +6578,11 @@ snapshots:
tinyexec@0.3.0: {} tinyexec@0.3.0: {}
tinyglobby@0.2.12:
dependencies:
fdir: 6.4.3(picomatch@4.0.2)
picomatch: 4.0.2
tinymce@7.7.1: {} tinymce@7.7.1: {}
to-fast-properties@2.0.0: {} to-fast-properties@2.0.0: {}
...@@ -6524,6 +6645,13 @@ snapshots: ...@@ -6524,6 +6645,13 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
unconfig@7.3.1:
dependencies:
'@quansync/fs': 0.1.2
defu: 6.1.4
jiti: 2.4.2
quansync: 0.2.10
undici-types@6.19.8: {} undici-types@6.19.8: {}
unicorn-magic@0.1.0: {} unicorn-magic@0.1.0: {}
...@@ -6680,7 +6808,7 @@ snapshots: ...@@ -6680,7 +6808,7 @@ snapshots:
vite@5.4.6(@types/node@20.16.5)(sass@1.79.1)(terser@5.39.0): vite@5.4.6(@types/node@20.16.5)(sass@1.79.1)(terser@5.39.0):
dependencies: dependencies:
esbuild: 0.21.5 esbuild: 0.21.5
postcss: 8.4.47 postcss: 8.4.49
rollup: 4.21.3 rollup: 4.21.3
optionalDependencies: optionalDependencies:
'@types/node': 20.16.5 '@types/node': 20.16.5
......
postcss.config.js
View file @ 1b5de751
export default { export default {
plugins: { plugins: {
'@unocss/postcss': {},
autoprefixer: {}, autoprefixer: {},
'postcss-mobile-forever': {
appSelector: '#app',
viewportWidth: 375,
desktopWidth: 500,
maxDisplayWidth: 500,
include: [/src\/views\/share\/share-application-mobile/, /src\/views\/share\/components\/mobile\//],
},
}, },
} }
src/views/share/components/mobile/continue-question.vue
View file @ 1b5de751
...@@ -64,7 +64,7 @@ function handleSelectContinueQuestion(continueQuestion: string) { ...@@ -64,7 +64,7 @@ function handleSelectContinueQuestion(continueQuestion: string) {
} }
</script> </script>
<template> <template>
<h3 class="mt-[15px] text-[12px] text-[#999]"> <h3 class="continue-question-title">
{{ {{
type === 'featured' type === 'featured'
? t('common_module.recommended_questions') + '：' ? t('common_module.recommended_questions') + '：'
...@@ -72,12 +72,12 @@ function handleSelectContinueQuestion(continueQuestion: string) { ...@@ -72,12 +72,12 @@ function handleSelectContinueQuestion(continueQuestion: string) {
}} }}
</h3> </h3>
<ul class="w-full select-none"> <ul class="continue-question-wrapper">
<template v-if="continuousQuestionList.length && promptChangeBtnStatus !== 'loading'"> <template v-if="continuousQuestionList.length && promptChangeBtnStatus !== 'loading'">
<li <li
v-for="questionItem in recommendQuestionList" v-for="questionItem in recommendQuestionList"
:key="questionItem.id" :key="questionItem.id"
class="mt-[10px] w-fit cursor-pointer rounded-[10px] border border-[#d4d6d9] bg-[#ffffff80] px-[12px] py-[10px] text-[12px] hover:opacity-80" class="question-item"
@click="handleSelectContinueQuestion(questionItem.content)" @click="handleSelectContinueQuestion(questionItem.content)"
> >
{{ questionItem.content }} {{ questionItem.content }}
...@@ -85,14 +85,14 @@ function handleSelectContinueQuestion(continueQuestion: string) { ...@@ -85,14 +85,14 @@ function handleSelectContinueQuestion(continueQuestion: string) {
</template> </template>
<template v-else> <template v-else>
<n-skeleton :class="'mt-[10px]'" height="41px" width="52%" round /> <n-skeleton class="question-item-skeleton" width="52%" round />
<n-skeleton :class="'mt-[10px]'" height="41px" width="72%" round /> <n-skeleton class="question-item-skeleton" width="72%" round />
<n-skeleton :class="'mt-[10px]'" height="41px" width="70%" round /> <n-skeleton class="question-item-skeleton" width="70%" round />
</template> </template>
<li class="mt-[10px] pl-[16px] text-[12px]"> <li class="recommend-question-change-wrapper">
<span <span
class="group cursor-pointer text-[#0B7DFF] transition" class="recommend-question-change-container"
:class="{ :class="{
'hover:text-[#096EE0]': promptChangeBtnStatus !== 'loading', 'hover:text-[#096EE0]': promptChangeBtnStatus !== 'loading',
'cursor-not-allowed': promptChangeBtnStatus === 'loading', 'cursor-not-allowed': promptChangeBtnStatus === 'loading',
...@@ -101,7 +101,7 @@ function handleSelectContinueQuestion(continueQuestion: string) { ...@@ -101,7 +101,7 @@ function handleSelectContinueQuestion(continueQuestion: string) {
@click="handleRecommendQuestionListUpdate" @click="handleRecommendQuestionListUpdate"
> >
<i <i
class="iconfont icon-huanyihuan mr-[2px] inline-block text-[11px] transition-[rotate] duration-150 ease-in-out" class="iconfont icon-huanyihuan recommend-question-change-icon"
:class="{ 'group-active:rotate-360': promptChangeBtnStatus !== 'loading' }" :class="{ 'group-active:rotate-360': promptChangeBtnStatus !== 'loading' }"
></i> ></i>
<span> <span>
...@@ -111,3 +111,33 @@ function handleSelectContinueQuestion(continueQuestion: string) { ...@@ -111,3 +111,33 @@ function handleSelectContinueQuestion(continueQuestion: string) {
</li> </li>
</ul> </ul>
</template> </template>
<style lang="scss" scoped>
.continue-question-title {
@apply mt-[15px] text-[12px] text-[#999];
}
.continue-question-wrapper {
@apply w-full select-none;
.question-item {
@apply mt-[10px] w-fit cursor-pointer rounded-[10px] border border-[#d4d6d9] bg-[#ffffff80] px-[12px] py-[10px] text-[12px] hover:opacity-80;
}
.question-item-skeleton {
@apply mt-[10px] h-[40px];
}
.recommend-question-change-wrapper {
@apply mt-[10px] pl-[16px] text-[12px];
.recommend-question-change-container {
@apply group cursor-pointer text-[#0B7DFF] transition;
.recommend-question-change-icon {
@apply mr-[2px] inline-block text-[11px] transition-[rotate] duration-150 ease-in-out;
}
}
}
}
</style>
src/views/share/components/mobile/footer-input.vue
View file @ 1b5de751
...@@ -457,8 +457,8 @@ defineExpose({ ...@@ -457,8 +457,8 @@ defineExpose({
</script> </script>
<template> <template>
<div class="my-[7px]"> <div class="footer-wrapper">
<div class="flex items-end gap-[10px]"> <div class="footer-main-container">
<n-upload <n-upload
:show-file-list="false" :show-file-list="false"
accept=".doc, .pdf, .docx, .txt, .md" accept=".doc, .pdf, .docx, .txt, .md"
...@@ -472,17 +472,17 @@ defineExpose({ ...@@ -472,17 +472,17 @@ defineExpose({
<template #trigger> <template #trigger>
<div <div
v-show="isEnableDocumentParse" v-show="isEnableDocumentParse"
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]" class="upload-file-btn"
:class=" :class="
isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]' isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]'
" "
@click="handleSelectFile(handleClick)" @click="handleSelectFile(handleClick)"
> >
<i class="iconfont icon-upload flex h-[16px] w-[16px] items-center justify-center" /> <i class="iconfont icon-upload" />
</div> </div>
</template> </template>
<span class="text-[12px]"> {{ t('common_module.dialogue_module.upload_file_limit') }} </span> <span class="btn-tip"> {{ t('common_module.dialogue_module.upload_file_limit') }} </span>
</n-popover> </n-popover>
</n-upload-trigger> </n-upload-trigger>
</n-upload> </n-upload>
...@@ -499,17 +499,17 @@ defineExpose({ ...@@ -499,17 +499,17 @@ defineExpose({
<template #trigger> <template #trigger>
<div <div
v-show="isEnableUploadImage" v-show="isEnableUploadImage"
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]" class="upload-image-btn"
:class=" :class="
isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]' isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]'
" "
@click="handleSelectImage(handleClick)" @click="handleSelectImage(handleClick)"
> >
<i class="iconfont icon-upload-image flex h-[16px] w-[16px] items-center justify-center" /> <i class="iconfont icon-upload-image" />
</div> </div>
</template> </template>
<span class="text-[12px]"> {{ t('common_module.dialogue_module.upload_image_limit') }} </span> <span class="btn-tip"> {{ t('common_module.dialogue_module.upload_image_limit') }} </span>
</n-popover> </n-popover>
</n-upload-trigger> </n-upload-trigger>
</n-upload> </n-upload>
...@@ -517,7 +517,7 @@ defineExpose({ ...@@ -517,7 +517,7 @@ defineExpose({
<n-popover trigger="hover"> <n-popover trigger="hover">
<template #trigger> <template #trigger>
<div <div
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]" class="clear-message-btn"
:class=" :class="
isAllowClearMessage isAllowClearMessage
? 'text-theme-color cursor-pointer hover:opacity-80' ? 'text-theme-color cursor-pointer hover:opacity-80'
...@@ -525,28 +525,25 @@ defineExpose({ ...@@ -525,28 +525,25 @@ defineExpose({
" "
@click="handleClearAllMessage" @click="handleClearAllMessage"
> >
<i class="iconfont icon-clear text-base leading-none" /> <i class="iconfont icon-clear" />
</div> </div>
</template> </template>
<span class="text-xs"> {{ t('common_module.dialogue_module.clear_message_popover_message') }}</span> <span class="btn-tip"> {{ t('common_module.dialogue_module.clear_message_popover_message') }}</span>
</n-popover> </n-popover>
<div class="flex flex-1 flex-col"> <div class="footer-content-container">
<div class="flex gap-[14px]"> <div class="upload-image-list-container">
<div <div
v-for="uploadImageItem in uploadImageList" v-for="uploadImageItem in uploadImageList"
:key="uploadImageItem.id" :key="uploadImageItem.id"
class="border-inactive-border-color relative mb-[6px] h-[48px] w-[48px] rounded-[10px] border bg-white" class="upload-image-item"
:class="{ 'border-[#F25744]!': uploadImageItem.status === UploadStatus.ERROR }" :class="{ 'upload-image-item-error': uploadImageItem.status === UploadStatus.ERROR }"
> >
<div <div class="close-btn" @click="handleRemoveUploadImage(uploadImageItem.id)">
class="absolute right-[-4px] top-[-4px] flex h-[16px] w-[16px] cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.55)] hover:opacity-80"
@click="handleRemoveUploadImage(uploadImageItem.id)"
>
<CloseSmall theme="outline" size="16" fill="#fff" /> <CloseSmall theme="outline" size="16" fill="#fff" />
</div> </div>
<div class="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px]"> <div class="upload-image-item-content">
<n-spin v-show="uploadImageItem.status === UploadStatus.UPLOADING" :size="20" /> <n-spin v-show="uploadImageItem.status === UploadStatus.UPLOADING" :size="20" />
<n-image <n-image
...@@ -554,24 +551,24 @@ defineExpose({ ...@@ -554,24 +551,24 @@ defineExpose({
object-fit="contain" object-fit="contain"
:src="uploadImageItem.url" :src="uploadImageItem.url"
preview-disabled preview-disabled
class="h-full w-full flex-shrink-0" class="upload-image"
/> />
</div> </div>
</div> </div>
</div> </div>
<ul v-show="uploadFileList.length > 0" class="mb-[6px] grid gap-[6px]"> <ul v-show="uploadFileList.length > 0" class="upload-file-list-container">
<li <li
v-for="uploadFileItem in uploadFileList" v-for="uploadFileItem in uploadFileList"
:key="uploadFileItem.id" :key="uploadFileItem.id"
class="group relative flex h-[42px] w-full items-center overflow-hidden rounded-[10px] border bg-white/70" class="upload-file-item"
:class="uploadFileItem.status === 'error' ? 'border-error-font-color' : 'border-transparent'" :class="uploadFileItem.status === 'error' ? 'border-error-font-color' : 'border-transparent'"
> >
<div class="flex w-full items-center justify-between"> <div class="upload-file-item-container">
<div class="flex w-full items-center overflow-hidden"> <div class="upload-file-item-content">
<img :src="uploadFileIcon(uploadFileItem.type!)" class="h-[24px] w-[24px]" /> <img :src="uploadFileIcon(uploadFileItem.type!)" class="upload-file-icon" />
<div class="mx-[8px] flex flex-1 flex-col overflow-hidden text-[12px]"> <div class="upload-file-name">
<n-ellipsis> <n-ellipsis>
{{ uploadFileItem.name }} {{ uploadFileItem.name }}
</n-ellipsis> </n-ellipsis>
...@@ -580,7 +577,7 @@ defineExpose({ ...@@ -580,7 +577,7 @@ defineExpose({
<n-progress <n-progress
v-show="!['finished', 'error'].includes(uploadFileItem.status)" v-show="!['finished', 'error'].includes(uploadFileItem.status)"
class="w-[calc(100%-78px)]! absolute bottom-0 left-[54px]" class="upload-file-item-progress"
type="line" type="line"
rail-color="#F3F3F3" rail-color="#F3F3F3"
:height="4" :height="4"
...@@ -596,8 +593,8 @@ defineExpose({ ...@@ -596,8 +593,8 @@ defineExpose({
<n-popover trigger="hover" placement="top-end" :show-arrow="false"> <n-popover trigger="hover" placement="top-end" :show-arrow="false">
<template #trigger> <template #trigger>
<i <i
class="iconfont icon-close cursor-pointer text-[14px] hover:opacity-80" class="iconfont icon-close close-upload-file-icon"
:class="uploadFileItem.status === 'error' ? 'text-error-font-color' : 'text-font-color'" :class="uploadFileItem.status === 'error' ? 'upload-file-error-icon' : 'upload-file-success-icon'"
@click="handleRemoveFile(uploadFileItem.id)" @click="handleRemoveFile(uploadFileItem.id)"
/> />
</template> </template>
...@@ -607,18 +604,18 @@ defineExpose({ ...@@ -607,18 +604,18 @@ defineExpose({
</div> </div>
</li> </li>
</ul> </ul>
<div class="relative flex-1"> <div class="footer-input-container">
<n-input <n-input
v-model:value="inputMessageContent" v-model:value="inputMessageContent"
type="textarea" type="textarea"
:autosize="{ minRows: 1, maxRows: 5 }" :autosize="{ minRows: 1, maxRows: 5 }"
:placeholder="inputPlaceholder" :placeholder="inputPlaceholder"
:disabled="!isLogin || isInputMessageDisabled" :disabled="!isLogin || isInputMessageDisabled"
class="question-textarea rounded-[20px]! shadow-[0_1px_#09122105,0_1px_1px_#09122105,0_3px_3px_#09122103,0_9px_9px_#09122103]! bg-[#F2F2F2]! min-h-[35px] pr-[50px]" class="question-textarea"
@keydown="handleInputMessageEnter" @keydown="handleInputMessageEnter"
/> />
<div <div
class="bg-px-send-png absolute bottom-[8px] right-[16px] h-[18px] w-[18px]" class="send-btn"
:class=" :class="
isSendBtnDisabled || isSendBtnDisabled ||
isAnswerResponseWait || isAnswerResponseWait ||
...@@ -632,22 +629,19 @@ defineExpose({ ...@@ -632,22 +629,19 @@ defineExpose({
@click="handleMessageSend()" @click="handleMessageSend()"
/> />
<div <div v-show="!isLogin" class="no-login-input-placeholder">
v-show="!isLogin" <span>{{ t('share_agent_module.please') }}</span>
class="absolute left-[12px] top-[8px] flex h-[19px] max-w-[calc(100%-60px)] items-center overflow-hidden text-[12px] leading-[19px] text-[#84868c]" <span class="to-login-text" @click="handleToLogin">
>
<span class="shrink-0">{{ t('share_agent_module.please') }}</span>
<span class="text-theme-color shrink-0 cursor-pointer px-[4px] hover:opacity-80" @click="handleToLogin">
{{ t('common_module.login') }} {{ t('common_module.login') }}
</span> </span>
<span class="shrink-0">{{ t('share_agent_module.after_action') }}</span> <span>{{ t('share_agent_module.after_action') }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-[9px]"> <div class="footer-tip-container">
<span class="flex w-full justify-center text-[12px] text-[#b8babf]"> <span class="tip-text">
{{ t('common_module.dialogue_module.generate_warning_message') }} {{ t('common_module.dialogue_module.generate_warning_message') }}
</span> </span>
</div> </div>
...@@ -655,15 +649,136 @@ defineExpose({ ...@@ -655,15 +649,136 @@ defineExpose({
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer-main-container {
@apply flex items-end gap-[10px];
.upload-file-btn,
.upload-image-btn,
.clear-message-btn {
@apply flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2] text-[12px];
i {
@apply flex h-[16px] w-[16px] items-center justify-center;
}
}
.footer-content-container {
@apply flex flex-1 flex-col;
.upload-image-list-container {
@apply flex gap-[14px];
.upload-image-item {
@apply border-inactive-border-color relative mb-[6px] h-[48px] w-[48px] rounded-[10px] border bg-white;
.close-btn {
@apply absolute right-[-4px] top-[-4px] flex h-[16px] w-[16px] cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.55)] hover:opacity-80;
}
&-content {
@apply flex h-full w-full items-center justify-center overflow-hidden rounded-[10px];
}
.upload-image {
@apply h-full w-full flex-shrink-0;
}
}
.upload-image-item-error {
@apply border-[#F25744]!;
}
}
.upload-file-list-container {
@apply mb-[6px] grid gap-[6px];
.upload-file-item {
@apply group relative flex h-[42px] w-full items-center overflow-hidden rounded-[10px] border bg-white/70;
&-container {
@apply flex w-full items-center justify-between;
.upload-file-item-content {
@apply flex w-full items-center overflow-hidden;
.upload-file-icon {
@apply h-[24px] w-[24px];
}
.upload-file-name {
@apply mx-[8px] flex flex-1 flex-col overflow-hidden text-[12px];
}
}
.upload-file-item-progress {
@apply w-[calc(100%-78px)]! absolute bottom-0 left-[54px];
}
.close-upload-file-icon {
@apply cursor-pointer text-[14px] hover:opacity-80;
}
.upload-file-error-icon {
@apply text-error-font-color;
}
.upload-file-success-icon {
@apply text-font-color;
}
}
}
}
.footer-input-container {
@apply relative flex-1;
.question-textarea {
@apply rounded-[20px]! shadow-[0_1px_#09122105,0_1px_1px_#09122105,0_3px_3px_#09122103,0_9px_9px_#09122103]! bg-[#F2F2F2]! pr-[38px];
}
.send-btn {
@apply bg-px-send-png absolute bottom-[9px] right-[16px] h-[18px] w-[18px];
}
.no-login-input-placeholder {
top: calc((100% - 12px) / 2);
@apply absolute left-[12px] flex max-w-[calc(100%-60px)] items-center overflow-hidden text-[12px] leading-none text-[#84868c];
span {
@apply shrink-0;
}
.to-login-text {
@apply text-theme-color cursor-pointer px-[4px] hover:opacity-80;
}
}
}
}
}
.footer-tip-container {
@apply mt-[7px];
.tip-text {
@apply flex w-full justify-center text-[11px] text-[#b8babf];
}
}
.btn-tip {
@apply text-[12px];
}
:deep(.question-textarea.n-input--textarea) { :deep(.question-textarea.n-input--textarea) {
--n-height: 35px !important;
--n-border: none !important; --n-border: none !important;
--n-border-focus: none !important; --n-border-focus: none !important;
--n-border-hover: none !important; --n-border-hover: none !important;
--n-box-shadow-focus: none !important; --n-box-shadow-focus: none !important;
--n-border-disabled: none !important; --n-border-disabled: none !important;
.n-input__textarea-el,
.n-input__placeholder { .n-input__placeholder {
font-size: 12px;
line-height: 24px; line-height: 24px;
} }
} }
......
src/views/share/components/mobile/message-item.vue
View file @ 1b5de751
...@@ -3,7 +3,7 @@ import { computed, ref, useTemplateRef } from 'vue' ...@@ -3,7 +3,7 @@ import { computed, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { CheckOne, Down } from '@icon-park/vue-next' import { CheckOne, Down } from '@icon-park/vue-next'
import CustomLoading from '../custom-loading.vue' import CustomLoading from '../custom-loading.vue'
import MusicWavesLoading from '../music-waves-loading.vue' import MusicWavesLoading from './music-waves-loading.vue'
import MarkdownRender from '@/components/markdown-render/markdown-render.vue' import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
import { PersonalAppConfigState } from '@/store/types/personal-app-config' import { PersonalAppConfigState } from '@/store/types/personal-app-config'
...@@ -67,19 +67,16 @@ function handleShowReasoningContentSwitch() { ...@@ -67,19 +67,16 @@ function handleShowReasoningContentSwitch() {
</script> </script>
<template> <template>
<div <div class="message-item-wrapper" :class="[role === 'assistant' ? 'justify-end' : 'justify-start']">
class="mb-[15px] flex flex-row-reverse last:mb-0" <div class="message-item-container" :class="[role === 'user' ? 'items-end' : 'items-start']">
:class="[role === 'assistant' ? 'justify-end' : 'justify-start']"
>
<div class="flex w-full flex-col overflow-x-auto" :class="[role === 'user' ? 'items-end' : 'items-start']">
<!-- 大模型深度思考 --> <!-- 大模型深度思考 -->
<template v-if="role === 'assistant' && isDeepSeekR1"> <template v-if="role === 'assistant' && isDeepSeekR1">
<div class="my-[7px] select-none text-[12px]"> <div class="deep-seek-title-container">
<div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch"> <div class="deep-seek-name-container" @click="handleShowReasoningContentSwitch">
<span v-if="messageItem.isTextContentLoading" class="mr-[6px]"> <span v-if="messageItem.isTextContentLoading" class="deep-seek-text">
{{ t('common_module.deep_thinking', { modelName: agentApplicationConfig.commModelConfig.largeModel }) }} {{ t('common_module.deep_thinking', { modelName: agentApplicationConfig.commModelConfig.largeModel }) }}
</span> </span>
<span v-else class="mr-[6px]"> <span v-else class="deep-seek-text">
{{ t('common_module.have_thought_deeply') }} {{ t('common_module.have_thought_deeply') }}
</span> </span>
<Down <Down
...@@ -94,10 +91,7 @@ function handleShowReasoningContentSwitch() { ...@@ -94,10 +91,7 @@ function handleShowReasoningContentSwitch() {
</div> </div>
<n-collapse-transition :show="isShowReasoningContent"> <n-collapse-transition :show="isShowReasoningContent">
<div <div v-if="messageItem.reasoningContent" class="deep-seek-content-container">
v-if="messageItem.reasoningContent"
class="my-[10px] border-l-[1px] border-solid border-l-[#ccc] px-[13px] py-[8px]"
>
<MarkdownRender <MarkdownRender
ref="markdownRenderRef" ref="markdownRenderRef"
:raw-text-content=" :raw-text-content="
...@@ -106,38 +100,28 @@ function handleShowReasoningContentSwitch() { ...@@ -106,38 +100,28 @@ function handleShowReasoningContentSwitch() {
: t('common_module.dialogue_module.empty_message_content') : t('common_module.dialogue_module.empty_message_content')
" "
color="#999" color="#999"
:font-size="'12px'" :font-size="'3.2vw'"
/> />
</div> </div>
</n-collapse-transition> </n-collapse-transition>
</template> </template>
<!-- 模型内容 --> <!-- 模型内容 -->
<div class="flex min-w-[80px] max-w-full flex-col"> <div class="model-content-wrapper">
<div <div
class="w-full flex-wrap rounded-[10px] border px-[12px] py-[11px]" class="model-content-container"
:class="[ :class="[
{ 'rounded-tr-none border-[#DCDEFF] bg-[#DCDEFF] text-white': role === 'user' }, { 'user-model-content-container': role === 'user' },
{ 'rounded-tl-none border-[#e8e9eb] bg-white text-[#333]': role === 'assistant' }, { 'assistant-model-content-container': role === 'assistant' },
]" ]"
> >
<img <img v-show="role === 'user' && messageItem.imageUrl" :src="messageItem.imageUrl" class="upload-image" />
v-show="role === 'user' && messageItem.imageUrl"
:src="messageItem.imageUrl" <div v-show="role === 'assistant' && messageItem.pluginName" class="plugin-container">
class="max-h-[120px]! mb-[11px] rounded-[10px] object-contain" <div v-show="messageItem.isTextContentLoading" class="plugin-loading" />
/> <CheckOne v-show="!messageItem.isTextContentLoading" theme="outline" size="16" fill="#40bd23" />
<div
v-show="role === 'assistant' && messageItem.pluginName"
class="mb-[8px] flex items-center gap-[5px] font-['Microsoft_YaHei_UI'] text-[#999]"
>
<div
v-show="messageItem.isTextContentLoading"
class="bg-px-plugin_loading-gif h-[14px] w-[14px] bg-contain bg-center bg-no-repeat"
/>
<CheckOne v-show="!messageItem.isTextContentLoading" theme="outline" :class="'14'" fill="#40bd23" />
<span class="text-[12px] leading-5"> <span class="plugin-name">
{{ {{
messageItem.isTextContentLoading messageItem.isTextContentLoading
? t('common_module.plugin_in_progress', { pluginName: messageItem.pluginName }) ? t('common_module.plugin_in_progress', { pluginName: messageItem.pluginName })
...@@ -146,7 +130,7 @@ function handleShowReasoningContentSwitch() { ...@@ -146,7 +130,7 @@ function handleShowReasoningContentSwitch() {
</span> </span>
</div> </div>
<div v-if="messageItem.isTextContentLoading" class="py-[6px] pl-[16px]"> <div v-if="messageItem.isTextContentLoading" class="content-loading">
<CustomLoading :active-color="'#000DFF'" /> <CustomLoading :active-color="'#000DFF'" />
</div> </div>
...@@ -160,22 +144,19 @@ function handleShowReasoningContentSwitch() { ...@@ -160,22 +144,19 @@ function handleShowReasoningContentSwitch() {
: messageItem.textContent : messageItem.textContent
" "
:color="'#333'" :color="'#333'"
:font-size="'12px'" :font-size="'3.2vw'"
/> />
</p> </p>
<div <div v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading" class="answer-response-loading">
v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading"
class="mb-[5px] mt-[16px] px-[16px]"
>
<CustomLoading :active-color="'#000DFF'" /> <CustomLoading :active-color="'#000DFF'" />
</div> </div>
</div> </div>
<!-- 移动端语音播放 --> <!-- 移动端语音播放 -->
<div v-show="isShowAudioControl" class="mt-[13px] flex items-center gap-[8px]"> <div v-show="isShowAudioControl" class="audio-control-container">
<div <div
class="h-[18px] w-[18px] cursor-pointer" class="audio-control-icon"
:class="messageItem.isVoicePlaying ? 'bg-svg-pause' : 'bg-svg-play'" :class="messageItem.isVoicePlaying ? 'bg-svg-pause' : 'bg-svg-play'"
@click="handleAudioControl" @click="handleAudioControl"
/> />
...@@ -184,7 +165,7 @@ function handleShowReasoningContentSwitch() { ...@@ -184,7 +165,7 @@ function handleShowReasoningContentSwitch() {
<n-popover style="max-width: 310px"> <n-popover style="max-width: 310px">
<template #trigger> <template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span> <span v-show="!isPlayableAudio"> {{ t('common_module.unplayable') }} </span>
</template> </template>
{{ t('common_module.unplayable_tip') }} {{ t('common_module.unplayable_tip') }}
</n-popover> </n-popover>
...@@ -194,3 +175,77 @@ function handleShowReasoningContentSwitch() { ...@@ -194,3 +175,77 @@ function handleShowReasoningContentSwitch() {
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.message-item-wrapper {
@apply mb-[15px] flex flex-row-reverse last:mb-0;
.message-item-container {
@apply flex w-full flex-col overflow-x-auto;
.deep-seek-title-container {
@apply my-[7px] select-none text-[12px];
.deep-seek-name-container {
@apply inline-flex cursor-pointer;
.deep-seek-text {
@apply mr-[6px];
}
}
}
.deep-seek-content-container {
@apply my-[10px] border-l-[1px] border-solid border-l-[#ccc] px-[13px] py-[8px];
}
.model-content-wrapper {
@apply flex min-w-[80px] max-w-full flex-col;
.model-content-container {
@apply w-full flex-wrap rounded-[10px] border px-[12px] py-[11px];
.upload-image {
@apply max-h-[120px]! mb-[10px] rounded-[10px] object-contain;
}
.plugin-container {
@apply mb-[8px] flex items-center gap-[5px] font-['Microsoft_YaHei_UI'] text-[#999];
.plugin-loading {
@apply bg-px-plugin_loading-gif h-[14px] w-[14px] bg-contain bg-center bg-no-repeat;
}
.plugin-name {
@apply text-[12px] leading-4;
}
}
.content-loading {
@apply py-[6px] pl-[16px];
}
.answer-response-loading {
@apply mb-[5px] mt-[16px] px-[16px];
}
.audio-control-container {
@apply mt-[11px] flex items-center gap-[8px] text-[12px];
.audio-control-icon {
@apply h-[16px] w-[16px] cursor-pointer;
}
}
}
.user-model-content-container {
@apply rounded-tr-none border-[#DCDEFF] bg-[#DCDEFF] text-white;
}
.assistant-model-content-container {
@apply rounded-tl-none border-[#e8e9eb] bg-white text-[#333];
}
}
}
}
</style>
src/views/share/components/mobile/message-list.vue
View file @ 1b5de751
...@@ -60,7 +60,7 @@ function handleScrollToBottom() { ...@@ -60,7 +60,7 @@ function handleScrollToBottom() {
</script> </script>
<template> <template>
<main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-[20px]" @scroll="throttleScrollContainer"> <main ref="scrollRef" class="message-list-container" @scroll="throttleScrollContainer">
<div> <div>
<MessageItem <MessageItem
v-for="[key, messageItem] in messageList" v-for="[key, messageItem] in messageList"
...@@ -73,7 +73,7 @@ function handleScrollToBottom() { ...@@ -73,7 +73,7 @@ function handleScrollToBottom() {
/> />
</div> </div>
<p v-show="isAnswerResponseLoading" class="my-[7px] ml-[4px] text-[12px] text-[#84868c]"> <p v-show="isAnswerResponseLoading" class="answer-response-loading-text">
{{ t('common_module.dialogue_module.do_not_exit_page') }} {{ t('common_module.dialogue_module.do_not_exit_page') }}
</p> </p>
...@@ -81,12 +81,26 @@ function handleScrollToBottom() { ...@@ -81,12 +81,26 @@ function handleScrollToBottom() {
<ContinueQuestion v-model:continuous-question-list="continuousQuestionList" :type="'continuous'" /> <ContinueQuestion v-model:continuous-question-list="continuousQuestionList" :type="'continuous'" />
</div> </div>
<div <div v-show="visible" class="back-bottom-btn" @click.stop="clickBackBottom">
v-show="visible" <i class="iconfont icon-left back-bottom-btn-icon" />
class="flex-center hover:text-theme-color absolute bottom-[20px] right-[20px] h-[24px] w-[24px] cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
@click.stop="clickBackBottom"
>
<i class="iconfont icon-left rotate-270 text-[14px]" />
</div> </div>
</main> </main>
</template> </template>
<style lang="scss" scoped>
.message-list-container {
@apply h-full overflow-y-auto overflow-x-hidden px-[20px];
.answer-response-loading-text {
@apply my-[7px] ml-[4px] text-[12px] text-[#84868c];
}
.back-bottom-btn {
@apply flex-center hover:text-theme-color absolute bottom-[20px] right-[20px] h-[24px] w-[24px] cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed];
&-icon {
@apply rotate-270 text-[14px];
}
}
}
</style>
src/views/share/components/mobile/music-waves-loading.vue 0 → 100644
View file @ 1b5de751
<script setup lang="ts">
interface Props {
barBgColor?: string
height?: string
}
withDefaults(defineProps<Props>(), {
barBgColor: '#363636',
height: '12px',
})
</script>
<template>
<div class="music">
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
<div class="bar" />
</div>
</template>
<style lang="scss" scoped>
.music {
display: flex;
align-items: center;
justify-content: space-between;
width: 42px;
height: v-bind(height);
.bar {
width: 2px;
/* stylelint-disable-next-line value-keyword-case */
background: v-bind(barBgColor);
border-radius: 50px;
animation: loader 1.5s ease-in-out infinite;
&:nth-child(1) {
/* background: purple; */
animation-delay: 1s;
}
&:nth-child(2) {
/* background: crimson; */
animation-delay: 0.8s;
}
&:nth-child(3) {
/* background: deeppink; */
animation-delay: 0.6s;
}
&:nth-child(4) {
/* background: orange; */
animation-delay: 0.4s;
}
&:nth-child(5) {
/* background: gold; */
animation-delay: 0.2s;
}
&:nth-child(6) {
/* background: gold; */
animation-delay: 0.2s;
}
&:nth-child(7) {
/* background: gold; */
animation-delay: 0.4s;
}
&:nth-child(8) {
/* background: deeppink; */
animation-delay: 0.6s;
}
&:nth-child(9) {
/* background: crimson; */
animation-delay: 0.8s;
}
&:nth-child(10) {
/* background: purple; */
animation-delay: 1s;
}
}
}
@keyframes loader {
0% {
height: 4px;
}
50% {
height: v-bind(height);
}
100% {
height: 4px;
}
}
</style>
src/views/share/components/mobile/page-header.vue
View file @ 1b5de751
...@@ -54,10 +54,10 @@ function handleToLogout() { ...@@ -54,10 +54,10 @@ function handleToLogout() {
</script> </script>
<template> <template>
<header class="flex h-[58px] w-full items-center justify-between px-[20px]"> <header class="page-header-wrapper">
<div> <div>
<div v-show="isEnableVoice" class="flex items-center gap-[8px]"> <div v-show="isEnableVoice" class="enable-voice-container">
<span class="text-[12px]">{{ t('common_module.voice_auto_play') }}</span> <span class="auto-play">{{ t('common_module.voice_auto_play') }}</span>
<n-switch <n-switch
v-model:value="answerAudioAutoPlay" v-model:value="answerAudioAutoPlay"
size="small" size="small"
...@@ -67,34 +67,63 @@ function handleToLogout() { ...@@ -67,34 +67,63 @@ function handleToLogout() {
<template #checked> {{ t('common_module.open') }} </template> <template #checked> {{ t('common_module.open') }} </template>
<template #unchecked> {{ t('common_module.close') }} </template> <template #unchecked> {{ t('common_module.close') }} </template>
<template #checked-icon> <template #checked-icon>
<div class="bg-theme-color h-full w-full rounded-full"></div> <div class="checked-icon"></div>
</template> </template>
</n-switch> </n-switch>
</div> </div>
</div> </div>
<div class="flex-center gap-[10px]"> <div class="page-header-right-container">
<NButton <NButton
v-show="isLogin" v-show="isLogin"
type="primary" type="primary"
color="#EBECFF" color="#EBECFF"
class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!" class="create-agent-btn"
@click="handleToCreateApplication" @click="handleToCreateApplication"
> >
{{ t('common_module.create_agent_btn_text') }} {{ t('common_module.create_agent_btn_text') }}
</NButton> </NButton>
<NButton <NButton v-show="!isLogin" color="#EBECFF" class="login-btn" @click="handleToLogin">
v-show="!isLogin"
color="#EBECFF"
class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!"
@click="handleToLogin"
>
{{ t('common_module.login_now') }} {{ t('common_module.login_now') }}
</NButton> </NButton>
<div v-show="isLogin" class="flex-center h-[28px] w-[28px] rounded-[5px] bg-[#EBECFF]"> <div v-show="isLogin" class="logout-btn">
<Logout theme="outline" size="15" fill="#000DFF" :stroke-width="4" @click="handleToLogout" /> <Logout theme="outline" size="15" fill="#000DFF" :stroke-width="4" @click="handleToLogout" />
</div> </div>
</div> </div>
</header> </header>
</template> </template>
<style lang="scss" scoped>
.page-header-wrapper {
@apply flex h-[58px] w-full items-center justify-between px-[20px];
.enable-voice-container {
@apply flex items-center gap-[8px];
.auto-play {
@apply text-[12px];
}
.checked-icon {
@apply bg-theme-color h-full w-full rounded-full;
}
}
.page-header-right-container {
@apply flex-center gap-[10px];
.create-agent-btn {
@apply rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!;
}
.login-btn {
@apply rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!;
}
.logout-btn {
@apply flex-center h-[28px] w-[28px] rounded-[5px] bg-[#EBECFF];
}
}
}
</style>
src/views/share/components/mobile/preamble.vue
View file @ 1b5de751
...@@ -20,21 +20,18 @@ const agentAvatar = computed(() => { ...@@ -20,21 +20,18 @@ const agentAvatar = computed(() => {
</script> </script>
<template> <template>
<div class="flex w-full flex-1 flex-col px-[20px]"> <div class="preamble-wrapper">
<div class="mb-[7.5px] mt-[25px] flex w-full justify-center"> <div class="avatar-container">
<img :src="agentAvatar" class="rounded-theme h-[40px] w-[40px] object-cover" /> <img :src="agentAvatar" class="agent-avatar" />
</div> </div>
<div class="flex flex-col items-center justify-center"> <div class="preamble-container">
<p class="font-family-medium mb-[17px] line-clamp-1 text-[13px] text-[#333]"> <p class="agent-title">
{{ agentApplicationConfig.baseInfo.agentTitle }} {{ agentApplicationConfig.baseInfo.agentTitle }}
</p> </p>
<div class="flex w-full flex-col items-start justify-center"> <div class="flex w-full flex-col items-start justify-center">
<p <p v-show="agentApplicationConfig.commConfig.preamble" class="preamble">
v-show="agentApplicationConfig.commConfig.preamble"
class="mb-0 select-none break-all rounded-[10px] rounded-tl-none bg-[#DCDEFF] px-[12.5px] py-[11px] text-[12px]"
>
{{ agentApplicationConfig.commConfig.preamble }} {{ agentApplicationConfig.commConfig.preamble }}
</p> </p>
...@@ -46,3 +43,29 @@ const agentAvatar = computed(() => { ...@@ -46,3 +43,29 @@ const agentAvatar = computed(() => {
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.preamble-wrapper {
@apply flex w-full flex-col px-[20px];
.avatar-container {
@apply mb-[7.5px] mt-[25px] flex w-full justify-center;
.agent-avatar {
@apply rounded-theme h-[40px] w-[40px] object-cover;
}
}
.preamble-container {
@apply flex flex-col items-center justify-center;
.agent-title {
@apply font-family-medium mb-[17px] line-clamp-1 text-[13px] text-[#333];
}
.preamble {
@apply select-none break-all rounded-[10px] rounded-tl-none bg-[#DCDEFF] px-[12.5px] py-[11px] text-[12px];
}
}
}
</style>
src/views/share/share-application-mobile.vue
View file @ 1b5de751
...@@ -379,7 +379,7 @@ function handleToLogoutPage() { ...@@ -379,7 +379,7 @@ function handleToLogoutPage() {
</script> </script>
<template> <template>
<div v-loading="fullScreenLoading" class="bg-px-share-h5_bg-png h-full w-full bg-cover bg-no-repeat"> <div v-loading="fullScreenLoading" class="share-mobile-container">
<PageHeader <PageHeader
v-model:is-enable-voice="isEnableVoice" v-model:is-enable-voice="isEnableVoice"
v-model:answer-audio-auto-play="answerAudioAutoPlay" v-model:answer-audio-auto-play="answerAudioAutoPlay"
...@@ -390,7 +390,7 @@ function handleToLogoutPage() { ...@@ -390,7 +390,7 @@ function handleToLogoutPage() {
@update-auto-playing="handleUpdateAutoPlaying" @update-auto-playing="handleUpdateAutoPlaying"
/> />
<div class="flex h-[calc(100%-58px)] w-full flex-col"> <div class="main-container">
<div v-if="messageList.size === 0" class="w-full flex-1 overflow-auto"> <div v-if="messageList.size === 0" class="w-full flex-1 overflow-auto">
<Preamble :agent-application-config="agentApplicationConfig" /> <Preamble :agent-application-config="agentApplicationConfig" />
</div> </div>
...@@ -406,14 +406,13 @@ function handleToLogoutPage() { ...@@ -406,14 +406,13 @@ function handleToLogoutPage() {
:is-answer-response-loading="isAnswerResponseLoading" :is-answer-response-loading="isAnswerResponseLoading"
:create-continue-questions-exception="createContinueQuestionsException" :create-continue-questions-exception="createContinueQuestionsException"
:is-answer-response-interrupt="isAnswerResponseInterrupt" :is-answer-response-interrupt="isAnswerResponseInterrupt"
class="pt-[20px]"
@audio-play="handleAudioPlay" @audio-play="handleAudioPlay"
@audio-pause="handleAudioPause" @audio-pause="handleAudioPause"
/> />
</div> </div>
</div> </div>
<div class="footer-operation bg-white px-[16px]"> <div class="footer-container">
<FooterInput <FooterInput
ref="footerInputRef" ref="footerInputRef"
v-model:is-answer-response-loading="isAnswerResponseLoading" v-model:is-answer-response-loading="isAnswerResponseLoading"
...@@ -445,9 +444,19 @@ function handleToLogoutPage() { ...@@ -445,9 +444,19 @@ function handleToLogoutPage() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer-operation { .share-mobile-container {
padding-bottom: constant(safe-area-inset-bottom); @apply bg-px-share-h5_bg-png h-full w-full bg-cover bg-no-repeat;
padding-bottom: env(safe-area-inset-bottom);
.main-container {
@apply flex h-[calc(100%-58px)] w-full flex-col;
}
.footer-container {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
@apply bg-white px-[10px] py-[7px];
}
} }
@include custom-scrollbar(4px); @include custom-scrollbar(4px);
......
uno.config.ts
View file @ 1b5de751
import { defineConfig } from 'unocss' import { defineConfig, transformerDirectives, presetUno } from 'unocss'
export default defineConfig({ export default defineConfig({
rules: [ rules: [
...@@ -87,4 +87,6 @@ export default defineConfig({ ...@@ -87,4 +87,6 @@ export default defineConfig({
shortcuts: { shortcuts: {
'flex-center': 'flex items-center justify-center', 'flex-center': 'flex items-center justify-center',
}, },
presets: [presetUno()],
transformers: [transformerDirectives()],
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment