探索/组织/用户仓库样式 github 布局 (#8)

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>

.github/release-template.md

@@ -1,4 +1,4 @@
-## ✨ Feat
+## ✨ Feature
 
 #### CSS 变量
 

.github/release.md

@@ -1,7 +1,20 @@
+## ✨ Feature
+
+#### CSS 变量
+
+- 支持自定义探索/组织/用户页面的仓库列表列数
+- 支持自定义探索/组织页面的用户/组织列表列数
+
 ## 🌈 Style
 
 #### 更符合 GitHub 风格
 
 - 同步 Issue/PR 的评论样式
 - 同步表情菜单样式
-- 同步探索页面仓库样式
+- 同步探索/组织/用户页面的仓库列表样式
+- 同步探索/组织页面的用户列表样式
+- 同步探索页面的组织列表样式
+
+## 🐞 Fix
+
+- 修复探索页面下仓库的类型标签意外触发悬浮效果

README.md

@@ -51,9 +51,14 @@ THEMES = gitea-dark, github-dark
 
 ### CSS 变量
 
-| 变量名                    | 描述         | Gitea (默认值) | Github | 推荐  | 最小值 | 最大值 |
+| 变量名                            | 描述                        | 默认值 | Github | 推荐  | 最小值 | 最大值 |
-| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
+| :-------------------------------- | :-------------------------- | :----- | :----- | :---- | :----- | :----- |
-| --custom-clone-menu-width | 克隆菜单宽度 | 232px          | 332px  | 200px | 150px  | 400px  |
+| --custom-clone-menu-width         | 克隆菜单宽度                | Gitea  | 332px  | 200px | 150px  | 400px  |
+| --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2      | 2      | 2     |        |        |
+| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3      | 1      | 2/3   |        |        |
+| --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2      | 2      | 2     |        |        |
+| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1      | 1      | 1     |        |        |
+| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2      | 1      | 2     |        |        |
 
 ## 截图
 

TODO.md

@@ -1,7 +1,6 @@
 ### 重大
 
 - gitea issue 默认标签颜色匹配使用 github 样式
-- 探索/组织/用户仓库样式 github 布局
 - issue/PR 列表样式 github 布局
 - styles/themes 库组件导出整理
 - defineTheme 颜色生成代码重构

src/core/types.ts

@@ -1,8 +1,8 @@
 type Primitive = string | boolean | number | null | undefined;
 type Tokens = { [key: string]: string | Tokens };
 
+export type CSSVarFunction = `var(--${string})`;
 export type WithOptionalLayer<T extends Tokens> = T & { "@layer"?: string };
-
 export type MapLeafNodes<Obj, LeafType> = {
   [Prop in keyof Obj]: Obj[Prop] extends Primitive
     ? LeafType

src/functions/index.ts

@@ -1 +1,2 @@
 export { scaleColorLight } from "./scss";
+export { fallbackVar } from "./var";

src/functions/var.ts

@@ -0,0 +1,7 @@
+import type { CSSVarFunction } from "src/core/types";
+
+type CSSFallbackVar = `var(--${string}, ${string})`;
+export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar {
+  const var_name = cssvar.replace("var(--", "").replace(")", "");
+  return `var(--${var_name}, ${fallback})`;
+}

src/types/vars.ts

@@ -38,6 +38,15 @@ const otherVars = {
 const customVars = {
   custom: {
     cloneMenuWidth: "custom-clone-menu-width",
+    explore: {
+      repolistColumns: "custom-explore-repolist-columns",
+      userlistColumns: "custom-explore-userlist-columns",
+    },
+    userRepolistColumns: "custom-user-repolist-columns",
+    org: {
+      repolistColumns: "custom-org-repolist-columns",
+      userlistColumns: "custom-org-userlist-columns",
+    },
   },
 };
 

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`

styles/components/explore.ts

@@ -1,19 +1,20 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+
+const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2");
+const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2");
+const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1");
 
 // 仓库列表
-export const repositoriesExplore = css`
+export const repoList = css`
-  // [TODO] 组织和用户使用 Github 的列表样式, 探索页面手机端样式待完善
   // 组织
-  /* .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven, */
+  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
   // 用户
-  /* .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve, */
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
   // 探索
   .page-content.explore.repositories > .ui.container {
     > .flex-list {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 16px;
-
       > .flex-item {
         border: 1px solid ${themeVars.color.light.border};
         border-radius: ${otherThemeVars.border.radius};
@@ -46,7 +47,9 @@ export const repositoriesExplore = css`
               color: ${themeVars.color.text.light.num1};
               gap: 16px;
               font-size: 12px;
-              > .flex-text-inline .tw-mr-2 {
+              > .flex-text-inline .color-icon {
+                width: 12px;
+                height: 12px;
                 margin-right: 0 !important;
               }
             }
@@ -67,4 +70,92 @@ export const repositoriesExplore = css`
       }
     }
   }
+  // 仓库列表列数
+  // 组织
+  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list {
+    grid-template-columns: repeat(${orgRepoVar}, 1fr);
+    gap: min(${orgRepoVar} * 8px, 16px);
+  }
+  // 用户
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list {
+    grid-template-columns: repeat(${userRepoVar}, 1fr);
+    gap: min(${userRepoVar} * 8px, 16px);
+  }
+  // 探索
+  .page-content.explore.repositories > .ui.container > .flex-list {
+    grid-template-columns: repeat(${exploreRepoVar}, 1fr);
+    gap: min(${exploreRepoVar} * 8px, 16px);
+  }
+`;
+
+const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3");
+const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2");
+
+// 用户列表
+export const userList = css`
+  // 组织
+  .page-content.organization.members > .ui.container,
+  // 探索的用户和组织
+  .page-content.explore.users > .ui.container {
+    > .flex-list {
+      display: grid;
+      > .flex-item {
+        border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
+        padding: 16px;
+        > .flex-item-main {
+          // 用户名称
+          > .flex-item-title {
+            gap: 8px;
+            margin-bottom: 8px;
+            // 用户标签
+            > .label {
+              font-size: 12px;
+              padding: 3px 6px;
+            }
+          }
+          // 用户描述
+          > .flex-item-body {
+            font-size: 12px;
+            svg {
+              width: 12px;
+              min-width: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  // 用户列表列数
+  // 组织
+  .page-content.organization.members > .ui.container > .flex-list {
+    grid-template-columns: repeat(${orgUserVar}, 1fr);
+    gap: min(${orgUserVar} * 8px, 16px);
+  }
+  // 探索的用户和组织
+  .page-content.explore.users > .ui.container > .flex-list {
+    grid-template-columns: repeat(${exploreUserVar}, 1fr);
+    gap: min(${exploreUserVar} * 8px, 16px);
+  }
+`;
+
+// 手机下的仓库和用户列表
+export const mobileList = css`
+  @media (max-width: 767.98px) {
+    // 组织的仓库列表
+    .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
+    // 用户的仓库列表
+    .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
+    // 探索的仓库列表
+    .page-content.explore.repositories > .ui.container,
+    // 组织的成员列表
+    .page-content.organization.members >.ui.container,
+    // 探索的用户和组织列表
+    .page-content.explore.users >.ui.container {
+      > .flex-list {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+    }
+  }
 `;