feat: add theme swtich support

cmd/server.go

@@ -292,6 +292,7 @@ func (o *serverOption) runE(cmd *cobra.Command, args []string) (err error) {
 		server.RegisterRunnerServer(s, remoteServer)
 		server.RegisterMockServer(s, mockServerController)
 		server.RegisterDataServerServer(s, remoteServer.(server.DataServerServer))
+		server.RegisterThemeExtensionServer(s, remoteServer.(server.ThemeExtensionServer))
 		serverLogger.Info("gRPC server listening at", "addr", lis.Addr())
 		s.Serve(lis)
 	}()
@@ -336,13 +337,15 @@ func (o *serverOption) runE(cmd *cobra.Command, args []string) (err error) {
 		err = errors.Join(
 			server.RegisterRunnerHandlerFromEndpoint(ctx, mux, gRPCServerAddr, []grpc.DialOption{grpc.WithTransportCredentials(creds)}),
 			server.RegisterMockHandlerFromEndpoint(ctx, mux, gRPCServerAddr, []grpc.DialOption{grpc.WithTransportCredentials(creds)}),
+			server.RegisterThemeExtensionHandlerFromEndpoint(ctx, mux, gRPCServerAddr, []grpc.DialOption{grpc.WithTransportCredentials(creds)}),
 			server.RegisterDataServerHandlerFromEndpoint(ctx, mux, gRPCServerAddr, []grpc.DialOption{grpc.WithTransportCredentials(creds)}))
 	} else {
 		dialOption := []grpc.DialOption{grpc.WithTransportCredentials(insecure.NewCredentials()),
 			grpc.WithDefaultCallOptions(grpc.MaxCallRecvMsgSize(math.MaxInt))}
 		err = errors.Join(
 			server.RegisterRunnerHandlerFromEndpoint(ctx, mux, gRPCServerAddr, dialOption),
 			server.RegisterMockHandlerFromEndpoint(ctx, mux, gRPCServerAddr, dialOption),
+			server.RegisterThemeExtensionHandlerFromEndpoint(ctx, mux, gRPCServerAddr, dialOption),
 			server.RegisterDataServerHandlerFromEndpoint(ctx, mux, gRPCServerAddr, dialOption))
 	}
 

console/atest-ui/src/App.vue

@@ -9,6 +9,7 @@ import {
   Guide,
   DataAnalysis
 } from '@element-plus/icons-vue'
+import { Setting } from '@element-plus/icons-vue'
 import { ref, watch } from 'vue'
 import { API } from './views/net'
 import { Cache } from './views/cache'
@@ -23,8 +24,9 @@ import { useI18n } from 'vue-i18n'
 
 const { t, locale: i18nLocale } = useI18n()
 
-import setAsDarkTheme from './theme'
+import { setAsDarkTheme, getThemes, setTheme, getTheme } from './theme'
 
+const allThemes = ref(getThemes())
 const asDarkMode = ref(Cache.GetPreference().darkTheme)
 setAsDarkTheme(asDarkMode.value)
 watch(asDarkMode, Cache.WithDarkTheme)
@@ -87,6 +89,16 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
   panelName.value = historyPanelName;
 }
 
+const settingDialogVisible = ref(false)
+watch(settingDialogVisible, (v: boolean) => {
+    if (v) {
+        allThemes.value = getThemes()
+    }
+})
+const theme = ref(getTheme())
+watch(theme, (e: string) => {
+    setTheme(e)
+})
 </script>
 
 <template>
@@ -147,7 +159,7 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-
+          <el-icon @click="settingDialogVisible=true"><Setting /></el-icon>
           <el-switch type="primary" data-intro="Switch light and dark modes" v-model="asDarkMode"/>
         </el-col>
       </div>
@@ -164,6 +176,17 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
       <a :href=appVersionLink target="_blank" rel="noopener">{{appVersion}}</a>
     </div>
   </el-container>
+
+    <el-dialog v-model="settingDialogVisible" title="Setting" width="50%" draggable destroy-on-close>
+        <el-select v-model="theme" placeholder="Select a theme">
+            <el-option
+                v-for="item in allThemes"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
+        </el-select>
+    </el-dialog>
 </template>
 
 <style>

console/atest-ui/src/theme.ts

