app #0: cube.famzheng.me 入口门户 + 平台脚手架

monorepo 第一刀： - workspace + crates/cube-core（base router / healthz / ServeDir SPA fallback / JSON tracing / SIGTERM shutdown） - apps/cube：axum 主程序 + Vite + Vue 3 + TS 门户（暗色调 + 渐变 logo + app 卡片网格） - Dockerfile：scratch + musl 静态二进制，镜像 2.6MB - k8s/：cube-cube ns + Deployment + Service + Ingress（cube.famzheng.me，traefik LE 自动签） - registry：新增 registry.famzheng.me ingress 反代到 gitea 内置 container registry，自动化身份用 mochi（registry.famzheng.me/mochi/cube） - CI：.gitea/workflows/deploy-cube.yml，host shell runner（gnoc）， build → push → kubectl rollout 五步流水 - README：把宪法段改成 monorepo 模式 + monorepo 目录结构 - 新增宪法条款：前端视图状态走 URL（path + query）保证可 bookmark
2026-05-04 11:22:59 +01:00
parent 011e7ddb98
commit 93b6fa3061
28 changed files with 3018 additions and 29 deletions
@@ -0,0 +1,11 @@
+[package]
+name = "cube"
+version = "0.1.0"
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+description = "cube.famzheng.me — cube 平台入口门户（app #0）"
+
+[dependencies]
+cube-core = { path = "../../crates/cube-core" }
+tokio = { workspace = true }
@@ -0,0 +1,8 @@
+# cube app #0 — 入口门户
+# Build context = repo root（不是 apps/cube/），所以路径都是 apps/cube/...
+# build 流程在 host 上跑（不在容器里），见 README"构建：host musl + scratch 容器"
+FROM scratch
+COPY target/x86_64-unknown-linux-musl/release/cube /cube
+COPY apps/cube/frontend/dist /dist
+EXPOSE 8080
+ENTRYPOINT ["/cube"]
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>cube — Fam's small app platform</title>
+    <meta name="description" content="Fam 的小 app 平台 · cube.famzheng.me" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+{
+  "name": "cube-portal",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.5",
+    "vue-tsc": "^2.2.0"
+  }
+}
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#7c3aed"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+  </defs>
+  <rect x="8" y="8" width="48" height="48" rx="10" fill="url(#g)"/>
+  <path d="M20 20 L44 20 L44 44 L20 44 Z M20 20 L32 14 L56 14 L44 20 M44 20 L56 14 L56 38 L44 44" fill="none" stroke="white" stroke-width="2.4" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import AppCard from './components/AppCard.vue'
+import { apps } from './apps'
+</script>
+
+<template>
+  <main class="page">
+    <header class="hero">
+      <div class="logo">
+        <svg viewBox="0 0 64 64" aria-hidden="true">
+          <defs>
+            <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stop-color="#7c3aed" />
+              <stop offset="100%" stop-color="#06b6d4" />
+            </linearGradient>
+          </defs>
+          <rect x="8" y="8" width="48" height="48" rx="10" fill="url(#g)" />
+          <path
+            d="M20 20 L44 20 L44 44 L20 44 Z M20 20 L32 14 L56 14 L44 20 M44 20 L56 14 L56 38 L44 44"
+            fill="none" stroke="white" stroke-width="2.4" stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <h1>cube</h1>
+      <p class="tagline">Fam 的小 app 平台 · <code>*.famzheng.me</code></p>
+    </header>
+
+    <section class="grid">
+      <AppCard v-for="app in apps" :key="app.slug" :app="app" />
+    </section>
+
+    <footer class="foot">
+      <span>cube · monorepo at</span>
+      <a href="https://famzheng.me/gitea/fam/cube" target="_blank" rel="noopener">famzheng.me/gitea/fam/cube</a>
+    </footer>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 4rem 1.5rem 3rem;
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.logo {
+  width: 88px;
+  height: 88px;
+  margin: 0 auto 1.25rem;
+  filter: drop-shadow(0 8px 24px rgba(124, 58, 237, 0.35));
+}
+.logo svg { width: 100%; height: 100%; }
+
+h1 {
+  font-size: 3.25rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  background: linear-gradient(135deg, #fff 0%, #b8c0d6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.tagline {
+  margin-top: 0.5rem;
+  color: var(--fg-dim);
+  font-size: 1rem;
+}
+.tagline code {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  padding: 0.1rem 0.45rem;
+  border-radius: 6px;
+  font-size: 0.9em;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1rem;
+  margin-bottom: 3rem;
+}
+
+.foot {
+  text-align: center;
+  color: var(--fg-dim);
+  font-size: 0.85rem;
+}
+.foot a {
+  color: var(--accent-2);
+  margin-left: 0.35rem;
+}
+.foot a:hover { text-decoration: underline; }
+</style>
@@ -0,0 +1,54 @@
+export type AppStatus = 'live' | 'pending' | 'tbd'
+
+export interface App {
+  slug: string
+  name: string
+  description: string
+  url: string
+  status: AppStatus
+}
+
+export const apps: App[] = [
+  {
+    slug: 'cube',
+    name: 'cube',
+    description: '你正在看的这个门户。cube 平台本身的入口。',
+    url: 'https://cube.famzheng.me',
+    status: 'live',
+  },
+  {
+    slug: 'portfolio',
+    name: 'portfolio',
+    description: '投资组合追踪。从 oci 迁移中（原 portfolio.oci.euphon.net）。',
+    url: 'https://portfolio.famzheng.me',
+    status: 'pending',
+  },
+  {
+    slug: 'repo-vis',
+    name: 'repo-vis',
+    description: 'git 仓库可视化。从 oci 迁移中。',
+    url: 'https://repo-vis.famzheng.me',
+    status: 'pending',
+  },
+  {
+    slug: 'simpleasm',
+    name: 'simpleasm',
+    description: '汇编教学/玩具。从 oci 迁移中（原 asm.oci.euphon.net）。',
+    url: 'https://simpleasm.famzheng.me',
+    status: 'pending',
+  },
+  {
+    slug: 'guitar',
+    name: 'guitar',
+    description: '吉他 player。从 oci 迁移中（原 player.oci.euphon.net）。',
+    url: 'https://guitar.famzheng.me',
+    status: 'pending',
+  },
+  {
+    slug: 'pyroblem',
+    name: 'pyroblem',
+    description: '详情待补。',
+    url: 'https://pyroblem.famzheng.me',
+    status: 'tbd',
+  },
+]
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { App } from '../apps'
+
+defineProps<{ app: App }>()
+
+const statusLabel: Record<App['status'], string> = {
+  live: '运行中',
+  pending: '迁移中',
+  tbd: '待规划',
+}
+</script>
+
+<template>
+  <component
+    :is="app.status === 'live' ? 'a' : 'div'"
+    :href="app.status === 'live' ? app.url : undefined"
+    :target="app.status === 'live' ? '_blank' : undefined"
+    rel="noopener"
+    class="card"
+    :class="`is-${app.status}`"
+  >
+    <div class="row">
+      <h2>{{ app.name }}</h2>
+      <span class="status">{{ statusLabel[app.status] }}</span>
+    </div>
+    <p>{{ app.description }}</p>
+    <span class="url">{{ app.url.replace(/^https?:\/\//, '') }}</span>
+  </component>
+</template>
+
+<style scoped>
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 1.1rem 1.2rem;
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.card.is-live {
+  cursor: pointer;
+}
+.card.is-live:hover {
+  border-color: var(--accent-2);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.3);
+}
+
+.card.is-pending,
+.card.is-tbd {
+  opacity: 0.7;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+h2 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.status {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+}
+.is-live .status   { color: var(--green);  border-color: rgba(52, 211, 153, 0.4); }
+.is-pending .status { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); }
+.is-tbd .status    { color: var(--rose);   border-color: rgba(251, 113, 133, 0.4); }
+
+p {
+  color: var(--fg-dim);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.url {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.78rem;
+  color: var(--fg-dim);
+  margin-top: auto;
+}
+</style>
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')
@@ -0,0 +1,39 @@
+:root {
+  --bg: #0b0d14;
+  --bg-soft: #11141d;
+  --fg: #e6e8ee;
+  --fg-dim: #8b93a7;
+  --accent: #7c3aed;
+  --accent-2: #06b6d4;
+  --border: #1f2433;
+  --green: #34d399;
+  --amber: #fbbf24;
+  --rose: #fb7185;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #app {
+  min-height: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  background-image:
+    radial-gradient(at 12% 8%, rgba(124, 58, 237, 0.18) 0px, transparent 45%),
+    radial-gradient(at 88% 92%, rgba(6, 182, 212, 0.14) 0px, transparent 45%);
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite-env.d.ts"]
+}
@@ -0,0 +1 @@
+{"root":["./src/apps.ts","./src/main.ts","./src/App.vue","./src/components/AppCard.vue","./vite-env.d.ts"],"version":"5.7.3"}
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    target: 'es2020',
+  },
+})
@@ -0,0 +1,22 @@
+# registry.famzheng.me — 反代到 gitea container registry
+# Docker daemon 期望 https://<host>/v2/...，gitea 内置 registry 在 gitea pod 的 /v2/ 下，
+# 所以这条 ingress 不 strip 任何路径，全部 pass-through 到 gitea-svc:3000。
+# 不属于 cube app #0 本身，但平台基础设施先放在 app #0 目录里，未来可以挪到独立的 platform/ ns。
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: registry
+  namespace: gnoc-gitea
+spec:
+  ingressClassName: traefik
+  rules:
+    - host: registry.famzheng.me
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: gitea
+                port:
+                  number: 3000
@@ -0,0 +1,46 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: cube
+  namespace: cube-cube
+  labels:
+    app: cube
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: cube
+  template:
+    metadata:
+      labels:
+        app: cube
+    spec:
+      imagePullSecrets:
+        - name: registry-creds
+      containers:
+        - name: cube
+          # tag 由 CI 通过 `kubectl set image` 替换；初次 apply 由 README 部署 runbook 指定
+          image: registry.famzheng.me/mochi/cube:latest
+          imagePullPolicy: IfNotPresent
+          ports:
+            - containerPort: 8080
+              name: http
+          readinessProbe:
+            httpGet:
+              path: /healthz
+              port: http
+            initialDelaySeconds: 1
+            periodSeconds: 5
+          livenessProbe:
+            httpGet:
+              path: /healthz
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 15
+          resources:
+            requests:
+              cpu: 10m
+              memory: 16Mi
+            limits:
+              cpu: 200m
+              memory: 64Mi
@@ -0,0 +1,18 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: cube
+  namespace: cube-cube
+spec:
+  ingressClassName: traefik
+  rules:
+    - host: cube.famzheng.me
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: cube
+                port:
+                  number: 80
@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: cube-cube
@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: cube
+  namespace: cube-cube
+spec:
+  selector:
+    app: cube
+  ports:
+    - name: http
+      port: 80
+      targetPort: 8080
@@ -0,0 +1,9 @@
+//! cube.famzheng.me — 入口门户。纯静态 SPA，没有自己的 /api 路由。
+
+#[tokio::main]
+async fn main() -> std::io::Result<()> {
+    cube_core::init_tracing();
+    let dist = std::env::var("CUBE_DIST_DIR").unwrap_or_else(|_| "/dist".into());
+    let app = cube_core::base(dist);
+    cube_core::serve(app, 8080).await
+}
				`@@ -0,0 +1 @@`
				`{"root":["./src/apps.ts","./src/main.ts","./src/App.vue","./src/components/AppCard.vue","./vite-env.d.ts"],"version":"5.7.3"}`