feat: Add front-end plug-in demo

ui/.gitignore

@@ -35,3 +35,4 @@ package-lock.json
 /* !/src/plugins
 /src/plugins/*
 !/src/plugins/builtin
+!/src/plugins/Demo

ui/src/plugins/Demo/i18n/en_US.yaml

@@ -0,0 +1,4 @@
+plugin:
+  ui_plugin_demo:
+    ui:
+      msg: UI Plugin Demo

ui/src/plugins/Demo/i18n/index.ts

@@ -0,0 +1,9 @@
+import pluginKit from '@/utils/pluginKit';
+
+import en_US from './en_US.yaml';
+import zh_CN from './zh_CN.yaml';
+
+pluginKit.initI18nResource({
+  en_US,
+  zh_CN,
+});

ui/src/plugins/Demo/i18n/zh_CN.yaml

@@ -0,0 +1,4 @@
+plugin:
+  ui_plugin_demo:
+    ui:
+      msg: UI 插件示例

ui/src/plugins/Demo/index.tsx

@@ -0,0 +1,24 @@
+import { memo, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from 'react-bootstrap';
+
+import pluginKit, { PluginInfo } from '@/utils/pluginKit';
+import './i18n';
+
+import info from './info.yaml';
+
+const pluginInfo: PluginInfo = {
+  slug_name: info.slug_name,
+};
+
+const Index: FC = () => {
+  const { t } = useTranslation(pluginKit.getTransNs(), {
+    keyPrefix: pluginKit.getTransKeyPrefix(pluginInfo),
+  });
+
+  return <Alert variant="info">{t('msg')}</Alert>;
+};
+export default {
+  info: pluginInfo,
+  component: memo(Index),
+};

ui/src/plugins/Demo/info.yaml

@@ -0,0 +1,4 @@
+slug_name: ui_plugin_demo
+version: 0.0.1
+author:  Answer.dev
+

ui/src/plugins/index.ts

@@ -1 +1,3 @@
 export default null;
+
+export { default as Demo } from './Demo';