@@ -1,3 +1,49 @@
-export default function setAsDarkTheme(darkMode: boolean) {
+import { API } from './views/net'
+
+const themes: { [k: string]: any } = {}
+
+export function getThemes() {
+    return Object.keys(themes)
+}
+
+API.GetThemes().then(data => {
+    data.data.forEach((theme) => {
+        const key = theme.key
+        API.GetTheme(key).then((data: any) => {
+            themes[key] = JSON.parse(data.message)
+
+            const theme = getTheme()
+            if (theme) {
+                setTheme(theme)
+            }
+        })
+    })
+})
+
+export function setTheme(theme: string) {
+    const themeObj = themes[theme]
+    if (themeObj) {
+        applyTheme(themeObj)
+        window.localStorage.setItem('theme', theme)
+    }
+}
+
+export function getTheme() {
+    return window.localStorage.getItem('theme')
+}
+
+const applyTheme = function (data: any) {
+    if (data instanceof Object) {
+        Object.keys(data).forEach((key) => {
+            if (data[key] instanceof Object) {
+                applyTheme(data[key])
+            } else {
+                document.documentElement.style.setProperty(key, data[key])
+            }
+        })
+    }
+}
+
+export function setAsDarkTheme(darkMode: boolean) {
   document.documentElement.className = darkMode ? 'dark' : 'light'
 }

console/atest-ui/src/views/net.ts

@@ -898,6 +898,16 @@ var DataQuery = (store: string, kind: string, currentDatabase: string, query: st
         .catch(errHandler)
 }
 
+const GetThemes = (callback: (d: any) => void) => {
+    return fetch(`/api/v1/themes`, {})
+        .then(DefaultResponseProcess).then(callback)
+}
+
+const GetTheme = (name: string, callback: (d: any) => void) => {
+    return fetch(`/api/v1/themes/${name}`, {})
+        .then(DefaultResponseProcess).then(callback)
+}
+
 export const API = {
     DefaultResponseProcess,
     GetVersion,
@@ -911,5 +921,6 @@ export const API = {
     GetSecrets, DeleteSecret, CreateOrUpdateSecret,
     GetSuggestedAPIs, GetSwaggers,
     ReloadMockServer, GetMockConfig, SBOM, DataQuery, DataQueryAsync,
+    GetThemes, GetTheme,
     getToken
 }

pkg/apispec/remote_swagger.go

@@ -99,7 +99,8 @@ func decompressData(dataFile string) (err error) {
 	tarReader := tar.NewReader(gzipReader)
 
 	for {
-		header, err := tarReader.Next()
+		var header *tar.Header
+		header, err = tarReader.Next()
 		if err == io.EOF {
 			break // 退出循环
 		}
@@ -113,7 +114,10 @@ func decompressData(dataFile string) (err error) {
 			continue
 		}
 
-		destPath := filepath.Join(filepath.Dir(dataFile), filepath.Base(header.Name))
+		destPath := filepath.Join(filepath.Dir(dataFile), strings.TrimPrefix(header.Name, filepath.Base(filepath.Dir(dataFile))))
+		if err = os.MkdirAll(filepath.Dir(destPath), os.ModePerm); err != nil {
+			return
+		}
 
 		switch header.Typeflag {
 		case tar.TypeReg:

pkg/server/remote_server.go

@@ -66,6 +66,8 @@ var (
 type server struct {
 	UnimplementedRunnerServer
 	UnimplementedDataServerServer
+	UnimplementedThemeExtensionServer
+
 	loader             testing.Writer
 	storeWriterFactory testing.StoreWriterFactory
 	configDir          string
@@ -1284,6 +1286,35 @@ func (s *server) Query(ctx context.Context, query *DataQuery) (result *DataQuery
 	return
 }
 
+func (s *server) GetThemes(ctx context.Context, _ *Empty) (result *SimpleList, err error) {
+	loader := s.getLoader(ctx)
+	defer loader.Close()
+
+	result = &SimpleList{}
+	var themes []string
+	if themes, err = loader.GetThemes(); err == nil {
+		for _, theme := range themes {
+			result.Data = append(result.Data, &Pair{
+				Key:   theme,
+				Value: "",
+			})
+		}
+	}
+	return
+}
+
+func (s *server) GetTheme(ctx context.Context, in *SimpleName) (result *CommonResult, err error) {
+	loader := s.getLoader(ctx)
+	defer loader.Close()
+
+	result = &CommonResult{}
+	result.Message, err = loader.GetTheme(in.Name)
+	if err != nil {
+		result.Message = fmt.Sprintf("failed to get theme: %v", err)
+	}
+	return
+}
+
 // implement the mock server
 
 // Start starts the mock server