首次提交

frontend/src/App.css

@@ -0,0 +1,118 @@
+.app-shell {
+  width: min(1100px, calc(100% - 32px));
+  margin: 32px auto;
+}
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+.app-header h1 {
+  margin: 0 0 8px;
+  font-size: 28px;
+}
+.app-header p {
+  margin: 0;
+  color: #6b7280;
+}
+.app-header button {
+  flex: none;
+  padding: 9px 16px;
+  border: 1px solid #2563eb;
+  border-radius: 6px;
+  color: #fff;
+  background: #2563eb;
+  cursor: pointer;
+}
+.app-header button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.demo-notes {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #eff6ff;
+}
+.amis-region {
+  min-height: 320px;
+  padding: 20px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+.state-message {
+  padding: 32px;
+  text-align: center;
+  color: #6b7280;
+}
+.state-message.error {
+  color: #b91c1c;
+}
+@media (max-width: 700px) {
+  .app-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .demo-notes {
+    flex-direction: column;
+  }
+}
+.adminive-status-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+.adminive-status-grid > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #f9fafb;
+}
+.adminive-status-grid strong {
+  color: #6b7280;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.adminive-status-grid span {
+  color: #111827;
+  font-size: 16px;
+}
+@media (max-width: 800px) {
+  .adminive-status-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 520px) {
+  .adminive-status-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.adminive-object-status {
+  min-width: 300px;
+  padding: 4px 0;
+}
+.adminive-object-status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 8px 4px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.adminive-object-status-row:last-child {
+  border-bottom: 0;
+}
+.adminive-object-status-label {
+  color: #64748b;
+}

frontend/src/App.tsx

@@ -0,0 +1,47 @@
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import axios from 'axios';
+import {render as renderAmis} from 'amis';
+import {amis_fetcher} from './amis_fetcher';
+import type {Api_Envelope} from './types';
+import './App.css';
+type Amis_Schema = Record<string, unknown>;
+export default function App() {
+  const [schema, set_schema] = useState<Amis_Schema>();
+  const [loading, set_loading] = useState(true);
+  const [error, set_error] = useState('');
+  const load_schema = useCallback(async () => {
+    set_loading(true);
+    set_error('');
+    try {
+      const response = await axios.get<Api_Envelope<Amis_Schema>>('/admin/amis');
+      if(response.data.status !== 0) {
+        throw new Error(response.data.msg || '加载后端页面描述失败');
+      }
+      set_schema(response.data.data);
+    } catch(reason) {
+      set_error(reason instanceof Error ? reason.message : String(reason));
+    } finally {
+      set_loading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void load_schema();
+  }, [load_schema]);
+  const amis_view = useMemo(() => schema ? renderAmis(schema as any, {}, {fetcher: amis_fetcher as any}) : null, [schema]);
+  return (
+    <main className="app-shell">
+      <header className="app-header">
+        <div>
+          <h1>Adminive</h1>
+          <p>页面结构、对象字段、状态展示、刷新周期和颜色均由后端 JSON 描述驱动。</p>
+        </div>
+        <button type="button" onClick={() => void load_schema()} disabled={loading}>重新读取后端描述</button>
+      </header>
+      <section className="amis-region">
+        {loading && <div className="state-message">正在加载后端描述……</div>}
+        {!loading && error && <div className="state-message error">{error}</div>}
+        {!loading && !error && amis_view}
+      </section>
+    </main>
+  );
+}

frontend/src/amis_fetcher.ts

@@ -0,0 +1,17 @@
+import axios, {type AxiosRequestConfig, type AxiosResponse} from 'axios';
+import type {Amis_Request} from './types';
+export async function amis_fetcher(request: Amis_Request): Promise<AxiosResponse> {
+  const method = (request.method ?? 'get').toLowerCase();
+  const query_method = method === 'get' || method === 'head';
+  const config: AxiosRequestConfig = {
+    url: request.url,
+    method,
+    headers: request.headers,
+    params: query_method ? request.data : undefined,
+    data: query_method ? undefined : request.data,
+    responseType: request.responseType || 'json',
+    validateStatus: () => true,
+    ...(request.config ?? {})
+  };
+  return axios(config);
+}

frontend/src/index.css

@@ -0,0 +1,18 @@
+:root {
+  font-family: Inter, "Microsoft YaHei", sans-serif;
+  color: #1f2937;
+  background: #f3f4f6;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+button {
+  font: inherit;
+}

frontend/src/main.tsx

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom/client';
+import 'amis/lib/themes/cxd.css';
+import 'amis/lib/helper.css';
+import 'amis/sdk/iconfont.css';
+import App from './App';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

frontend/src/types.ts

@@ -0,0 +1,14 @@
+export interface Api_Envelope<T> {
+  status: number;
+  msg: string;
+  data: T;
+  errors?: Record<string, string>;
+}
+export interface Amis_Request {
+  url: string;
+  method?: string;
+  data?: unknown;
+  headers?: Record<string, string>;
+  config?: Record<string, unknown>;
+  responseType?: XMLHttpRequestResponseType;
+}