feat: add theme swtich support (#715)

* feat: add the frontend theme support

* add theme backend extension

* feat: complete the basic feature to switch theme

* add a help link of the theme

* improve the setting

---------

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import {
-  Document,
-  Menu as IconMenu,
-  Histogram,
-  Location,
-  Share,
-  ArrowDown,
-  Guide,
-  DataAnalysis
+    Document,
+    Menu as IconMenu,
+    Histogram,
+    Location,
+    Share,
+    ArrowDown,
+    Guide,
+    DataAnalysis, Help, Setting
 } from '@element-plus/icons-vue'
 import { ref, watch } from 'vue'
 import { API } from './views/net'
@@ -23,8 +23,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 +88,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) => {
+    setTheme(e)
+})
 </script>
 
 <template>
@@ -137,18 +148,7 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
     <el-main style="padding-top: 0px;">
       <div class="top-menu">
         <el-col style="display: flex; align-items: center;">
-          <el-tag style="font-size: 18px;">{{ t('language') }}</el-tag>
-          <el-dropdown trigger="click" @command="(command: string) => handleChangeLan(command)">
-            <el-icon><arrow-down /></el-icon>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item command="chinese">中文</el-dropdown-item>
-                <el-dropdown-item command="english">English</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-
-          <el-switch type="primary" data-intro="Switch light and dark modes" v-model="asDarkMode"/>
+          <el-icon @click="settingDialogVisible=true" size="20"><Setting /></el-icon>
         </el-col>
       </div>
       <TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
@@ -164,6 +164,55 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
       <a :href=appVersionLink target="_blank" rel="noopener">{{appVersion}}</a>
     </div>
   </el-container>
+
+    <el-dialog v-model="settingDialogVisible" :title="t('title.setting' )" width="50%" draggable destroy-on-close>
+        <el-row>
+            <el-col :span="4">
+              Theme:
+            </el-col>
+            <el-col :span="18">
+              <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-icon>
+                  <el-link href="https://github.com/LinuxSuRen/atest-ext-data-swagger/tree/master/data/theme" target="_blank">
+                      <Help />
+                  </el-link>
+              </el-icon>
+            </el-col>
+        </el-row>
+
+        <el-row>
+            <el-col :span="4">
+              Language:
+            </el-col>
+            <el-col :span="18">
+              <el-tag style="font-size: 18px;">{{ t('language') }}</el-tag>
+              <el-dropdown trigger="click" @command="(command: string) => handleChangeLan(command)">
+                <el-icon><arrow-down /></el-icon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="chinese">中文</el-dropdown-item>
+                    <el-dropdown-item command="english">English</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="4">
+              Dark Mode:
+            </el-col>
+            <el-col :span="18">
+              <el-switch type="primary" data-intro="Switch light and dark modes" v-model="asDarkMode"/>
+            </el-col>
+        </el-row>
+    </el-dialog>
 </template>
 
 <style>

console/atest-ui/src/locales/en.json

@@ -52,7 +52,8 @@
         "output": "Output",
         "proxy": "Proxy",
         "secure": "Secure",
-        "data": "Data"
+        "data": "Data",
+        "setting": "Setting"
     },
     "tip": {
         "filter": "Filter Keyword",

console/atest-ui/src/locales/zh.json

@@ -47,7 +47,8 @@
         "output": "输出",
         "proxy": "代理",
         "secure": "安全",
-        "data": "数据"
+        "data": "数据",
+        "setting": "设置"
     },
     "tip": {
         "filter": "过滤",

console/atest-ui/src/theme.ts

@@ -1,3 +1,57 @@
-export default function setAsDarkTheme(darkMode: boolean) {
+import { API } from './views/net'
+
+const themes: { [k: string]: any } = {}
+
+export function getThemes() {
+    return Object.keys(themes)
+}
+
+interface Theme {
+    key: string
+}
+
+API.GetThemes(data => {
+    data.data.forEach((theme: Theme) => {
+        const key = theme.key
+        API.GetTheme(key, (data: any) => {
+            themes[key] = JSON.parse(data.message)
+
+            const theme = getTheme()
+            if (theme) {
+                setTheme(theme)
+            }
+        })
+    })
+})
+
+export function setTheme(theme: string | null) {
+    if (!theme) {
+        return
+    }
+
+    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/TestCase.vue

@@ -975,7 +975,7 @@ const renameTestCase = (name: string) => {
              </el-option>
             </el-select>
           </el-col>
-          <el-col :span="19">
+          <el-col :span="18">
             <el-autocomplete
               v-model="testCaseWithSuite.data.request.api"
               style="width: 100%"
@@ -990,7 +990,7 @@ const renameTestCase = (name: string) => {
               </template>
             </el-autocomplete>
           </el-col>
-          <el-col :span="2" style="text-align-last: right;">
+          <el-col :span="3" style="text-align-last: right;">
             <el-dropdown split-button type="primary"
               @click="sendRequest"
               v-loading="requestLoading"

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 | null) => {
+    return fetch(`/api/v1/themes`, {})
+        .then(DefaultResponseProcess).then(callback)
+}
+
+const GetTheme = (name: string, callback: (d: any) => void | null) => {
+    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