diff --git a/frontend/providers/template/.vscode/settings.json b/frontend/providers/template/.vscode/settings.json
index 19c487510..dac22bfae 100644
--- a/frontend/providers/template/.vscode/settings.json
+++ b/frontend/providers/template/.vscode/settings.json
@@ -11,7 +11,7 @@
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.keepFulfilled": false,
- "i18n-ally.sourceLanguage": "zh",
+ "i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh",
"i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
"i18n-ally.extract.targetPickingStrategy": "most-similar-by-key"
diff --git a/frontend/providers/template/src/constants/theme.ts b/frontend/providers/template/src/constants/theme.ts
index 83dafd742..946750ce3 100644
--- a/frontend/providers/template/src/constants/theme.ts
+++ b/frontend/providers/template/src/constants/theme.ts
@@ -7,12 +7,48 @@ import {
} from '@chakra-ui/react';
import { theme as sealosTheme } from '@sealos/ui';
// @ts-ignore
-import { selectAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
+import { modalAnatomy, selectAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
createMultiStyleConfigHelpers(selectAnatomy.keys);
const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle } =
createMultiStyleConfigHelpers(switchAnatomy.keys);
+const ModalHelper = createMultiStyleConfigHelpers(modalAnatomy.keys);
+
+export const Modal = ModalHelper.defineMultiStyleConfig({
+ baseStyle: {
+ header: {
+ bg: '#fff',
+ borderTopRadius: '16px',
+ fontSize: '16px',
+ borderBottom: 'none',
+ color: 'grayModern.900',
+ fontWeight: '500',
+ py: '11.5px',
+ lineHeight: '24px'
+ },
+ closeButton: {
+ fill: '#111824',
+ svg: {
+ width: '12px',
+ height: '12px'
+ }
+ },
+ dialog: {
+ borderRadius: '16px'
+ },
+ body: {
+ px: '36px',
+ py: '24px'
+ },
+ footer: {
+ px: '36px',
+ pb: '24px',
+ pt: '0px'
+ }
+ }
+});
+
const Button = defineStyleConfig({
baseStyle: {
_active: {
diff --git a/frontend/providers/template/src/pages/_document.tsx b/frontend/providers/template/src/pages/_document.tsx
index 80715dd59..555dd760b 100644
--- a/frontend/providers/template/src/pages/_document.tsx
+++ b/frontend/providers/template/src/pages/_document.tsx
@@ -2,6 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
const brandName = process.env.NEXT_PUBLIC_BRAND_NAME;
+ const scripts: { [key: string]: string }[] = JSON.parse(process.env.CUSTOM_SCRIPTS ?? '[]');
return (
@@ -17,6 +18,9 @@ export default function Document() {
+ {scripts.map((script, i) => (
+
+ ))}
);
diff --git a/frontend/providers/template/src/pages/instance/components/header.tsx b/frontend/providers/template/src/pages/instance/components/header.tsx
index 094d0da30..978fa0c98 100644
--- a/frontend/providers/template/src/pages/instance/components/header.tsx
+++ b/frontend/providers/template/src/pages/instance/components/header.tsx
@@ -14,6 +14,7 @@ import {
Modal,
ModalCloseButton,
ModalContent,
+ ModalFooter,
ModalHeader,
ModalOverlay,
Text,
@@ -61,9 +62,9 @@ export default function Header({ instanceName }: { instanceName: string }) {
const handleDisplayName = async () => {
try {
if (yamlCR.current) {
- yamlCR.current.metadata.labels = yamlCR.current.metadata.labels ?? {};
+ yamlCR.current.metadata.annotations = yamlCR.current.metadata.annotations ?? {};
if (displayName) {
- yamlCR.current.metadata.labels[templateDisplayNameKey] = displayName;
+ yamlCR.current.metadata.annotations[templateDisplayNameKey] = displayName;
}
const yaml = JsYaml.dump(yamlCR.current);
await postDeployApp([yaml], 'replace');
@@ -174,16 +175,33 @@ export default function Header({ instanceName }: { instanceName: string }) {
- {t('Edit App Name')}
+
+ {t('set_app_remark')}
+
-
+
{t('App Name')}
- setDisplayName(e.target.value)} />
-
+ setDisplayName(e.target.value)}
+ />
+
+
+
+
diff --git a/frontend/providers/template/src/types/app.ts b/frontend/providers/template/src/types/app.ts
index b86899a2e..78ccc6feb 100644
--- a/frontend/providers/template/src/types/app.ts
+++ b/frontend/providers/template/src/types/app.ts
@@ -102,6 +102,7 @@ export type TemplateInstanceType = {
name: string;
creationTimestamp?: string;
labels?: Record;
+ annotations?: Record;
};
spec: {
categories: string[];
diff --git a/frontend/providers/template/src/utils/adapt.ts b/frontend/providers/template/src/utils/adapt.ts
index 2e3582421..73ab5ea77 100644
--- a/frontend/providers/template/src/utils/adapt.ts
+++ b/frontend/providers/template/src/utils/adapt.ts
@@ -51,7 +51,10 @@ export function adaptInstanceListItem(item: TemplateInstanceType): InstanceListI
title: item.spec?.title,
url: item.spec?.url,
yamlCR: item,
- displayName: item.metadata?.labels?.[templateDisplayNameKey]
+ // Compatible with old versions
+ displayName:
+ item.metadata?.annotations?.[templateDisplayNameKey] ??
+ item.metadata?.labels?.[templateDisplayNameKey]
};
}
diff --git a/frontend/providers/template/src/utils/json-yaml.ts b/frontend/providers/template/src/utils/json-yaml.ts
index 97f45a96b..7bdc88127 100644
--- a/frontend/providers/template/src/utils/json-yaml.ts
+++ b/frontend/providers/template/src/utils/json-yaml.ts
@@ -189,12 +189,24 @@ export function evaluateExpression(
try {
// console.log("expression: ", expression, " data: ", data)
// const result = new Function('data', `with(data) { return ${expression}; }`)(data);
+ const processedExpression = expression.replace(
+ /(\w+)\.([a-zA-Z_$][\w\-]*)/g,
+ (match, obj, prop) => {
+ if (prop.includes('-')) {
+ return `${obj}['${prop}']`;
+ }
+ return match;
+ }
+ );
const initInterpreterFunc = (interpreter: any, ctx: any) => {
interpreter.setProperty(ctx, 'data', interpreter.nativeToPseudo(data));
interpreter.setProperty(ctx, 'random', interpreter.createNativeFunction(nanoid));
interpreter.setProperty(ctx, 'base64', interpreter.createNativeFunction(base64));
};
- const interpreter = new Interpreter(`with(data) { ${expression} }`, initInterpreterFunc);
+ const interpreter = new Interpreter(
+ `with(data) { ${processedExpression} }`,
+ initInterpreterFunc
+ );
interpreter.run();
// console.log('resoult: ', interpreter.value)
return interpreter.value;