From 8bb1961a0252fd78ccd78f9a9f97cf944229a6f9 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 23 Aug 2024 18:32:08 +0800 Subject: [PATCH] style: model file list --- src/assets/styles/common.less | 8 ++ .../highlight-code/code-viewer-dark.tsx | 27 +++++++ .../highlight-code/code-viewer-light.tsx | 76 ++++--------------- src/components/highlight-code/code-viewer.tsx | 11 ++- src/components/highlight-code/index.tsx | 4 +- .../highlight-code/styles/index.less | 6 +- src/locales/zh-CN/models.ts | 4 +- src/pages/llmodels/components/file-parts.tsx | 24 +++--- .../llmodels/components/hf-model-file.tsx | 6 +- src/pages/llmodels/components/model-card.tsx | 3 +- 10 files changed, 84 insertions(+), 85 deletions(-) create mode 100644 src/components/highlight-code/code-viewer-dark.tsx diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index c3f461d9..8e141e85 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -122,3 +122,11 @@ .font-700 { font-weight: var(--font-weight-bold); } + +.text-secondary { + color: var(--ant-color-text-secondary); +} + +.text-tertiary { + color: var(--ant-color-text-tertiary); +} diff --git a/src/components/highlight-code/code-viewer-dark.tsx b/src/components/highlight-code/code-viewer-dark.tsx new file mode 100644 index 00000000..03a8e662 --- /dev/null +++ b/src/components/highlight-code/code-viewer-dark.tsx @@ -0,0 +1,27 @@ +import { memo } from 'react'; +import CodeViewer from './code-viewer'; +import './styles/dark.less'; + +interface CodeViewerProps { + code: string; + lang: string; + autodetect?: boolean; + ignoreIllegals?: boolean; + copyable?: boolean; +} +const DarkViewer: React.FC = (props) => { + const { code, lang, autodetect, ignoreIllegals, copyable } = props || {}; + + return ( + + ); +}; + +export default memo(DarkViewer); diff --git a/src/components/highlight-code/code-viewer-light.tsx b/src/components/highlight-code/code-viewer-light.tsx index 9a39f32b..f18119db 100644 --- a/src/components/highlight-code/code-viewer-light.tsx +++ b/src/components/highlight-code/code-viewer-light.tsx @@ -1,8 +1,6 @@ -import hljs from 'highlight.js'; -import { memo, useMemo } from 'react'; -import CopyButton from '../copy-button'; +import { memo } from 'react'; +import CodeViewer from './code-viewer'; import './styles/light.less'; -import { escapeHtml } from './utils'; interface CodeViewerProps { code: string; @@ -11,67 +9,19 @@ interface CodeViewerProps { ignoreIllegals?: boolean; copyable?: boolean; } -const CodeViewer: React.FC = (props) => { - const { - code, - lang, - autodetect = true, - ignoreIllegals = true, - copyable = true - } = props || {}; - - const highlightedCode = useMemo(() => { - const autodetectLang = autodetect && !lang; - const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang); - let className = ''; - - if (!cannotDetectLanguage) { - className = `hljs ${lang}`; - } - - // No idea what language to use, return raw code - if (cannotDetectLanguage) { - console.warn(`The language "${lang}" you specified could not be found.`); - return { - value: escapeHtml(code), - className: className - }; - } - - if (autodetectLang) { - const result = hljs.highlightAuto(code); - return { - value: result.value, - className: className - }; - } - const result = hljs.highlight(code, { - language: lang, - ignoreIllegals: ignoreIllegals - }); - return { - value: result.value, - className: className - }; - }, [code, lang, autodetect, ignoreIllegals]); +const LightViewer: React.FC = (props) => { + const { code, lang, autodetect, ignoreIllegals, copyable } = props || {}; return ( - 
-      
-      {copyable && (
-        
-      )}
-
+ ); }; -export default memo(CodeViewer); +export default memo(LightViewer); diff --git a/src/components/highlight-code/code-viewer.tsx b/src/components/highlight-code/code-viewer.tsx index 69e78b25..7b115aab 100644 --- a/src/components/highlight-code/code-viewer.tsx +++ b/src/components/highlight-code/code-viewer.tsx @@ -1,7 +1,7 @@ +import classNames from 'classnames'; import hljs from 'highlight.js'; import { memo, useMemo } from 'react'; import CopyButton from '../copy-button'; -import './styles/dark.less'; import { escapeHtml } from './utils'; interface CodeViewerProps { @@ -10,6 +10,7 @@ interface CodeViewerProps { autodetect?: boolean; ignoreIllegals?: boolean; copyable?: boolean; + theme?: 'light' | 'dark'; } const CodeViewer: React.FC = (props) => { const { @@ -56,7 +57,13 @@ const CodeViewer: React.FC = (props) => { }, [code, lang, autodetect, ignoreIllegals]); return ( - 
+    
       
       {theme === 'dark' ? (
-        
+        
       ) : (
         
       )}
diff --git a/src/components/highlight-code/styles/index.less b/src/components/highlight-code/styles/index.less
index d7e8e3ba..784cb150 100644
--- a/src/components/highlight-code/styles/index.less
+++ b/src/components/highlight-code/styles/index.less
@@ -25,10 +25,14 @@
   }
 
   .code-pre {
-    padding-inline: 12px 32px;
+    padding-inline: 12px 12px;
     position: relative;
     border-radius: var(--border-radius-mini);
 
+    &.copyable {
+      padding-inline: 12px 32px;
+    }
+
     .copy-button {
       position: absolute;
       top: 6px;
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 1941a112..5f40ffa3 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -21,9 +21,9 @@ export default {
     '提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
   'models.sort.name': '名称',
   'models.sort.size': '大小',
-  'models.sort.likes': '喜欢',
+  'models.sort.likes': '点赞量',
   'models.sort.trending': '趋势',
-  'models.sort.downloads': '下载',
+  'models.sort.downloads': '下载量',
   'models.sort.updated': '更新时间',
   'models.search.result': '{count} 个结果',
   'models.data.card': '模型简介',
diff --git a/src/pages/llmodels/components/file-parts.tsx b/src/pages/llmodels/components/file-parts.tsx
index e52886c9..f1d933f7 100644
--- a/src/pages/llmodels/components/file-parts.tsx
+++ b/src/pages/llmodels/components/file-parts.tsx
@@ -8,17 +8,19 @@ const FileParts: React.FC<{
 }> = ({ fileList }) => {
   return (
     
-      {fileList.map((file, index) => {
-        return (
-          

-            
-              {' '}
-              Part {file.part} of {file.total}
-            
-            {convertFileSize(file.size)}
-          

-        );
-      })}
+      

+        {fileList.map((file, index) => {
+          return (
+            

+              
+                {' '}
+                Part {file.part} of {file.total}
+              
+              {convertFileSize(file.size)}
+            

+          );
+        })}
+      

     
   );
 };
diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx
index 6784ac47..f1adaaa2 100644
--- a/src/pages/llmodels/components/hf-model-file.tsx
+++ b/src/pages/llmodels/components/hf-model-file.tsx
@@ -117,10 +117,9 @@ const HFModelFile: React.FC = (props) => {
         return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
       });
 
-      const newList = generateGroupByFilename(list);
+      // const newList = generateGroupByFilename(list);
 
-      console.log('newList==========', newList);
-      const sortList = _.sortBy(newList, (item: any) => {
+      const sortList = _.sortBy(list, (item: any) => {
         return sortType === 'size' ? item.size : item.path;
       });
       setDataSource({ fileList: sortList, loading: false });
@@ -245,6 +244,7 @@ const HFModelFile: React.FC = (props) => {
                               color="var(--color-white-1)"
                               overlayInnerStyle={{
                                 width: 150,
+                                padding: 0,
                                 color: 'var(--ant-color-text-secondary)'
                               }}
                               title={
diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx
index 2e112271..3a8bcd13 100644
--- a/src/pages/llmodels/components/model-card.tsx
+++ b/src/pages/llmodels/components/model-card.tsx
@@ -137,7 +137,8 @@ const ModelCard: React.FC<{
               >
                 
                   
-                     README.md
+                    {' '}
+                    README.md
                   
                   
                     {collapsed ?  : }