release: v0.13.0 (#92)

【更新】v0.13.0

README.md

@@ -22,3 +22,12 @@
 yarn set version berry
 ```
 * 启动各环境的命令详见 [`package.json`](./package.json)。~~测试环境以后会加上的~~
+
+## 分支相关
+`wu` 开头的分支为开发分支，如 
+[`wu_main`](https://github.com/crrashh1542/win-up-to-date/tree/wu_main) 就是本项目的主线分支。
+
+以代号开头的分支为某特定代号下版本的版本发布分支，以下列表内加粗行表示为当前工作进行的分支。
+| 代号简写  | 代号          | 范围          |
+|----------|---------------|---------------|
+| **`th`** | **Threshold** | **v0 ~ v1.0** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "win-up-to-date",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "description": "A website project showing the latest status of Windows Insider versions.",
   "main": "index.js",
   "repository": "https://github.com/crrashh1542/win-up-to-date",
@@ -14,30 +14,31 @@
   },
   "dependencies": {
     "@fluentui/web-components": "^2.5.16",
-    "axios": "^1.6.3",
-    "core-js": "^3.35.0",
+    "axios": "^1.6.7",
+    "core-js": "^3.35.1",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
-    "vue": "^3.4.3",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/eslint-parser": "^7.23.3",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.9",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "autoprefixer": "^10.4.16",
-    "compression-webpack-plugin": "^10.0.0",
+    "autoprefixer": "^10.4.17",
+    "compression-webpack-plugin": "^11.0.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.20.1",
     "less": "^4.2.0",
-    "less-loader": "^11.1.4",
-    "postcss": "^8.4.32",
+    "less-loader": "^12.1.0",
+    "postcss": "^8.4.33",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.1",
+    "vue-clipboard3": "^2.0.0"
   },
   "eslintConfig": {
     "root": true,

prebuild.js

@@ -20,24 +20,32 @@ function getTime() {
 // STEP3 -------- 获取构建 hash
 function getHash(params) {
    const buildHash = childProcess.execSync('git rev-parse --short HEAD', { 'encoding': 'utf8' }).split('\n')[0]
-   console.log('[buildInfo] 已获取构建 commit hash：' + buildHash)
+   console.log('[buildInfo] 已获取当前提交 hash：' + buildHash)
    return buildHash
 }
 
-// STEP4 -------- 获取构建次数
+// STEP5 -------- 获取构建分支
 function getBuild(params) {
    const buildHash = childProcess.execSync('git rev-list HEAD --count', { 'encoding': 'utf8' }).split('\n')[0]
    console.log('[buildInfo] 已获取构建数：' + buildHash)
    return buildHash
 }
 
-// STEP4 -------- 组装并输出到文件
+// STEP4 -------- 获取构建次数
+function getBranch(params) {
+   const buildBranch = childProcess.execSync('git rev-parse --abbrev-ref HEAD', { 'encoding': 'utf8' }).split('\n')[0]
+   console.log('[buildInfo] 已获取当前分支：' + buildBranch)
+   return buildBranch
+}
+
+// STEP6 -------- 组装并输出到文件
 function writeInfo() {
    // 组装要输出的内容
    const content = `   {
       "time": "` + getTime() + `",
       "hash": "` + getHash() + `",
-      "build": ` + getBuild() + `
+      "build": ` + getBuild() + `,
+      "branch": "` + getBranch() + `"
    }`
 
    // 新建 temp 文件夹
@@ -63,5 +71,5 @@ function writeInfo() {
 
 }
 
-// STEP5 -------- 导出函数
+// STEP7 -------- 导出函数
 module.exports = writeInfo

src/App.vue

@@ -11,12 +11,12 @@ import './assets/styles/reset.less'
 // 引入组件
 import Appbar from './components/Appbar.vue'
 import Foo from './components/Footer.vue'
-import Navi from './components/Navi.vue'
+import Navbar from './components/Navbar.vue'
 import Setting from './components/Setting.vue'
 
 export default {
    name: 'App',
-   components: { Appbar, Foo, Setting, Navi },
+   components: { Appbar, Foo, Setting, Navbar },
    setup() {
 
       // STEP1 ------ 设置卡片显示的初始值，避免出现 undefined
@@ -58,7 +58,7 @@ export default {
       <router-view :isShowFlight="isShowFlight" :isShowBranch="isShowBranch" />
    </main>
    <Foo class="z-20" />
-   <Navi class="z-40"></Navi>
+   <Navbar class="z-40"></Navbar>
    <Setting class="z-50" @isShowFlight="setState" @isShowBranch="setState" />
 </template>
 

src/assets/fonts/iconfont/iconfont.less

@@ -63,6 +63,27 @@
 .icon-fluent::before {
   content: "\ed50";
 }
+.icon-qq::before {
+  content: "\e615";
+}
+
+// 详情页
+.icon-announcement::before {
+  content: "\e646";
+}
+.icon-compile::before {
+  content: "\e6d4";
+}
+.icon-arch::before {
+  content: "\ed4f";
+}
+.icon-uup:before {
+  content: "\e61a";
+}
+.icon-copy::before {
+  content: "\e678";
+}
+
 
 // 底部导航栏
 .icon-home::before {

src/assets/styles/global.less

@@ -5,8 +5,7 @@
 
 // 字体
 @wu-font-family: 'Google Sans', 'iconfont';
-@wu-font-catalog-size: 24px;
-@wu-font-catalog-weight: 500;
+
 
 // 颜色
 @import url('./color.less'); // 主题颜色
@@ -15,4 +14,5 @@
 @wu-color-split-line: #e2e2e2;
 
 // 布局
-@wu-layout-nav-height: 64px;
+@wu-layout-nav-height: 64px;
+@wu-icon-spacing: .4em;

src/components/Banner.vue

@@ -9,7 +9,7 @@ export default {
 
 <template>
     <div class="banner">
-        <div class="title">
+        <div class="title font-medium">
             <slot></slot>
         </div>
         <div class="subtitle">{{ description }}</div>
@@ -25,7 +25,6 @@ export default {
     margin: 30px 0 0;
     line-height: 1.25;
     .title {
-        font-weight: @wu-font-catalog-weight;
         font-size: var(--banner-title);
         padding-bottom: .35em;
     }

src/components/Catalog.vue

@@ -5,18 +5,16 @@ export default {
 </script>
 
 <template>
-    <div class="title">
+    <div class="catalog text-2xl my-3 font-medium">
         <slot></slot>
     </div>
 </template>
 
 <style lang="less" scoped>
 @import url('../assets/styles/global.less');
 
-.title {
+.catalog {
     color: @wu-color-text-imp;
-    font-size: @wu-font-catalog-size;
-    font-weight: @wu-font-catalog-weight;
     margin-bottom: 10px;
 }
 </style>

src/components/CopiableCode.vue

@@ -0,0 +1,57 @@
+<script>
+/**
+ * 可复制代码组件，代码右侧有个小复制按钮
+ * 用法：<CopiableCode value="xxx" />
+ */
+// 引入库
+import { provideFluentDesignSystem, fluentButton } from "@fluentui/web-components"
+import useClipboard from 'vue-clipboard3'
+
+const { toClipboard } = useClipboard()
+provideFluentDesignSystem().register(fluentButton())
+
+export default {
+    name: 'WidgetCopiableCode',
+    props: {
+        value: String
+    },
+    methods: {
+        copy(content) {
+            toClipboard(content)
+        }
+    }
+}
+</script>
+
+<template>
+    <!-- 代码本身 -->
+    <code class="text-base">{{ value }}</code>
+
+    <!-- 复制按钮 -->
+    <fluent-button class="text-sm" @click="copy(value)">
+        <span class="icon-copy">复制</span>
+    </fluent-button>
+
+    <!-- 复制完成的提示 -->
+    <!-- TODO -->
+</template>
+
+<style lang="less" scoped>
+@import url('../assets/styles/global.less');
+
+code {
+    background-color: @wu-color-theme-lighter;
+    border: 1px solid #ddd;
+    padding: .2em .36em;
+    border-radius: 4px;
+}
+
+span::before {
+    margin-right: @wu-icon-spacing;
+}
+
+fluent-button {
+    margin-left: @wu-icon-spacing;
+    font-family: 'iconfont', 'Segoe UI Variable', 'Segoe UI', sans-serif;
+}
+</style>

src/components/Navi.vue → src/components/Navbar.vue

@@ -18,15 +18,15 @@ const navSections = [
 ]
 
 export default {
-    name: 'WidgetNav',
+    name: 'WidgetNavBar',
     data() {
         return { navSections }
     }
 }
 </script>
 
 <template>
-    <div class="nav flex flex-row fixed bottom-0 left-0 w-full">
+    <div class="navbar flex flex-row fixed bottom-0 left-0 w-full">
 
         <router-link v-for="s in navSections" :to="s.path" 
             :key="s.value" class="inline text-center basis-1/3 py-2">
@@ -42,7 +42,7 @@ export default {
 <style lang="less" scoped>
 @import url('../assets/styles/global.less');
 
-.nav {
+.navbar {
     display: var(--nav-display);
     background-color: @wu-color-bar;
     backdrop-filter: blur(3px);
@@ -57,13 +57,13 @@ export default {
 
 // 适配
 @media screen and (min-width: 650px) {
-    .nav {
+    .navbar {
         --nav-display: none;
     }
 }
 
 @media screen and (max-width: 650px) {
-    .nav {
+    .navbar {
         --nav-display: flex;
     }
 }

src/components/TopNav.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+    name: 'WidgetTopNav'
+}
+</script>
+
+<template>
+    <div class="nav flex font-bold my-3 text-lg">
+        <slot>
+            <!-- 
+                expected eles: 1. span.icon-left
+                               2. span.grow
+                               3. span.icon-right
+            -->
+        </slot>
+    </div>
+</template>
+
+<style lang="less">
+@import url('../assets/styles/global.less');
+.nav {
+    margin: 0 .4em 12px;
+    color: #666;
+
+    span.icon-left { float: left; }
+    span.icon-left::before { margin-right: .4em; }
+    span.icon-right { float: right; }
+    span.icon-right::after { margin-left: .4em; }
+}
+
+</style>

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import showInfo from './scripts/showInfo'
+import showInfo from './scripts/showRepoInfo'
 import router from './router'
 import App from './App.vue'
 

src/router/index.js

@@ -8,13 +8,14 @@ const router = createRouter({
         { path: '/', component: () => import('../../src/views/MainHome.vue') },
         { path: '/about', component: () => import('../../src/views/MainAbout.vue') },
 
-        // GROUP 2 ---- 数据页
-        { path: '/category', redirect: '/category/germanium' }, // 临时作为类型首页
-        { path: '/category/:platform', name: 'category', component: () => import('../../src/views/DataCategoryList.vue') },
-
-        // GROUP 3 ---- 异常情况配置（404）
+        // GROUP 2 ---- 异常情况配置（404）
         { path: '/404', name: '404', component: () => import('../../src/views/NotFound.vue') },
         { path: '/:pathMatch(.*)', redirect: '/404' },
+
+        // GROUP 3 ---- 数据页面
+        { path: '/category', redirect: '/category/germanium' }, // 临时作为类型首页
+        { path: '/category/:platform', name: 'category', component: () => import('../../src/views/DataCategoryList.vue') },
+        { path: '/detail/:platform/:build', name: 'detail', component: () => import('../../src/views/DataDetail.vue') },
     ]
 })