feat: implement versioning system by extracting version from environment, git tags, or package.json, and display app version in MainLayout; enhance ConfigPage with search functionality and CodeMirror integration for YAML editing

2026-02-02 02:40:50 +08:00 · 2025-12-12 19:10:09 +08:00
parent bae7ff8752
commit 7c0a2280a4
7 changed files with 406 additions and 43 deletions
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -421,6 +421,9 @@ export function MainLayout() {
            <span>
              {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
            </span>
+            <span>
+              {t('footer.version')}: {__APP_VERSION__ || t('system_info.version_unknown')}
+            </span>
            <span>
              {t('footer.build_date')}:{' '}
              {serverBuildDate ? new Date(serverBuildDate).toLocaleString(i18n.language) : t('system_info.version_unknown')}
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -550,7 +550,11 @@
    "status_save_failed": "Save failed",
    "save_success": "Configuration saved successfully",
    "error_yaml_not_supported": "Server did not return YAML. Verify the /config.yaml endpoint is available.",
-    "editor_placeholder": "key: value"
+    "editor_placeholder": "key: value",
+    "search_placeholder": "Search config... (Enter for next, Shift+Enter for previous)",
+    "search_no_results": "No results",
+    "search_prev": "Previous",
+    "search_next": "Next"
  },
  "system_info": {
    "title": "Management Center Info",
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -550,7 +550,11 @@
    "status_save_failed": "保存失败",
    "save_success": "配置已保存",
    "error_yaml_not_supported": "服务器未返回 YAML 格式，请确认 /config.yaml 接口可用",
-    "editor_placeholder": "key: value"
+    "editor_placeholder": "key: value",
+    "search_placeholder": "搜索配置内容... (Enter 下一个, Shift+Enter 上一个)",
+    "search_no_results": "无结果",
+    "search_prev": "上一个",
+    "search_next": "下一个"
  },
  "system_info": {
    "title": "管理中心信息",
--- a/src/pages/ConfigPage.module.scss
+++ b/src/pages/ConfigPage.module.scss
@@ -1,3 +1,5 @@
+@use '../styles/mixins' as *;
+
 .container {
  width: 100%;
 }
@@ -21,6 +23,54 @@
  gap: $spacing-lg;
 }

+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.searchInputWrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.searchInput {
+  flex: 1;
+  padding-right: 80px !important;
+}
+
+.searchCount {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  padding: 2px 8px;
+  border-radius: $radius-sm;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.searchActions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+
+  button {
+    min-width: 32px;
+    padding: 0 8px;
+  }
+}
+
 .controls {
  display: flex;
  justify-content: space-between;
@@ -56,10 +106,74 @@
  border: 1px solid var(--border-color);
  border-radius: $radius-lg;
  overflow: hidden;
+
+  // CodeMirror theme overrides
+  :global {
+    .cm-editor {
+      height: 100%;
+      font-size: 14px;
+      font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
+    }
+
+    .cm-scroller {
+      overflow: auto;
+    }
+
+    .cm-gutters {
+      border-right: 1px solid var(--border-color);
+      background: var(--bg-secondary);
+    }
+
+    .cm-lineNumbers .cm-gutterElement {
+      padding: 0 8px 0 12px;
+      min-width: 40px;
+      color: var(--text-muted);
+    }
+
+    .cm-activeLine {
+      background: var(--bg-hover);
+    }
+
+    .cm-activeLineGutter {
+      background: var(--bg-hover);
+    }
+
+    .cm-selectionMatch {
+      background: rgba(255, 193, 7, 0.3);
+    }
+
+    .cm-searchMatch {
+      background: rgba(255, 193, 7, 0.4);
+      outline: 1px solid rgba(255, 193, 7, 0.6);
+    }
+
+    .cm-searchMatch-selected {
+      background: rgba(255, 152, 0, 0.5);
+    }
+
+    // Dark theme adjustments
+    [data-theme='dark'] & {
+      .cm-gutters {
+        background: var(--bg-tertiary);
+      }
+
+      .cm-selectionMatch {
+        background: rgba(255, 193, 7, 0.2);
+      }
+    }
+  }
 }

 .actions {
  display: flex;
  gap: $spacing-sm;
  justify-content: flex-end;
+
+  @include mobile {
+    justify-content: stretch;
+
+    button {
+      flex: 1;
+    }
+  }
 }
--- a/src/pages/ConfigPage.tsx
+++ b/src/pages/ConfigPage.tsx
@@ -1,14 +1,21 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { keymap } from '@codemirror/view';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { useNotificationStore, useAuthStore } from '@/stores';
+import { Input } from '@/components/ui/Input';
+import { useNotificationStore, useAuthStore, useThemeStore } from '@/stores';
 import { configFileApi } from '@/services/api/configFile';
+import styles from './ConfigPage.module.scss';

 export function ConfigPage() {
  const { t } = useTranslation();
  const { showNotification } = useNotificationStore();
  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const theme = useThemeStore((state) => state.theme);

  const [content, setContent] = useState('');
  const [loading, setLoading] = useState(true);
@@ -16,71 +23,264 @@ export function ConfigPage() {
  const [error, setError] = useState('');
  const [dirty, setDirty] = useState(false);

+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ current: number; total: number }>({ current: 0, total: 0 });
+  const editorRef = useRef<ReactCodeMirrorRef>(null);
+
  const disableControls = connectionStatus !== 'connected';

-  const loadConfig = async () => {
+  const loadConfig = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const data = await configFileApi.fetchConfigYaml();
      setContent(data);
      setDirty(false);
-    } catch (err: any) {
-      setError(err?.message || t('notification.refresh_failed'));
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('notification.refresh_failed');
+      setError(message);
    } finally {
      setLoading(false);
    }
-  };
+  }, [t]);

  useEffect(() => {
    loadConfig();
-  }, []);
+  }, [loadConfig]);

  const handleSave = async () => {
    setSaving(true);
    try {
      await configFileApi.saveConfigYaml(content);
      setDirty(false);
-      showNotification(t('notification.saved_success'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.save_failed')}: ${err?.message || ''}`, 'error');
+      showNotification(t('config_management.save_success'), 'success');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.save_failed')}: ${message}`, 'error');
    } finally {
      setSaving(false);
    }
  };

-  return (
-    <Card
-      title={t('nav.config_management')}
-      extra={
-        <div style={{ display: 'flex', gap: 8 }}>
-          <Button variant="secondary" size="sm" onClick={loadConfig} disabled={loading}>
-            {t('common.refresh')}
-          </Button>
-          <Button size="sm" onClick={handleSave} loading={saving} disabled={disableControls || loading || !dirty}>
-            {t('common.save')}
-          </Button>
-        </div>
+  const handleChange = useCallback((value: string) => {
+    setContent(value);
+    setDirty(true);
+  }, []);
+
+  // Search functionality
+  const performSearch = useCallback((query: string, direction: 'next' | 'prev' = 'next') => {
+    if (!query || !editorRef.current?.view) return;
+
+    const view = editorRef.current.view;
+    const doc = view.state.doc.toString();
+    const matches: number[] = [];
+    const lowerQuery = query.toLowerCase();
+    const lowerDoc = doc.toLowerCase();
+
+    let pos = 0;
+    while (pos < lowerDoc.length) {
+      const index = lowerDoc.indexOf(lowerQuery, pos);
+      if (index === -1) break;
+      matches.push(index);
+      pos = index + 1;
+    }
+
+    if (matches.length === 0) {
+      setSearchResults({ current: 0, total: 0 });
+      return;
+    }
+
+    // Find current match based on cursor position
+    const cursorPos = view.state.selection.main.head;
+    let currentIndex = 0;
+
+    if (direction === 'next') {
+      // Find next match after cursor
+      for (let i = 0; i < matches.length; i++) {
+        if (matches[i] > cursorPos) {
+          currentIndex = i;
+          break;
+        }
+        // If no match after cursor, wrap to first
+        if (i === matches.length - 1) {
+          currentIndex = 0;
+        }
      }
-    >
-      {error && <div className="error-box">{error}</div>}
-      <div className="form-group">
-        <label>{t('nav.config_management')}</label>
-        <textarea
-          className="input"
-          rows={20}
-          value={content}
-          onChange={(e) => {
-            setContent(e.target.value);
-            setDirty(true);
-          }}
-          disabled={disableControls}
-          placeholder="config.yaml"
-        />
-        <div className="hint">
-          {dirty ? t('system_info.version_current_missing') : loading ? t('common.loading') : t('system_info.version_is_latest')}
+    } else {
+      // Find previous match before cursor
+      for (let i = matches.length - 1; i >= 0; i--) {
+        if (matches[i] < cursorPos) {
+          currentIndex = i;
+          break;
+        }
+        // If no match before cursor, wrap to last
+        if (i === 0) {
+          currentIndex = matches.length - 1;
+        }
+      }
+    }
+
+    const matchPos = matches[currentIndex];
+    setSearchResults({ current: currentIndex + 1, total: matches.length });
+
+    // Scroll to and select the match
+    view.dispatch({
+      selection: { anchor: matchPos, head: matchPos + query.length },
+      scrollIntoView: true
+    });
+    view.focus();
+  }, []);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchQuery(value);
+    if (value) {
+      performSearch(value);
+    } else {
+      setSearchResults({ current: 0, total: 0 });
+    }
+  }, [performSearch]);
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      performSearch(searchQuery, e.shiftKey ? 'prev' : 'next');
+    }
+  }, [searchQuery, performSearch]);
+
+  const handlePrevMatch = useCallback(() => {
+    performSearch(searchQuery, 'prev');
+  }, [searchQuery, performSearch]);
+
+  const handleNextMatch = useCallback(() => {
+    performSearch(searchQuery, 'next');
+  }, [searchQuery, performSearch]);
+
+  // CodeMirror extensions
+  const extensions = useMemo(() => [
+    yaml(),
+    search(),
+    highlightSelectionMatches(),
+    keymap.of(searchKeymap)
+  ], []);
+
+  // Status text
+  const getStatusText = () => {
+    if (disableControls) return t('config_management.status_disconnected');
+    if (loading) return t('config_management.status_loading');
+    if (error) return t('config_management.status_load_failed');
+    if (saving) return t('config_management.status_saving');
+    if (dirty) return t('config_management.status_dirty');
+    return t('config_management.status_loaded');
+  };
+
+  const getStatusClass = () => {
+    if (error) return styles.error;
+    if (dirty) return styles.modified;
+    if (!loading && !saving) return styles.saved;
+    return '';
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('config_management.title')}</h1>
+      <p className={styles.description}>{t('config_management.description')}</p>
+
+      <Card>
+        <div className={styles.content}>
+          {/* Search bar */}
+          <div className={styles.searchBar}>
+            <div className={styles.searchInputWrapper}>
+              <Input
+                value={searchQuery}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
+                placeholder={t('config_management.search_placeholder', { defaultValue: '搜索配置内容... (Enter 下一个, Shift+Enter 上一个)' })}
+                disabled={disableControls || loading}
+                className={styles.searchInput}
+              />
+              {searchQuery && (
+                <span className={styles.searchCount}>
+                  {searchResults.total > 0
+                    ? `${searchResults.current} / ${searchResults.total}`
+                    : t('config_management.search_no_results', { defaultValue: '无结果' })}
+                </span>
+              )}
+            </div>
+            <div className={styles.searchActions}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={handlePrevMatch}
+                disabled={!searchQuery || searchResults.total === 0}
+                title={t('config_management.search_prev', { defaultValue: '上一个' })}
+              >
+                ↑
+              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={handleNextMatch}
+                disabled={!searchQuery || searchResults.total === 0}
+                title={t('config_management.search_next', { defaultValue: '下一个' })}
+              >
+                ↓
+              </Button>
+            </div>
+          </div>
+
+          {/* Editor */}
+          {error && <div className="error-box">{error}</div>}
+          <div className={styles.editorWrapper}>
+            <CodeMirror
+              ref={editorRef}
+              value={content}
+              onChange={handleChange}
+              extensions={extensions}
+              theme={theme === 'dark' ? 'dark' : 'light'}
+              editable={!disableControls && !loading}
+              placeholder={t('config_management.editor_placeholder')}
+              height="100%"
+              style={{ height: '100%' }}
+              basicSetup={{
+                lineNumbers: true,
+                highlightActiveLineGutter: true,
+                highlightActiveLine: true,
+                foldGutter: true,
+                dropCursor: true,
+                allowMultipleSelections: true,
+                indentOnInput: true,
+                bracketMatching: true,
+                closeBrackets: true,
+                autocompletion: false,
+                rectangularSelection: true,
+                crosshairCursor: false,
+                highlightSelectionMatches: true,
+                closeBracketsKeymap: true,
+                searchKeymap: true,
+                foldKeymap: true,
+                completionKeymap: false,
+                lintKeymap: true
+              }}
+            />
+          </div>
+
+          {/* Controls */}
+          <div className={styles.controls}>
+            <span className={`${styles.status} ${getStatusClass()}`}>
+              {getStatusText()}
+            </span>
+            <div className={styles.actions}>
+              <Button variant="secondary" size="sm" onClick={loadConfig} disabled={loading}>
+                {t('config_management.reload')}
+              </Button>
+              <Button size="sm" onClick={handleSave} loading={saving} disabled={disableControls || loading || !dirty}>
+                {t('config_management.save')}
+              </Button>
+            </div>
+          </div>
        </div>
