feat(web): update claude code 1

Author: fiftin

web/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install)",
+      "Bash(npm install:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm run lint:*)"
+    ],
+    "deny": []
+  }
+}

web/package-lock.json

@@ -12,18 +12,18 @@
     "@mdi/font": "^7.0.0",
     "ansi_up": "^6.0.6",
     "axios": "^1.8.3",
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.4.0",
     "core-js": "^3.40.0",
     "cron-parser": "^5.3.0",
     "dayjs": "^1.11.13",
-    "vue": "^2.6.14",
-    "vue-chartjs": "^4.0.0",
+    "vue": "^3.4.0",
+    "vue-chartjs": "^5.3.0",
     "vue-codemirror": "^4.0.6",
-    "vue-i18n": "^8.18.2",
-    "vue-router": "^3.5.4",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.0",
     "vue-virtual-scroll-list": "^2.3.5",
-    "vuedraggable": "^2.24.3",
-    "vuetify": "^2.6.10"
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.5.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.6",
@@ -51,11 +51,10 @@
     "openai": "^4.65.0",
     "plugin-error": "^2.0.1",
     "prettier": "^3.4.2",
-    "sass": "~1.32.12",
+    "sass": "~1.77.0",
     "sass-loader": "^13.0.0",
     "through2": "^4.0.2",
-    "vue-cli-plugin-vuetify": "~2.5.0",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.8.0"
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite-plugin-vuetify": "^2.0.0"
   }
 }

web/package.json

@@ -907,8 +907,7 @@
   font-size: 1rem;
 }
 
-@import '~vuetify/src/styles/styles.sass';
-@media #{map-get($display-breakpoints, 'xl-only')} {
+@media (min-width: 1264px) {
   .CenterToScreen {
     transform: translateX(-130px);
   }
@@ -1085,7 +1084,7 @@ export default {
     },
 
     darkMode(val) {
-      this.$vuetify.theme.dark = val;
+      this.$vuetify.theme.global.name = val ? 'dark' : 'light';
       if (val) {
         localStorage.setItem('darkMode', '1');
       } else {

web/src/App.vue

@@ -57,7 +57,7 @@ $mdi-font-path: "~@mdi/font/fonts";
   src: url("../fonts/Roboto-Black.ttf") format('truetype');
 }
 
-@import '~vuetify/src/styles/main';
+@import 'vuetify/styles';
 
 .v-application.theme--dark .v-overlay__scrim {
   background: #878787 !important;

web/src/assets/scss/main.scss

@@ -1 +1,3 @@
-<template></template>
+<template>
+  <div></div>
+</template>

web/src/components/AboutDialog.vue

@@ -89,19 +89,19 @@
                 </tr>
                 <tr>
                   <td><b>{{ $t('created') }}</b></td>
-                  <td>{{ item.created | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.created) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('started') }}</b></td>
-                  <td>{{ item.start | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.start) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('end') }}</b></td>
-                  <td>{{ item.end | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.end) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('duration') }}</b></td>
-                  <td>{{ [item.start, item.end] | formatMilliseconds }}</td>
+                  <td>{{ $filters.formatMilliseconds([item.start, item.end]) }}</td>
                 </tr>
                 </tbody>
               </template>

web/src/components/TaskDetails.vue

@@ -36,8 +36,6 @@
 </template>
 <style lang="scss">
 
-@import '~vuetify/src/styles/settings/_colors.scss';
-
 .task-link-with-tooltip {
   text-decoration: underline !important;
   text-decoration-style: dashed !important;
@@ -47,7 +45,7 @@
 a.task-link-with-tooltip {
   &:hover {
     text-decoration-style: solid !important;
-    text-decoration-color: map-deep-get($blue, 'darken-2') !important;
+    text-decoration-color: #1976d2 !important;
   }
 }
 

web/src/components/TaskLink.vue

@@ -48,11 +48,11 @@
       </template>
 
       <template v-slot:item.start="{ item }">
-        {{ item.start | formatDate }}
+        {{ $filters.formatDate(item.start) }}
       </template>
 
       <template v-slot:item.end="{ item }">
-        {{ [item.start, item.end] | formatMilliseconds }}
+        {{ $filters.formatMilliseconds([item.start, item.end]) }}
       </template>
 
       <template v-slot:item.actions="{ item }">

web/src/components/TaskList.vue

@@ -30,13 +30,13 @@
 
         Started <span v-if="user">by <b>{{ user.name }}</b></span>
 
-        at <b>{{ item.start | formatDate }}</b>
+        at <b>{{ $filters.formatDate(item.start) }}</b>
       </span>
 
       <span class="ml-3 hidden-sm-and-down task-log-view__status_part">
         <v-icon
           small style="transform: translateY(-1px)">mdi-clock-outline</v-icon>
-        {{ [item.start, item.end] | formatMilliseconds }}
+        {{ $filters.formatMilliseconds([item.start, item.end]) }}
       </span>
     </div>
 
@@ -58,7 +58,7 @@
       >
         <div class="task-log-records__record" v-for="record in output" :key="record.id">
           <div class="task-log-records__time">
-            {{ record.time | formatTime }}
+            {{ $filters.formatTime(record.time) }}
           </div>
           <div class="task-log-records__output" v-html="$options.filters.formatLog(record.output)">
           </div>
@@ -130,7 +130,7 @@
 
 <style lang="scss">
 
-@import '~vuetify/src/styles/settings/_variables';
+@import 'vuetify/settings';
 
 $card-title-height: 68px;