From 2b8b2cac4fe3f05474459a034bc4034f2d7aa0cb Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 四月 2025 10:14:06 +0800
Subject: [PATCH] Merge branch 'test' into huishui_iframe
---
src/components/amis/AMISRenderer.vue | 412 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 224 insertions(+), 188 deletions(-)
diff --git a/src/components/amis/AMISRenderer.vue b/src/components/amis/AMISRenderer.vue
index ef441ff..fc4a5a2 100644
--- a/src/components/amis/AMISRenderer.vue
+++ b/src/components/amis/AMISRenderer.vue
@@ -1,23 +1,69 @@
-<template><div class="my-amis-scope">鍔犺浇涓�...</div></template>
+<template><div ref="amisRootRef" class="my-amis-scope">鍔犺浇涓�...</div></template>
-<script lang="ts">
-// import '/static/sdk/sdk.js';
-// import '/static/sdk/sdk.css';
-// import '/static/sdk/iconfont.css';
-import { accessSessionKey, handleNoAuth } from '/@/utils/request';
-import { NO_AUTH_API_LIST } from '/@/api/ai/chat';
-import { LOGIN_URL, TEL_LOGIN_URL } from '/@/api/ai/user';
+<script setup lang="ts">
import { MAIN_URL } from '/@/constants';
import router from '/@/router/index';
-
-import { Local } from '/@/utils/storage';
-
+import { accessSessionKey, handleNoAuth } from '/@/utils/request';
// 鍙互涓嶅紩鐢�, 濡傛灉浣犱笉鎯宠浠讳綍杈呭姪绫绘牱寮忕殑璇� (姣斿 `m-t-xs` 杩欑)
// https://aisuda.bce.baidu.com/amis/zh-CN/style/index
// import 'amis/sdk/helper.css';
import qs from 'qs';
+import { onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue';
+import { NO_AUTH_API_LIST } from '/@/api/ai/chat';
+import { LOGIN_URL, TEL_LOGIN_URL } from '/@/api/ai/user';
+import { Local } from '/@/utils/storage';
+import { isSharePage } from '/@/stores/chatRoom';
+const amisRootRef = ref<HTMLDivElement>(null);
+
+const props = defineProps({
+ schema: {
+ type: Object,
+ default: () => ({
+ type: 'page',
+ body: 'Hello World!',
+ }),
+ },
+ locals: {
+ type: Object,
+ default: () => ({}),
+ },
+ context: {
+ type: Object,
+ default: () => ({}),
+ },
+ props: {
+ type: Object,
+ default: () => ({}),
+ },
+ env: {
+ type: Object,
+ default: () => ({}),
+ },
+});
+
+const emit = defineEmits(['ready']);
+function insertScript(src, callback) {
+ const script = document.createElement('script');
+ script.setAttribute('type', 'text/javascript');
+ script.setAttribute('src', src);
+ script.async = true;
+ script.onload = () => callback();
+ script.onerror = () => callback(new Error(`Failed to load ${src}`));
+ document.head.appendChild(script);
+}
function loadScript(callback) {
+ if (!window.eventList.amisSdkJsPromise) {
+ window.eventList.amisSdkJsPromise = new Promise((resolve, reject) => {
+ insertScript('/static/amis/sdk/sdk.js', (error) => {
+ if (error) {
+ reject(error);
+ return;
+ }
+ resolve();
+ });
+ });
+ }
window.eventList.amisSdkJsPromise
.then(() => {
callback();
@@ -27,18 +73,10 @@
});
}
-function loadStyles(styles) {
- for (const path of styles) {
- const style = document.createElement('link');
- style.setAttribute('rel', 'stylesheet');
- style.setAttribute('type', 'text/css');
- style.setAttribute('href', path);
- document.head.appendChild(style);
- }
-}
-
function loadSDK() {
return new Promise((resolve, reject) => {
+ // loadStyles(['/static/amis/sdk/sdk.css', '/static/amis/sdk/helper.css', '/static/amis/sdk/iconfont.css']);
+
if (window.amisRequire) {
resolve();
return;
@@ -54,183 +92,181 @@
});
}
-export default {
- name: 'AMISRenderer',
- components: {},
- props: {
- schema: {
- type: Object,
- default: () => ({
- type: 'page',
- body: 'Hello World!',
- }),
- },
- locals: {
- type: Object,
- default: () => ({}),
- },
- props: {
- type: Object,
- default: () => ({}),
- },
- env: {
- type: Object,
- default: () => ({}),
- },
- },
- data() {
- return {
- // 杩欓噷闈㈢殑鏁版嵁鎵�鏈� amis 椤甸潰閮藉彲浠ヨ幏鍙栧埌
- // 鍙互鐢ㄦ潵鏀句竴涓嬪叕鍏辨暟鎹紝姣斿鐢ㄦ埛淇℃伅绛�
- // 涓嶈鏀惧彈鎺ф暟鎹紝鍙楁帶鏁版嵁搴旇閫氳繃 data 涓嬪彂
- context: {
- siteName: 'AMIS DEMO',
- },
- get location() {
- const current = router.currentRoute.value;
- return {
- pathname: current?.path,
- hash: current?.hash,
- query: current?.query,
- search: `?${qs.stringify(current.query)}`,
- };
- // return 'localtion'
- },
- loading: false,
- amisInstance: null,
- unmounted: false,
- };
- },
+const current = router.currentRoute.value;
- watch: {
- locals: function () {
- this.updateProps();
- },
- props: function () {
- this.updateProps();
- },
- $route: function () {
- this.updateProps();
- },
- },
- async mounted() {
- try {
- this.loading = true;
- await loadSDK();
- } finally {
- this.loading = false;
- }
- if (this.unmounted) {
- return;
- }
+const location = {
+ pathname: current?.path,
+ hash: current?.hash,
+ query: current?.query,
+ search: `?${qs.stringify(current.query)}`,
+};
- const scoped = amisRequire('amis/embed');
- const { normalizeLink } = amisRequire('amis');
- const instance = scoped.embed(
- this.$el,
- this.schema,
- {
- data: {
- ...this.locals,
- },
- context: this.context,
- location: this.location,
+const loading = ref(false);
+const amisInstance = shallowRef(null);
+const unmounted = ref(false);
- // todo 涓嬪彂 location 瀵硅薄
- ...this.props,
+const updateProps = () => {
+ amisInstance.value?.updateProps({
+ data: {
+ // ...props.locals,
+ },
+ context: props.context,
+ ...props.props,
+ });
+};
+watch(
+ () => props.locals,
+ (val) => {
+ updateProps();
+ }
+);
+watch(
+ () => props.props,
+ (val) => {
+ updateProps();
+ }
+);
+
+// watch(() => router.value, (val) => {
+
+// })
+
+onMounted(async () => {
+ try {
+ loading.value = true;
+ await loadSDK();
+ } finally {
+ loading.value = false;
+ }
+ if (unmounted.value) {
+ return;
+ }
+
+ const scoped = amisRequire('amis/embed');
+ const { normalizeLink } = amisRequire('amis');
+ const instance = scoped.embed(
+ amisRootRef.value,
+ props.schema,
+ {
+ data: {
+ // ...props.locals,
},
- {
- requestAdaptor(api) {
- // 鏀寔寮傛锛屽彲浠ラ�氳繃 api.mockResponse 鏉ヨ缃繑鍥炵粨鏋滐紝璺宠繃鐪熸鐨勮姹傚彂閫�
- // 姝ゅ姛鑳借嚜瀹氫箟 fetcher 鐨勮瘽浼氬け鏁�
- // api.context 涓寘鍚彂閫佽姹傚墠鐨勪笂涓嬫枃淇℃伅
- // 鑾峰彇鏈湴鐨� token
- const accessSession = Local.get(accessSessionKey);
- if (!NO_AUTH_API_LIST.includes(api.url)) {
- if (accessSession) {
- // 灏� token 娣诲姞鍒拌姹傛姤鏂囧ご涓�
- api.headers['hswatersession'] = accessSession;
- } else {
- if (api.url !== LOGIN_URL && api.url !== TEL_LOGIN_URL) {
- handleNoAuth(api.url);
- throw '鏉冮檺楠岃瘉澶辫触';
- }
+ context: props.context,
+ location: location,
+
+ // todo 涓嬪彂 location 瀵硅薄
+ ...props.props,
+ },
+ {
+ requestAdaptor(api) {
+ // 鏀寔寮傛锛屽彲浠ラ�氳繃 api.mockResponse 鏉ヨ缃繑鍥炵粨鏋滐紝璺宠繃鐪熸鐨勮姹傚彂閫�
+ // 姝ゅ姛鑳借嚜瀹氫箟 fetcher 鐨勮瘽浼氬け鏁�
+ // api.context 涓寘鍚彂閫佽姹傚墠鐨勪笂涓嬫枃淇℃伅
+ // 鑾峰彇鏈湴鐨� token
+ const accessSession = Local.get(accessSessionKey);
+ if (!NO_AUTH_API_LIST.includes(api.url) && !isSharePage.value) {
+ if (accessSession) {
+ // 灏� token 娣诲姞鍒拌姹傛姤鏂囧ご涓�
+ api.headers['hswatersession'] = accessSession;
+ } else {
+ if (api.url !== LOGIN_URL && api.url !== TEL_LOGIN_URL) {
+ handleNoAuth(api.url);
+ throw '鏉冮檺楠岃瘉澶辫触';
}
}
+ }
- api.url = `${MAIN_URL}${api.url}`;
- return api;
- },
- // 瑕嗙洊 amis env
- // 鍙傝�� https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
- jumpTo: (to, action) => {
- return;
- console.log('馃殌 ~ to:', to);
- console.log('馃殌 ~ action:', action);
- if (to === 'goBack') {
- return router.go(-1);
- }
-
- to = normalizeLink(to, this.location);
-
- if (action?.actionType === 'url') {
- action.blank === false ? router.push(to) : window.open(to);
- return;
- }
-
- // 涓昏鏄敮鎸� nav 涓殑璺宠浆
- if (action && to && action.target) {
- window.open(to, action.target);
- return;
- }
-
- if (/^https?:\/\//.test(to)) {
- window.location.replace(to);
- } else {
- router.push(to);
- }
- },
-
- updateLocation: (location, replace) => {
- // 绂佹璺宠浆
- return;
- console.log('馃殌 ~ location:', location);
- console.log('馃殌 ~ replace:', replace);
- if (location === 'goBack') {
- return router.go(-1);
- }
-
- location = normalizeLink(location, this.location);
- replace ? router.replace(location) : router.replace(location);
- },
-
- ...this.env,
+ api.url = `${MAIN_URL}${api.url}`;
+ return api;
},
- () => {
- this.$emit('ready', {
- instance,
- });
- }
- );
+ // 鍏ㄥ眬 api 閫傞厤鍣ㄣ��
+ // 鍙﹀鍦� amis 閰嶇疆椤逛腑鐨� api 涔熷彲浠ラ厤缃�傞厤鍣紝閽堝鏌愪釜鐗瑰畾鎺ュ彛鍗曠嫭澶勭悊銆�
+ responseAdaptor(api, payload, query, request, response) {
+ // {
+ // "json_ok": true,
+ // "sections": [
+ // {
+ // "section_id": "knowledge_base",
+ // "section_name": "姘村姟鐭ヨ瘑搴�",
+ // "section_title": "鎷ユ湁姘村姟琛屼笟鐩稿叧鐨勯�氱敤鐭ヨ瘑锛屽寘鎷細娉曞緥娉曡銆佽璁¤鑼冦�佺粰鎺掓按鐩稿叧鐭ヨ瘑绛夌瓑"
+ // },
+ // {
+ // "section_id": "office_assistant",
+ // "section_name": "鍔炲叕鍔╂墜",
+ // "section_title": "鍔炲叕鍔╂墜鑳藉杈呭姪鍐欎細璁�氱煡銆佽鍋囨潯銆佸伐浣滄�荤粨銆丳PT绛夊伐浣溿��"
+ // },
+ // {
+ // "section_id": "customer_service",
+ // "section_name": "瀹㈡埛鏈嶅姟",
+ // "section_title": "閽堝姘村姟浼佷笟瀵瑰瀹㈡埛鏈嶅姟鐩稿叧鐨勫唴瀹癸紝鍖呮嫭锛氭妱琛ㄣ�佸紑璐︺�佹敹璐癸紝浠ュ強鐑嚎鐩稿叧"
+ // },
+ // {
+ // "section_id": "network_operation",
+ // "section_name": "绠＄綉杩愯",
+ // "section_title": "閽堝姘村姟浼佷笟绠＄綉杩愯涓庣淮鎶ょ鐞嗐�佹按璐ㄧ鐞嗙瓑鐩稿叧"
+ // },
+ // {
+ // "section_id": "waterworks_operation",
+ // "section_name": "姘村巶杩愯",
+ // "section_title": "閽堝姘村姟浼佷笟姘村巶杩愭棩甯歌繍钀ョ鐞嗘湇鍔★紝鍖呮嫭锛氭按鍘傚伐鑹烘祦绋嬨�佹按娉佃繍琛岃皟搴�"
+ // }
+ // ]
+ // }
+ return payload;
+ },
+ // 瑕嗙洊 amis env
+ // 鍙傝�� https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
+ jumpTo: (to, action) => {
+ return;
+ if (to === 'goBack') {
+ return router.go(-1);
+ }
- this.amisInstance = instance;
- },
+ to = normalizeLink(to, this.location);
- methods: {
- updateProps() {
- this.amisInstance?.updateProps({
- data: {
- ...this.locals,
- },
- context: this.context,
- ...this.props,
- });
+ if (action?.actionType === 'url') {
+ action.blank === false ? router.push(to) : window.open(to);
+ return;
+ }
+
+ // 涓昏鏄敮鎸� nav 涓殑璺宠浆
+ if (action && to && action.target) {
+ window.open(to, action.target);
+ return;
+ }
+
+ if (/^https?:\/\//.test(to)) {
+ window.location.replace(to);
+ } else {
+ router.push(to);
+ }
+ },
+
+ updateLocation: (location, replace) => {
+ // 绂佹璺宠浆
+ return;
+ if (location === 'goBack') {
+ return router.go(-1);
+ }
+
+ location = normalizeLink(location, this.location);
+ replace ? router.replace(location) : router.replace(location);
+ },
+
+ ...props.env,
},
- },
+ () => {
+ emit('ready', {
+ instance,
+ });
+ }
+ );
+ amisInstance.value = instance;
+});
- unmounted() {
- this.unmounted = true;
- this.amisInstance?.unmount();
- },
-};
+onUnmounted(() => {
+ unmounted.value = true;
+
+ amisInstance.value?.unmount();
+});
</script>
--
Gitblit v1.9.3