-      </div>
-    </Card>
+      </Card>
+    </div>
  );
 }
--- a/src/types/style.d.ts
+++ b/src/types/style.d.ts
@@ -2,3 +2,6 @@ declare module '*.module.scss' {
  const classes: Record<string, string>;
  export default classes;
 }
+
+// Global constants injected by Vite at build time
+declare const __APP_VERSION__: string;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,38 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import path from 'path';
+import { execSync } from 'child_process';
+import fs from 'fs';
+
+// Get version from environment, git tag, or package.json
+function getVersion(): string {
+  // 1. Environment variable (set by GitHub Actions)
+  if (process.env.VERSION) {
+    return process.env.VERSION;
+  }
+
+  // 2. Try git tag
+  try {
+    const gitTag = execSync('git describe --tags --exact-match 2>/dev/null || git describe --tags 2>/dev/null || echo ""', { encoding: 'utf8' }).trim();
+    if (gitTag) {
+      return gitTag;
+    }
+  } catch {
+    // Git not available or no tags
+  }
+
+  // 3. Fall back to package.json version
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf8'));
+    if (pkg.version && pkg.version !== '0.0.0') {
+      return pkg.version;
+    }
+  } catch {
+    // package.json not readable
+  }
+
+  return 'dev';
+}

 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +43,9 @@ export default defineConfig({
      removeViteModuleLoader: true
    })
  ],
+  define: {
+    __APP_VERSION__: JSON.stringify(getVersion())
+  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')