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 @@
"@types/validator": "^13.12.2",
"@typescript-eslint/parser": "^7.18.0",
"@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-jsx": "^4.0.1",
"autoprefixer": "^10.4.20",
......@@ -78,6 +80,7 @@
"naive-ui": "^2.39.0",
"postcss": "^8.4.47",
"postcss-html": "^1.7.0",
"postcss-mobile-forever": "^5.0.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"rollup-plugin-visualizer": "^5.12.0",
......
pnpm-lock.yaml
View file @ 1b5de751
......@@ -147,6 +147,12 @@ importers:
'@unocss/eslint-config':
specifier: ^0.61.9
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':
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))
......@@ -189,6 +195,9 @@ importers:
postcss-html:
specifier: ^1.7.0
version: 1.7.0
postcss-mobile-forever:
specifier: ^5.0.0
version: 5.0.0(postcss@8.4.47)
prettier:
specifier: ^3.3.3
version: 3.3.3
......@@ -962,6 +971,10 @@ packages:
'@polka/url@1.0.0-next.25':
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':
resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
engines: {node: '>=14.0.0'}
......@@ -1175,9 +1188,16 @@ packages:
resolution: {integrity: sha512-ATvZEFMQiW3/oUaaplVMBYuagEELtnLbHSYH4pUGbJ5MALAfV98mZRyk4FkKkYoMYqWLGdCylzpgMPFDOuFQlQ==}
engines: {node: '>=14'}
'@unocss/config@66.1.0-beta.10':
resolution: {integrity: sha512-+qx4zlVA9f1cCifoVXYmiHTI1y1rIxHgpiUdb0pI8OOdFsK6j0adua/hSdlvroXAoj2MNdE8WVEEv3L6MlDOpg==}
engines: {node: '>=14'}
'@unocss/core@0.61.9':
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':
resolution: {integrity: sha512-TYjrfSLkRZSRBBcdKWKuZafB9XuFHqI/P/AVI5Vwqvbdq3uc/eQpRXgnYoX1jM0ds1jzOigWRWiYkJx7KhxSnw==}
engines: {node: '>=14'}
......@@ -1198,6 +1218,12 @@ packages:
peerDependencies:
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':
resolution: {integrity: sha512-AHlEF7PiIBz1jHZZ62+AZ1u5ITrPNL/mgN8XyKwocoAr9HH8aQ3xzUgIuEX6vfV4a8rTdawffY99BQ12msePWQ==}
......@@ -1229,6 +1255,10 @@ packages:
resolution: {integrity: sha512-54Hw0nF+3ga70ETo3kes4He62wdsB4dHMgEiD/DEmJzyVY3ZuG/sIVAgkxjMQDo5w4SSYU/Ys1QaY+IQmeJHFQ==}
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':
resolution: {integrity: sha512-a9/vdg7YTFZEnJSaJBh/GqkLokYh3ZjEd3gHUxl/TZDSkGOz3WnkR2h+lgaLZm9MJ7RlSvJxYP8ySezH7jU1Pw==}
......@@ -1244,6 +1274,9 @@ packages:
'@unocss/transformer-directives@0.61.9':
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':
resolution: {integrity: sha512-iewADYlY0LoeCb80E/4feHVSCKHl+QzGH4xUvW0zU85evMqNOa0/t0dCIoEG22wr/9piyEsg6OdHprZ2QliYqg==}
......@@ -1661,6 +1694,10 @@ packages:
resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
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:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
......@@ -1949,6 +1986,14 @@ packages:
fastq@1.17.1:
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:
resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
engines: {node: '>=16.0.0'}
......@@ -2280,6 +2325,10 @@ packages:
resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
hasBin: true
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
......@@ -2467,6 +2516,9 @@ packages:
mdn-data@2.0.30:
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
mdn-data@2.12.2:
resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
meow@12.1.1:
resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
engines: {node: '>=16.10'}
......@@ -2533,11 +2585,6 @@ packages:
peerDependencies:
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:
resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
......@@ -2671,6 +2718,10 @@ packages:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
picomatch@4.0.2:
resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
engines: {node: '>=12'}
pidtree@0.6.0:
resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
engines: {node: '>=0.10'}
......@@ -2698,6 +2749,11 @@ packages:
postcss-media-query-parser@0.2.3:
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:
resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
......@@ -2821,6 +2877,9 @@ packages:
resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
engines: {node: '>=0.6'}
quansync@0.2.10:
resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
......@@ -3144,6 +3203,10 @@ packages:
tinyexec@0.3.0:
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:
resolution: {integrity: sha512-rMetqSgZtYbj4YPOX+gYgmlhy/sIjVlI/qlrSOul/Mpn9e0aIIG/fR0qvQSVYvxFv6OzRTge++NQyTbzLJK1NA==}
......@@ -3219,6 +3282,9 @@ packages:
unconfig@0.5.5:
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:
resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
......@@ -4197,6 +4263,10 @@ snapshots:
'@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)':
dependencies:
'@types/estree': 1.0.5
......@@ -4403,8 +4473,15 @@ snapshots:
transitivePeerDependencies:
- 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@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)':
dependencies:
'@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:
transitivePeerDependencies:
- 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':
dependencies:
'@unocss/core': 0.61.9
......@@ -4500,6 +4586,11 @@ snapshots:
'@unocss/core': 0.61.9
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/transformer-attributify-jsx-babel@0.61.9':
......@@ -4525,6 +4616,12 @@ snapshots:
'@unocss/rule-utils': 0.61.9
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':
dependencies:
'@unocss/core': 0.61.9
......@@ -4655,8 +4752,8 @@ snapshots:
'@vue/compiler-ssr': 3.5.6
'@vue/shared': 3.5.6
estree-walker: 2.0.2
magic-string: 0.30.11
postcss: 8.4.47
magic-string: 0.30.17
postcss: 8.4.49
source-map-js: 1.2.1
'@vue/compiler-ssr@3.5.13':
......@@ -5032,6 +5129,11 @@ snapshots:
mdn-data: 2.0.30
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: {}
cssesc@3.0.0: {}
......@@ -5360,6 +5462,10 @@ snapshots:
dependencies:
reusify: 1.0.4
fdir@6.4.3(picomatch@4.0.2):
optionalDependencies:
picomatch: 4.0.2
file-entry-cache@8.0.0:
dependencies:
flat-cache: 4.0.1
......@@ -5643,6 +5749,8 @@ snapshots:
jiti@2.0.0-beta.3: {}
jiti@2.4.2: {}
js-tokens@4.0.0: {}
js-tokens@9.0.0: {}
......@@ -5818,6 +5926,8 @@ snapshots:
mdn-data@2.0.30: {}
mdn-data@2.12.2: {}
meow@12.1.1: {}
meow@13.2.0: {}
......@@ -5889,8 +5999,6 @@ snapshots:
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@5.0.7: {}
......@@ -6003,6 +6111,8 @@ snapshots:
picomatch@2.3.1: {}
picomatch@4.0.2: {}
pidtree@0.6.0: {}
pinia@2.2.2(typescript@5.6.2)(vue@3.5.13(typescript@5.6.2)):
......@@ -6023,20 +6133,24 @@ snapshots:
dependencies:
htmlparser2: 8.0.2
js-tokens: 9.0.0
postcss: 8.4.47
postcss-safe-parser: 6.0.0(postcss@8.4.47)
postcss: 8.4.49
postcss-safe-parser: 6.0.0(postcss@8.4.49)
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-safe-parser@6.0.0(postcss@8.4.47):
postcss-safe-parser@6.0.0(postcss@8.4.49):
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:
postcss: 8.4.47
postcss: 8.4.49
postcss-scss@4.0.9(postcss@8.4.47):
dependencies:
......@@ -6047,16 +6161,16 @@ snapshots:
cssesc: 3.0.0
util-deprecate: 1.0.2
postcss-sorting@8.0.2(postcss@8.4.47):
postcss-sorting@8.0.2(postcss@8.4.49):
dependencies:
postcss: 8.4.47
postcss: 8.4.49
postcss-value-parser@4.2.0: {}
postcss@8.4.47:
dependencies:
nanoid: 3.3.7
picocolors: 1.1.0
nanoid: 3.3.8
picocolors: 1.1.1
source-map-js: 1.2.1
postcss@8.4.49:
......@@ -6087,6 +6201,8 @@ snapshots:
dependencies:
side-channel: 1.1.0
quansync@0.2.10: {}
queue-microtask@1.2.3: {}
readable-stream@2.3.8:
......@@ -6342,8 +6458,8 @@ snapshots:
stylelint-order@6.0.4(stylelint@16.9.0(typescript@5.6.2)):
dependencies:
postcss: 8.4.47
postcss-sorting: 8.0.2(postcss@8.4.47)
postcss: 8.4.49
postcss-sorting: 8.0.2(postcss@8.4.49)
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:
micromatch: 4.0.8
normalize-path: 3.0.0
picocolors: 1.1.0
postcss: 8.4.47
postcss: 8.4.49
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-value-parser: 4.2.0
resolve-from: 5.0.0
......@@ -6462,6 +6578,11 @@ snapshots:
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: {}
to-fast-properties@2.0.0: {}
......@@ -6524,6 +6645,13 @@ snapshots:
transitivePeerDependencies:
- 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: {}
unicorn-magic@0.1.0: {}
......@@ -6680,7 +6808,7 @@ snapshots:
vite@5.4.6(@types/node@20.16.5)(sass@1.79.1)(terser@5.39.0):
dependencies:
esbuild: 0.21.5
postcss: 8.4.47
postcss: 8.4.49
rollup: 4.21.3
optionalDependencies:
'@types/node': 20.16.5
......
postcss.config.js
View file @ 1b5de751
export default {
plugins: {
'@unocss/postcss': {},
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) {
}
</script>
<template>
<h3 class="mt-[15px] text-[12px] text-[#999]">
<h3 class="continue-question-title">
{{
type === 'featured'
? t('common_module.recommended_questions') + '：'
......@@ -72,12 +72,12 @@ function handleSelectContinueQuestion(continueQuestion: string) {
}}
</h3>
<ul class="w-full select-none">
<ul class="continue-question-wrapper">
<template v-if="continuousQuestionList.length && promptChangeBtnStatus !== 'loading'">
<li
v-for="questionItem in recommendQuestionList"
: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)"
>
{{ questionItem.content }}
......@@ -85,14 +85,14 @@ function handleSelectContinueQuestion(continueQuestion: string) {
</template>
<template v-else>
<n-skeleton :class="'mt-[10px]'" height="41px" width="52%" round />
<n-skeleton :class="'mt-[10px]'" height="41px" width="72%" round />
<n-skeleton :class="'mt-[10px]'" height="41px" width="70%" round />
<n-skeleton class="question-item-skeleton" width="52%" round />
<n-skeleton class="question-item-skeleton" width="72%" round />
<n-skeleton class="question-item-skeleton" width="70%" round />
</template>
<li class="mt-[10px] pl-[16px] text-[12px]">
<li class="recommend-question-change-wrapper">
<span
class="group cursor-pointer text-[#0B7DFF] transition"
class="recommend-question-change-container"
:class="{
'hover:text-[#096EE0]': promptChangeBtnStatus !== 'loading',
'cursor-not-allowed': promptChangeBtnStatus === 'loading',
......@@ -101,7 +101,7 @@ function handleSelectContinueQuestion(continueQuestion: string) {
@click="handleRecommendQuestionListUpdate"
>
<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' }"
></i>
<span>
......@@ -111,3 +111,33 @@ function handleSelectContinueQuestion(continueQuestion: string) {
</li>
</ul>
</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({
</script>
<template>
<div class="my-[7px]">
<div class="flex items-end gap-[10px]">
<div class="footer-wrapper">
<div class="footer-main-container">
<n-upload
:show-file-list="false"
accept=".doc, .pdf, .docx, .txt, .md"
......@@ -472,17 +472,17 @@ defineExpose({
<template #trigger>
<div
v-show="isEnableDocumentParse"
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]"
class="upload-file-btn"
:class="
isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]'
"
@click="handleSelectFile(handleClick)"
>
<i class="iconfont icon-upload flex h-[16px] w-[16px] items-center justify-center" />
<i class="iconfont icon-upload" />
</div>
</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-upload-trigger>
</n-upload>
......@@ -499,17 +499,17 @@ defineExpose({
<template #trigger>
<div
v-show="isEnableUploadImage"
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]"
class="upload-image-btn"
:class="
isLogin ? 'text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed text-[#b8babf]'
"
@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>
</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-upload-trigger>
</n-upload>
......@@ -517,7 +517,7 @@ defineExpose({
<n-popover trigger="hover">
<template #trigger>
<div
class="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-[#F2F2F2]"
class="clear-message-btn"
:class="
isAllowClearMessage
? 'text-theme-color cursor-pointer hover:opacity-80'
......@@ -525,28 +525,25 @@ defineExpose({
"
@click="handleClearAllMessage"
>
<i class="iconfont icon-clear text-base leading-none" />
<i class="iconfont icon-clear" />
</div>
</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>
<div class="flex flex-1 flex-col">
<div class="flex gap-[14px]">
<div class="footer-content-container">
<div class="upload-image-list-container">
<div
v-for="uploadImageItem in uploadImageList"
:key="uploadImageItem.id"
class="border-inactive-border-color relative mb-[6px] h-[48px] w-[48px] rounded-[10px] border bg-white"
:class="{ 'border-[#F25744]!': uploadImageItem.status === UploadStatus.ERROR }"
class="upload-image-item"
:class="{ 'upload-image-item-error': uploadImageItem.status === UploadStatus.ERROR }"
>
<div
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)"
>
<div class="close-btn" @click="handleRemoveUploadImage(uploadImageItem.id)">
<CloseSmall theme="outline" size="16" fill="#fff" />
</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-image
......@@ -554,24 +551,24 @@ defineExpose({
object-fit="contain"
:src="uploadImageItem.url"
preview-disabled
class="h-full w-full flex-shrink-0"
class="upload-image"
/>
</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
v-for="uploadFileItem in uploadFileList"
: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'"
>
<div class="flex w-full items-center justify-between">
<div class="flex w-full items-center overflow-hidden">
<img :src="uploadFileIcon(uploadFileItem.type!)" class="h-[24px] w-[24px]" />
<div class="upload-file-item-container">
<div class="upload-file-item-content">
<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>
{{ uploadFileItem.name }}
</n-ellipsis>
......@@ -580,7 +577,7 @@ defineExpose({
<n-progress
v-show="!['finished', 'error'].includes(uploadFileItem.status)"
class="w-[calc(100%-78px)]! absolute bottom-0 left-[54px]"
class="upload-file-item-progress"
type="line"
rail-color="#F3F3F3"
:height="4"
......@@ -596,8 +593,8 @@ defineExpose({
<n-popover trigger="hover" placement="top-end" :show-arrow="false">
<template #trigger>
<i
class="iconfont icon-close cursor-pointer text-[14px] hover:opacity-80"
:class="uploadFileItem.status === 'error' ? 'text-error-font-color' : 'text-font-color'"
class="iconfont icon-close close-upload-file-icon"
:class="uploadFileItem.status === 'error' ? 'upload-file-error-icon' : 'upload-file-success-icon'"
@click="handleRemoveFile(uploadFileItem.id)"
/>
</template>
......@@ -607,18 +604,18 @@ defineExpose({
</div>
</li>
</ul>
<div class="relative flex-1">
<div class="footer-input-container">
<n-input
v-model:value="inputMessageContent"
type="textarea"
:autosize="{ minRows: 1, maxRows: 5 }"
:placeholder="inputPlaceholder"
: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"
/>
<div
class="bg-px-send-png absolute bottom-[8px] right-[16px] h-[18px] w-[18px]"
class="send-btn"
:class="
isSendBtnDisabled ||
isAnswerResponseWait ||
......@@ -632,22 +629,19 @@ defineExpose({
@click="handleMessageSend()"
/>
<div
v-show="!isLogin"
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="shrink-0">{{ t('share_agent_module.please') }}</span>
<span class="text-theme-color shrink-0 cursor-pointer px-[4px] hover:opacity-80" @click="handleToLogin">
<div v-show="!isLogin" class="no-login-input-placeholder">
<span>{{ t('share_agent_module.please') }}</span>
<span class="to-login-text" @click="handleToLogin">
{{ t('common_module.login') }}
</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 class="mt-[9px]">
<span class="flex w-full justify-center text-[12px] text-[#b8babf]">
<div class="footer-tip-container">
<span class="tip-text">
{{ t('common_module.dialogue_module.generate_warning_message') }}
</span>
</div>
......@@ -655,15 +649,136 @@ defineExpose({
</template>
<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) {
--n-height: 35px !important;
--n-border: none !important;
--n-border-focus: none !important;
--n-border-hover: none !important;
--n-box-shadow-focus: none !important;
--n-border-disabled: none !important;
.n-input__textarea-el,
.n-input__placeholder {
font-size: 12px;
line-height: 24px;
}
}
......
src/views/share/components/mobile/message-item.vue
View file @ 1b5de751
......@@ -3,7 +3,7 @@ import { computed, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { CheckOne, Down } from '@icon-park/vue-next'
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 { PersonalAppConfigState } from '@/store/types/personal-app-config'
......@@ -67,19 +67,16 @@ function handleShowReasoningContentSwitch() {
</script>
<template>
<div
class="mb-[15px] flex flex-row-reverse last:mb-0"
:class="[role === 'assistant' ? 'justify-end' : 'justify-start']"
>
<div class="flex w-full flex-col overflow-x-auto" :class="[role === 'user' ? 'items-end' : 'items-start']">
<div class="message-item-wrapper" :class="[role === 'assistant' ? 'justify-end' : 'justify-start']">
<div class="message-item-container" :class="[role === 'user' ? 'items-end' : 'items-start']">
<!-- 大模型深度思考 -->
<template v-if="role === 'assistant' && isDeepSeekR1">
<div class="my-[7px] select-none text-[12px]">
<div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
<span v-if="messageItem.isTextContentLoading" class="mr-[6px]">
<div class="deep-seek-title-container">
<div class="deep-seek-name-container" @click="handleShowReasoningContentSwitch">
<span v-if="messageItem.isTextContentLoading" class="deep-seek-text">
{{ t('common_module.deep_thinking', { modelName: agentApplicationConfig.commModelConfig.largeModel }) }}
</span>
<span v-else class="mr-[6px]">
<span v-else class="deep-seek-text">
{{ t('common_module.have_thought_deeply') }}
</span>
<Down
......@@ -94,10 +91,7 @@ function handleShowReasoningContentSwitch() {
</div>
<n-collapse-transition :show="isShowReasoningContent">
<div
v-if="messageItem.reasoningContent"
class="my-[10px] border-l-[1px] border-solid border-l-[#ccc] px-[13px] py-[8px]"
>
<div v-if="messageItem.reasoningContent" class="deep-seek-content-container">
<MarkdownRender
ref="markdownRenderRef"
:raw-text-content="
......@@ -106,38 +100,28 @@ function handleShowReasoningContentSwitch() {
: t('common_module.dialogue_module.empty_message_content')
"
color="#999"
:font-size="'12px'"
:font-size="'3.2vw'"
/>
</div>
</n-collapse-transition>
</template>
<!-- 模型内容 -->
<div class="flex min-w-[80px] max-w-full flex-col">
<div class="model-content-wrapper">
<div
class="w-full flex-wrap rounded-[10px] border px-[12px] py-[11px]"
class="model-content-container"
:class="[
{ 'rounded-tr-none border-[#DCDEFF] bg-[#DCDEFF] text-white': role === 'user' },
{ 'rounded-tl-none border-[#e8e9eb] bg-white text-[#333]': role === 'assistant' },
{ 'user-model-content-container': role === 'user' },
{ 'assistant-model-content-container': role === 'assistant' },
]"
>
<img
v-show="role === 'user' && messageItem.imageUrl"
:src="messageItem.imageUrl"
class="max-h-[120px]! mb-[11px] rounded-[10px] object-contain"
/>
<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" />
<img v-show="role === 'user' && messageItem.imageUrl" :src="messageItem.imageUrl" class="upload-image" />
<div v-show="role === 'assistant' && messageItem.pluginName" class="plugin-container">
<div v-show="messageItem.isTextContentLoading" class="plugin-loading" />
<CheckOne v-show="!messageItem.isTextContentLoading" theme="outline" size="16" fill="#40bd23" />
<span class="text-[12px] leading-5">
<span class="plugin-name">
{{
messageItem.isTextContentLoading
? t('common_module.plugin_in_progress', { pluginName: messageItem.pluginName })
......@@ -146,7 +130,7 @@ function handleShowReasoningContentSwitch() {
</span>
</div>
<div v-if="messageItem.isTextContentLoading" class="py-[6px] pl-[16px]">
<div v-if="messageItem.isTextContentLoading" class="content-loading">
<CustomLoading :active-color="'#000DFF'" />
</div>
......@@ -160,22 +144,19 @@ function handleShowReasoningContentSwitch() {
: messageItem.textContent
"
:color="'#333'"
:font-size="'12px'"
:font-size="'3.2vw'"
/>
</p>
<div
v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading"
class="mb-[5px] mt-[16px] px-[16px]"
>
<div v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading" class="answer-response-loading">
<CustomLoading :active-color="'#000DFF'" />
</div>
</div>
<!-- 移动端语音播放 -->
<div v-show="isShowAudioControl" class="mt-[13px] flex items-center gap-[8px]">
<div v-show="isShowAudioControl" class="audio-control-container">
<div
class="h-[18px] w-[18px] cursor-pointer"
class="audio-control-icon"
:class="messageItem.isVoicePlaying ? 'bg-svg-pause' : 'bg-svg-play'"
@click="handleAudioControl"
/>
......@@ -184,7 +165,7 @@ function handleShowReasoningContentSwitch() {
<n-popover style="max-width: 310px">
<template #trigger>
<span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
<span v-show="!isPlayableAudio"> {{ t('common_module.unplayable') }} </span>
</template>
{{ t('common_module.unplayable_tip') }}
</n-popover>
......@@ -194,3 +175,77 @@ function handleShowReasoningContentSwitch() {
</div>
</div>
</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() {
</script>
<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>
<MessageItem
v-for="[key, messageItem] in messageList"
......@@ -73,7 +73,7 @@ function handleScrollToBottom() {
/>
</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') }}
</p>
......@@ -81,12 +81,26 @@ function handleScrollToBottom() {
<ContinueQuestion v-model:continuous-question-list="continuousQuestionList" :type="'continuous'" />
</div>
<div
v-show="visible"
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 v-show="visible" class="back-bottom-btn" @click.stop="clickBackBottom">
<i class="iconfont icon-left back-bottom-btn-icon" />
</div>
</main>
</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() {
</script>
<template>
<header class="flex h-[58px] w-full items-center justify-between px-[20px]">
<header class="page-header-wrapper">
<div>
<div v-show="isEnableVoice" class="flex items-center gap-[8px]">
<span class="text-[12px]">{{ t('common_module.voice_auto_play') }}</span>
<div v-show="isEnableVoice" class="enable-voice-container">
<span class="auto-play">{{ t('common_module.voice_auto_play') }}</span>
<n-switch
v-model:value="answerAudioAutoPlay"
size="small"
......@@ -67,34 +67,63 @@ function handleToLogout() {
<template #checked> {{ t('common_module.open') }} </template>
<template #unchecked> {{ t('common_module.close') }} </template>
<template #checked-icon>
<div class="bg-theme-color h-full w-full rounded-full"></div>
<div class="checked-icon"></div>
</template>
</n-switch>
</div>
</div>
<div class="flex-center gap-[10px]">
<div class="page-header-right-container">
<NButton
v-show="isLogin"
type="primary"
color="#EBECFF"
class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!"
class="create-agent-btn"
@click="handleToCreateApplication"
>
{{ t('common_module.create_agent_btn_text') }}
</NButton>
<NButton
v-show="!isLogin"
color="#EBECFF"
class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!"
@click="handleToLogin"
>
<NButton v-show="!isLogin" color="#EBECFF" class="login-btn" @click="handleToLogin">
{{ t('common_module.login_now') }}
</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" />
</div>
</div>
</header>
</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(() => {
</script>
<template>
<div class="flex w-full flex-1 flex-col px-[20px]">
<div class="mb-[7.5px] mt-[25px] flex w-full justify-center">
<img :src="agentAvatar" class="rounded-theme h-[40px] w-[40px] object-cover" />
<div class="preamble-wrapper">
<div class="avatar-container">
<img :src="agentAvatar" class="agent-avatar" />
</div>
<div class="flex flex-col items-center justify-center">
<p class="font-family-medium mb-[17px] line-clamp-1 text-[13px] text-[#333]">
<div class="preamble-container">
<p class="agent-title">
{{ agentApplicationConfig.baseInfo.agentTitle }}
</p>
<div class="flex w-full flex-col items-start justify-center">
<p
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]"
>
<p v-show="agentApplicationConfig.commConfig.preamble" class="preamble">
{{ agentApplicationConfig.commConfig.preamble }}
</p>
......@@ -46,3 +43,29 @@ const agentAvatar = computed(() => {
</div>
</div>
</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() {
</script>
<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
v-model:is-enable-voice="isEnableVoice"
v-model:answer-audio-auto-play="answerAudioAutoPlay"
......@@ -390,7 +390,7 @@ function handleToLogoutPage() {
@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">
<Preamble :agent-application-config="agentApplicationConfig" />
</div>
......@@ -406,14 +406,13 @@ function handleToLogoutPage() {
:is-answer-response-loading="isAnswerResponseLoading"
:create-continue-questions-exception="createContinueQuestionsException"
:is-answer-response-interrupt="isAnswerResponseInterrupt"
class="pt-[20px]"
@audio-play="handleAudioPlay"
@audio-pause="handleAudioPause"
/>
</div>
</div>
<div class="footer-operation bg-white px-[16px]">
<div class="footer-container">
<FooterInput
ref="footerInputRef"
v-model:is-answer-response-loading="isAnswerResponseLoading"
......@@ -445,9 +444,19 @@ function handleToLogoutPage() {
</template>
<style lang="scss" scoped>
.footer-operation {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.share-mobile-container {
@apply bg-px-share-h5_bg-png h-full w-full bg-cover bg-no-repeat;
.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);
......
uno.config.ts
View file @ 1b5de751
import { defineConfig } from 'unocss'
import { defineConfig, transformerDirectives, presetUno } from 'unocss'
export default defineConfig({
rules: [
......@@ -87,4 +87,6 @@ export default defineConfig({
shortcuts: {
'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