Refine styles for pages (#31)

ZhiShuYun · Jan 3, 2024 · 4e6c9a9 · 4e6c9a9
1 parent 2d6ac1f
commit 4e6c9a9
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 56 deletions.
diff --git a/change/@zhishuyun-hub-5861341b-c9e2-4e38-add2-3bae72d4f86d.json b/change/@zhishuyun-hub-5861341b-c9e2-4e38-add2-3bae72d4f86d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refine styles",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/assets/scss/_markdown.scss b/src/assets/scss/_markdown.scss
@@ -13,6 +13,18 @@
   background-color: #253238 !important;
 }
 
+.markdown-body pre code {
+  color: white;
+}
+
+.markdown-body pre code .hljs-title,
+.hljs-keyword,
+.hljs-built_in,
+.hljs-number,
+.hljs-comment {
+  font-style: normal !important;
+}
+
 .markdown-body img {
   border-radius: 10px;
   box-shadow: 0px 0px 3px 0px var(--color-border-muted);

diff --git a/src/components/chat/Introduction.vue b/src/components/chat/Introduction.vue
@@ -110,7 +110,6 @@ export default defineComponent({
     margin-bottom: 100px;
     .icon {
       font-size: 20px;
-      margin-bottom: 10px;
     }
     .subtitle {
       text-align: center;

diff --git a/src/components/common/MarkdownRenderer.vue b/src/components/common/MarkdownRenderer.vue
@@ -32,9 +32,12 @@ export default defineComponent({
   background: none;
   padding-top: 3px;
   color: inherit;
-  // color: var(--el-text-color-primary);
   ol {
     list-style: initial;
   }
+
+  pre code {
+    color: white;
+  }
 }
 </style>
diff --git a/src/components/console/SidePanel.vue b/src/components/console/SidePanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="side-panel">
     <div>
-      <img src="@/assets/images/logo.svg" class="logo" @click="onHome" />
+      <img v-if="isOfficial" src="@/assets/images/logo.svg" class="logo" @click="onHome" />
     </div>
     <div class="links">
       <a
@@ -36,6 +36,7 @@ import {
   ROUTE_CONSOLE_DISTRIBUTION_INDEX
 } from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { BASE_URL_HUB } from '@/constants';
 
 interface ILink {
   key: string;
@@ -52,6 +53,9 @@ export default defineComponent({
     FontAwesomeIcon
   },
   computed: {
+    isOfficial() {
+      return window.location.origin === BASE_URL_HUB;
+    },
     active() {
       return this.$route.matched[0].path;
     },

diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
@@ -5,7 +5,7 @@
     </div>
   </div>
   <div v-else class="tasks">
-    <el-card v-for="_ in 8" :key="_" class="task">
+    <el-card v-for="_ in 12" :key="_" class="task">
       <el-skeleton animated>
         <template #template>
           <el-skeleton-item variant="image" class="icon-placeholder" />
@@ -120,12 +120,14 @@ export default defineComponent({
   flex: 1;
   width: 100%;
   overflow-y: scroll;
-  margin-top: 15px;
   flex-wrap: wrap;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   align-items: center;
+  max-width: 1700px;
+  margin: 15px auto;
+  padding-top: 10px;
   .task {
     width: 350px;
     margin-bottom: 30px;

diff --git a/src/i18n/zh/chat/message.ts b/src/i18n/zh/chat/message.ts
@@ -13,7 +13,7 @@ export default {
   question3: '用简单的术语解释量子计算的基本原理',
   question4: '虚拟现实对艺术创作产生了怎样的影响？',
   question5: '隐私保护和数据安全如何影响法律实践？',
-  question6: '如何应对复杂的税务法规变化？',
+  question6: '如何应对当今世界复杂的税务法规变化？',
   question7: '如何结合不同地区的文化背景创作独特美食？',
   question8: '如何通过旅行体验汲取文学创作灵感？',
   question9: '如何从不同行业的成功案例中获取商业创意？',

diff --git a/src/layouts/Midjourney.vue b/src/layouts/Midjourney.vue
@@ -80,14 +80,6 @@ export default defineComponent({
     padding: 15px;
     height: 100%;
     overflow-x: scroll;
-    .title {
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
-    .btn.btn-generate {
-      width: 80px;
-      border-radius: 20px;
-    }
   }
   .results {
     overflow-y: scroll;

diff --git a/src/main.ts b/src/main.ts
@@ -28,7 +28,7 @@ app.directive('loading', vLoading);
 app.mount('#app');
 console.debug('app mounted');
 
-app.directive('highlight', (el) => {
+app.directive('highlight', async (el) => {
   const blocks = el.querySelectorAll('pre code');
   blocks.forEach((block: HTMLPreElement) => {
     // create the copy button

diff --git a/src/operators/chat/operator.ts b/src/operators/chat/operator.ts
@@ -6,7 +6,7 @@ import {
   IChatConversation,
   IChatConversationAction
 } from './models';
-import { ENDPOINT_API } from '../common/contants';
+import { BASE_URL_API } from '@/constants';
 
 class ChatOperator {
   async askQuestion(data: IChatAskRequest, options: IChatAskOptions): Promise<AxiosResponse<IChatAskResponse>> {
@@ -43,7 +43,7 @@ class ChatOperator {
         headers: {
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }
@@ -59,7 +59,7 @@ class ChatOperator {
         headers: {
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }
@@ -75,7 +75,7 @@ class ChatOperator {
         headers: {
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }
@@ -91,7 +91,7 @@ class ChatOperator {
         headers: {
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }

diff --git a/src/operators/common/contants.ts b/src/operators/common/contants.ts
diff --git a/src/operators/midjourney/operator.ts b/src/operators/midjourney/operator.ts
@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { IMidjourneyImagineRequest, IMidjourneyImagineResponse, IMidjourneyImagineTask } from './models';
-import { ENDPOINT_API } from '../common/contants';
+import { BASE_URL_API } from '@/constants';
 
 class MidjourneyOperator {
   async task(id: string): Promise<AxiosResponse<IMidjourneyImagineTask>> {
@@ -15,7 +15,7 @@ class MidjourneyOperator {
           accept: 'application/json',
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }
@@ -32,7 +32,7 @@ class MidjourneyOperator {
           accept: 'application/json',
           'content-type': 'application/json'
         },
-        baseURL: ENDPOINT_API
+        baseURL: BASE_URL_API
       }
     );
   }

diff --git a/src/pages/console/distribution/Index.vue b/src/pages/console/distribution/Index.vue
@@ -128,15 +128,19 @@
               <el-divider class="mt-4 mb-4" />
               <div class="clear-both overflow-hidden">
                 <div class="float-left description">
-                  <p>{{ $t('distribution.title.currentLevel') }}: L{{ distributionStatus?.level?.level }}</p>
-                  <p>
+                  <p class="mt-0">
+                    {{ $t('distribution.title.currentLevel') }}: L{{ distributionStatus?.level?.level }}
+                  </p>
+                  <p class="mt-0">
                     {{ $t('distribution.title.currentPercentage') }}:
                     {{ distributionLevelMap[distributionStatus?.level?.level!]?.percentage }}%
                   </p>
                 </div>
                 <div class="float-right description">
-                  <p>{{ $t('distribution.title.nextLevel') }}: L{{ distributionStatus?.level?.level! + 1 }}</p>
-                  <p>
+                  <p class="mt-0">
+                    {{ $t('distribution.title.nextLevel') }}: L{{ distributionStatus?.level?.level! + 1 }}
+                  </p>
+                  <p class="mt-0">
                     {{ $t('distribution.title.nextPercentage') }}:
                     {{ distributionLevelMap[distributionStatus?.level?.level! + 1]?.percentage }}%
                   </p>

diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
@@ -218,35 +218,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.page {
-  width: 100%;
+.operation {
+  flex: 1;
+  padding: 15px;
   height: 100%;
-  display: flex;
-  flex-direction: row;
-  .presets {
-    width: 260px;
-    height: 100%;
-    overflow-y: scroll;
+  overflow-x: scroll;
+  .title {
+    font-size: 14px;
+    margin-bottom: 10px;
   }
-  .main {
-    flex: 1;
-    padding: 15px;
-    height: 100%;
-    overflow-x: scroll;
-    .title {
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
-    .btn.btn-generate {
-      width: 80px;
-      border-radius: 20px;
-    }
-  }
-  .result {
-    overflow-y: scroll;
-    width: 400px;
-    height: 100%;
-    border-left: 1px solid var(--el-border-color);
+  .btn.btn-generate {
+    width: 80px;
+    border-radius: 20px;
   }
 }
 </style>